HTML Elements

An HTML element is a start tag, content, and an end tag. In this lesson you'll learn how elements work, how they nest, and the difference between block and inline elements.

HTML Elements Explained

The HTML element is everything from the start tag to the end tag:

<p>This is a paragraph.</p>

Some elements are empty — they have no content and no closing tag:

<br>       <!-- Line break (no closing tag) -->
<hr>       <!-- Horizontal line (no closing tag) -->
<img>      <!-- Image (no closing tag) -->

Nested HTML Elements

HTML elements can be nested (contain other elements). The inner element is a child of the outer element.

<body>

<h1>This is a Heading</h1>

<p>This is a <strong>bold</strong> word in a paragraph.</p>

</body>

💡 Note: Always close tags in the correct order. If you open <p> and then <strong>, close <strong> first, then <p>.

HTML Is Not Displayed — It Is Rendered

When you write HTML, the browser reads the tags and renders (displays) the content. The tags themselves are not shown.

<!-- You write this: -->
<h1>Hello World</h1>

<!-- The browser shows this: -->
Hello World       ← (big heading, no visible tags)

Block vs Inline Elements

HTML elements are either block-level or inline.

Block-Level Elements

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

<div>This is a block element.</div>
<div>This is another block element.</div>

Common block elements: <div>, <h1> to <h6>, <p>, <form>, <footer>, <header>, <section>, <article>

Inline Elements

Inline elements do not start on a new line and only take up as much width as necessary.

<span>This is inline.</span>
<span>This is also inline.</span>
<span>They all flow on the same line.</span>

Common inline elements: <span>, <a>, <img>, <strong>, <em>, <code>

HTML Attributes

HTML elements can have attributes. Attributes provide additional information about elements. You'll learn more about attributes in the next chapter.

<a href="https://www.w3schools.com">Visit W3Schools</a>

In the example above, href is an attribute of the <a> element.

Next: HTML Attributes