HTML Elements

What Is an HTML Element?

An HTML element is a complete unit made of an opening tag, optional attributes, optional content, and a closing tag.

• Start tag: <p>
• Attributes (optional): class="note", id="intro"
• Content (optional): text or child elements
• End tag: </p>

<p class="note">This is a paragraph.</p>

Notes: Some elements are empty (void) and have no closing tag. Elements can contain other elements (nesting) to form the DOM tree.

Syntax of an Element

General pattern:

<name attribute="value">content</name>

• Tag names are case-insensitive in HTML (use lowercase by convention).
• Attribute types:
  • Key/value: href="/home", title="Docs"
  • Boolean: disabled, required (presence means true)
  • Global attributes: id, class, style, title, lang, dir, hidden, tabindex, role, and ARIA (aria-label, aria-hidden)

Examples:

<a href="/docs" title="Go to docs">Docs</a>
<button disabled>Save</button>
<div id="hero" class="container" lang="en">Welcome</div>

Empty (Void) Elements

Void elements don’t wrap content and have no closing tag. They represent standalone items.

• <br> – Line break
• <hr> – Thematic break
• <img src="cat.jpg" alt="A cat"> – Image (use meaningful alt text)
• <input type="text" placeholder="Your name"> – Form input
• <link rel="stylesheet" href="styles.css"> – External CSS
• <meta charset="UTF-8"> – Metadata
• <source>, <track> – Media sources and captions

HTML5: don’t self-close with />. Use <img ...>, not <img ... />.

Nesting Elements

Elements can be nested but must be properly ordered and semantically valid.

Correct nesting

<div>
  <p><strong>Text</strong> with <em>emphasis</em>.</p>
</div>

Common mistakes and fixes

Incorrect closing order:

<p><em>Wrong closing order</p></em>

Correct:

<p><em>Proper order</em></p>

Block inside a paragraph (invalid):

<p><div>Block inside <p> is invalid</div></p>

Fix:

<p>Intro paragraph.</p>
<div>Block content</div>

Lists must contain only <li> items:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Block vs Inline Elements

Block-level elements start on a new line and typically expand to fill width. Inline elements flow with surrounding text and only take the space they need.

Quick demo (visualizing flow):

<style>
  .box { border: 1px solid; padding: 4px; margin: 4px 0; display: block; }
  .inline { border: 1px dashed; padding: 2px; }
</style>
<div class="box">Block A</div>
<div class="box">Block B</div>
<p>Some text with <span class="inline">inline span</span> and <a class="inline" href="#">inline link</a> inside.</p>

CSS can change default display (inline-block, flex, grid), but knowing defaults helps predict layout.

Semantic Elements

Semantic tags add meaning to your structure, improving accessibility and SEO.

• <header> – site/section header (branding, heading, nav)
• <nav> – group of major navigation links
• <main> – primary page content (one per page)
• <section> – thematic grouping (usually with a heading)
• <article> – self-contained content (post, comment)
• <aside> – tangential content (sidebar)
• <footer> – footer for a page or section
• <figure> + <figcaption> – media with caption

Mini layout example:

<header>
  <h1>My Blog</h1>
  <nav aria-label="Primary">
    <a href="/home">Home</a> | <a href="/posts">Posts</a>
  </nav>
</header>
<main>
  <article>
    <h2>Hello, Semantic HTML</h2>
    <p>Clean structure helps both users and machines.</p>
    <figure>
      <img src="diagram.png" alt="Site structure diagram">
      <figcaption>Figure 1: Basic page layout</figcaption>
    </figure>
  </article>
  <aside>
    <p>Subscribe to updates!</p>
  </aside>
</main>
<footer>
  <small>&copy; 2025 Me</small>
</footer>

Need Help?

Ask the AI if you need help understanding or want to dive deeper in any topic.