HTML Elements

HTML elements are the building blocks of web pages. Understanding how elements work—their syntax, nesting rules, and different types—is fundamental to writing valid, semantic HTML.

What is an HTML Element?

An HTML element typically consists of three parts: an opening tag, content, and a closing tag. The opening tag marks where the element begins, the content is what appears between the tags, and the closing tag marks where it ends. For example: <p>Hello World</p> is a complete paragraph element.

The opening tag consists of the element name surrounded by angle brackets. The closing tag is the same but includes a forward slash before the element name. Everything between these tags is the element's content, which can include text, other elements, or both.

Element names are case-insensitive in HTML, but the convention is to use lowercase for consistency and readability. <P>, <p>, and <P> are all valid, but <p> is the standard practice.

<!-- Standard element structure -->
<tagname>Content goes here</tagname>

<!-- Real examples -->
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<div>This is a division container.</div>
<span>This is an inline span.</span>

Void Elements (Self-Closing Elements)

Some HTML elements cannot have content and therefore don't have a closing tag. These are called void elements, empty elements, or self-closing elements. They perform their function without containing any text or nested elements.

Common void elements include: <img> for images, <br> for line breaks, <hr> for horizontal rules, <input> for form inputs, <meta> for metadata, <link> for external resources, <source> for media sources, and <area> for image maps.

In HTML5, you can write void elements with or without a trailing slash: both <img src="photo.jpg" alt="Photo"> and <img src="photo.jpg" alt="Photo" /> are valid. XHTML required the trailing slash, but HTML5 makes it optional.

<!-- Void elements (no closing tag) -->
<img src="photo.jpg" alt="A beautiful sunset">
<br>
<hr>
<input type="text" name="username">
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">

<!-- In XHTML syntax (optional in HTML5) -->
<img src="photo.jpg" alt="Sunset" />
<br />
<hr />

Nesting Elements

HTML elements can contain other elements, creating a hierarchical tree structure called the DOM (Document Object Model). When nesting elements, you must close tags in the reverse order they were opened—proper nesting is crucial for valid HTML.

Incorrect nesting can cause rendering issues and make your HTML invalid. Browsers will often try to correct improperly nested HTML, but the results may not be what you intended. Always close inner tags before closing outer tags.

Indentation is not required by HTML but is a best practice for readability. It visually shows the hierarchical structure of your document, making it easier to spot nesting errors and understand the page structure.

<!-- Correct nesting -->
<div>
  <p>This paragraph is <strong>properly nested</strong> inside the div.</p>
  <ul>
    <li>First item</li>
    <li>Second item with <em>emphasis</em></li>
  </ul>
</div>

<!-- INCORRECT nesting (avoid this!) -->
<p><strong>This is wrong</p></strong>
<!-- The strong tag opens inside p but closes outside it -->

<!-- Correct deep nesting -->
<article>
  <header>
    <h1>Article Title</h1>
    <p>By <span class="author">John Doe</span></p>
  </header>
  <section>
    <p>Article content with <a href="#">a link</a>.</p>
  </section>
</article>

Block vs Inline Elements

HTML elements are categorized as either block-level or inline elements, which affects how they display and interact with other elements. Block-level elements start on a new line and take up the full width available, while inline elements only take up as much width as necessary and don't start on a new line.

Common block elements include: <div>, <p>, <h1>-<h6>, <ul>, <ol>, <li>, <section>, <article>, <header>, <footer>, <nav>, and <form>. Common inline elements include: <span>, <a>, <strong>, <em>, <img>, <input>, <button>, <label>, and <code>.

You can change an element's display behavior using CSS (display: block, display: inline, display: inline-block, etc.), but understanding the default behavior is important for semantic HTML.

<!-- Block elements (each starts on new line) -->
<div>Block element 1</div>
<div>Block element 2</div>
<p>Block paragraph</p>

<!-- Inline elements (flow with text) -->
<span>Inline element</span>
<span>Another inline element</span>
<a href="#">Link</a>
<strong>Bold text</strong>

<!-- Mixed: inline elements inside block -->
<p>
  This is a paragraph (block) containing
  <strong>bold text</strong> (inline) and
  <a href="#">a link</a> (inline).
</p>

Semantic vs Non-Semantic Elements

Semantic elements clearly describe their meaning and purpose both to the browser and to developers. Examples include <article>, <nav>, <header>, <footer>, and <section>. Non-semantic elements like <div> and <span> don't tell you anything about their content.

Using semantic HTML improves accessibility (screen readers can better navigate your content), SEO (search engines better understand your page structure), code readability (developers can understand the purpose of each section), and maintainability.

HTML5 introduced many new semantic elements specifically to replace the generic <div> elements that were previously used for everything. Choose the most specific semantic element that accurately describes your content.

<!-- Semantic elements (descriptive meaning) -->
<header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h1>Article Title</h1>
    <p>Article content...</p>
  </article>
  
  <aside>
    <h2>Related</h2>
    <p>Sidebar content...</p>
  </aside>
</main>

<footer>
  <p>&copy; 2026 Company</p>
</footer>

<!-- Non-semantic (no inherent meaning) -->
<div class="container">
  <span class="highlight">Text</span>
</div>

Essential HTML Elements

  • <html> - Root element that contains all other elements
  • <head> - Container for metadata, stylesheets, and scripts
  • <title> - Defines the page title shown in browser tabs
  • <body> - Contains all visible page content
  • <h1> to <h6> - Headings in decreasing order of importance
  • <p> - Paragraph of text
  • <a> - Hyperlinks to other pages or resources
  • <img> - Embedded images
  • <div> - Generic block-level container
  • <span> - Generic inline container
  • <ul>, <ol>, <li> - Unordered lists, ordered lists, and list items
  • <table>, <tr>, <td>, <th> - Tables and table cells
  • <form>, <input>, <button> - Forms and form controls
  • <header>, <nav>, <main>, <footer> - Semantic page sections
  • <article>, <section>, <aside> - Semantic content sections