HTML Elements

← HTML Tags

HTML Attributes →

In this chapter, you will learn everything you need to know about HTML elements, their structure, and how they build web pages.

---

What is HTML Element?

An HTML element is a fundamental building block of an HTML document used to build webpages.

HTML elements are begin with a a opening tag, optionally includes some content, and ends with a closing tag.

HTML Elements can represent various types of content, such as text, images, links, and other multimedia.

An HTML element is everything from the start/opening tag to the end/closing tag.

HTML Element Syntax:

<tagname>Some content here</tagname>

Start/Opening tag: Marks the beginning of an element (e.g., <p>).

Content: The text or other elements inside the tags.

End/Closing Tag: Marks the end of an element (e.g., </p>).

Example

<p>Hallo, World!</p>

Here, <p> is the paragraph element. The browser renders the text "Hello, World!" inside a paragraph.

---

Types of HTML Elements

1. Block-Level Elements

Block-level elements take up the full width of their container and always start on a new line.

Key Fetures

Used to structure large sections of content.

Can contain other block-level or inline elements.

Block-level Element Examples

<div>: Generic container for content.

<p>: Defines a paragraph.

<h1> to <h6>: Represents headings of different levels.

<ul> and <ol>: Defines unordered and ordered Lists.

<table>: Defines tables.

Try It Yourself

<div> <h1>Welcome to My Website</h1> <p>This is a paragraph inside a section.</p> </div> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>

2. Inline Elements

Inline elements are used within block-level elements to style or define smaller parts of content. They do not start on a new line and only take up as much width as necessary.

Key Features:

Used for styling or linking.

Cannot contain block-level elements.

Inline Element Examples

<span>: Generic container for inline content.

<a>: Defines a hyperlink.

<strong>: Highlights text with bold emphasis.

<em>: Highlights text with italic emphasis.

<i>: Used to style text in italics.

<ui>: Used to underline text.

Try It Yourself

<p>This is a <strong>bold text</strong> in a paragraph.</p> <p>This is a <u>underlined text </u> in a paragraph.</p> <p>This is a <i>italic styled text</i> in a paragraph.</p> <p>This is a <a href="#">link</a> in a paragraph.</p>

3. Void (Empty) Elements

Void elements do not have closing tags or inner content. They are self-contained and often used for metadata or standalone items.

Key Features:

Does not require a closing tag.

Typically includes attributes for functionality.

Examples of Void Elements:

<meta>: Provides metadata for the page.

<img>: Embeds an image.

<br>: Inserts a line break.

<hr>: Adds a horizontal line.

Try It Yourself

<br> <hr> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGo1y0KV0QaHHYvLB-r0LbGlVJsGKGmYz15SFqCrhyphenhyphen5Zyapz-QTeGADB7SNMQ3vYKxG7SBO5o5r7WDJjQSHKYfJl6vUWXLu-Q4evKSuobt2lANKGYHIhAokEkuz9f3n4aHGYS4XCvR31OaMUkWU1cqFEMCmiO6Dkje222YbJi0XlNH_M61kF0AyS4NWKY/w320-h320-rw/cute_boy_w3studies.png" alt="A Boy"> <hr> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3TQUbND8x3fimfIjmAHeWZT8dtrE7JcxDViBR79P9wO3LKPmuOKqFa9eey5PLS9zu1i812abuibAo_S_6x4CgON1dgJeMTIp7c1nSHMf29TzWUBhZ0ecWv2HL9OMq2ERAKzc9MhSDdIP1Cif9UG3e-D3NKQ-_Za9iM2s3ZzeclQumOKZ4E0XbTA6MSys/s320/DALL%C2%B7E%202024-08-24%2019.37.43%20-%20An%20illustration%20of%20a%20young%20boy%20sitting%20alone%20in%20a%20sad%20environment.%20The%20boy%20has%20a%20somber%20expression,%20with%20his%20head%20slightly%20down,%20sitting%20on%20the%20ground.webp" alt="A Boy"> <hr> <br>

← HTML Tags

HTML Attributes →