Difficulty: Beginner
HTML elements are the building blocks of web pages. An element typically consists of an opening tag, content, and a closing tag. For example, <p>Hello</p> is a paragraph element where <p> is the opening tag, 'Hello' is the content, and </p> is the closing tag. The opening tag tells the browser where the element begins, and the closing tag (marked by the forward slash /) tells it where the element ends.
Not all elements have closing tags. Some elements are 'void elements' (also called 'empty elements' or 'self-closing elements') that cannot contain any content. Common void elements include <br> (line break), <hr> (horizontal rule), <img> (image), <input> (form input), <meta>, and <link>. In HTML5, void elements do not require a trailing slash - <br> is correct (though <br /> is also accepted for XHTML compatibility). Void elements must never have a closing tag; writing </br> or </img> is incorrect.
Nesting is how you build complex page structures. Elements can contain other elements as children, forming a tree structure. For example, a <ul> (unordered list) contains <li> (list item) elements, and each <li> can contain text, links, or even other lists. The key rule of nesting is that elements must be closed in the reverse order they were opened - like stacking and unstacking boxes. If you open <div> then <p>, you must close </p> before </div>. Incorrect nesting like <div><p></div></p> will cause rendering issues.
The difference between block-level and inline elements is fundamental. Block-level elements (like <div>, <p>, <h1>, <ul>) start on a new line and take up the full available width. Inline elements (like <span>, <a>, <strong>, <em>) flow within the text and only take up as much width as their content requires. You can nest inline elements inside block elements, but you should generally not nest block elements inside inline elements (though HTML5 allows <a> to wrap block elements).
HTML5 introduced many new semantic elements like <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer>. These work just like <div> in terms of rendering, but they carry meaning about the content they contain. Using semantic elements improves accessibility (screen readers can navigate by landmarks), SEO (search engines understand your content structure), and code readability (developers can quickly understand the page layout).
<!-- Element = Opening Tag + Content + Closing Tag -->
<p>This is a paragraph element.</p>
<!-- Opening tag can include attributes -->
<a href="https://example.com" target="_blank">Visit Example</a>
<!-- Elements can contain other elements -->
<div>
<h2>Section Title</h2>
<p>Section content goes here.</p>
</div>Each element has an opening tag (with optional attributes), content (text or other elements), and a closing tag. The closing tag uses a forward slash before the tag name.
<!-- Void elements have no content and no closing tag -->
<!-- Line break -->
<p>Line one<br>Line two</p>
<!-- Horizontal rule (divider) -->
<hr>
<!-- Image (requires src and alt attributes) -->
<img src="photo.jpg" alt="A sunset over the ocean">
<!-- Form input -->
<input type="text" placeholder="Enter your name">
<!-- These are also valid (XHTML style) but not required in HTML5 -->
<br />
<img src="photo.jpg" alt="Sunset" />Void elements cannot have children or text content. In HTML5, the trailing slash is optional. Common void elements: br, hr, img, input, meta, link, source, area, embed, col, wbr.
<!-- CORRECT nesting: close in reverse order -->
<div>
<p>A paragraph with <strong>bold text</strong> inside.</p>
<ul>
<li>First item</li>
<li>Second item with <a href="#">a link</a></li>
</ul>
</div>
<!-- WRONG nesting: tags overlap -->
<!-- <p><strong>This is wrong</p></strong> -->
<!-- CORRECT version -->
<p><strong>This is correct</strong></p>Elements must be closed in the reverse order they were opened. Think of nesting like Russian dolls - each doll must be fully inside its parent.
<!-- Block elements: start new line, take full width -->
<div>This div takes the full width.</div>
<p>This paragraph also takes the full width.</p>
<!-- Inline elements: flow with text -->
<p>
This text has a <strong>bold word</strong>,
an <em>italic word</em>,
and a <a href="#">link</a> - all inline.
</p>
<!-- You CAN wrap block elements with <a> in HTML5 -->
<a href="/article">
<article>
<h2>Click This Entire Card</h2>
<p>The whole article is a link.</p>
</article>
</a>Block elements stack vertically and take the full width. Inline elements flow within text. HTML5 allows <a> to wrap block elements, making entire sections clickable.
Opening Tags, Closing Tags, Void Elements, Nesting, Element Content, Self-Closing Tags