Home›Guides›HTML & CSS›HTML Semantic Elements Explained — Structure, Forms & Accessibility

🎨 HTML & CSS

HTML Structure and Semantic Elements

HTML structure and semantics are the foundation of every front-end exam. Here's what gets tested.

Examifyr·2026·5 min read

Document structure

Every HTML document follows a standard structure. The DOCTYPE tells the browser which version of HTML to expect.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- visible content here -->
    <script src="app.js"></script>
</body>
</html>

Note: Scripts at the bottom of body load after HTML is parsed, avoiding render-blocking. Alternatively, use defer attribute on scripts in head.

Semantic HTML elements

Semantic elements describe their content's meaning, improving accessibility and SEO.

<header>   <!-- site/section header, nav links -->
<nav>      <!-- navigation links -->
<main>     <!-- primary content (only one per page) -->
<article>  <!-- self-contained, distributable content -->
<section>  <!-- thematic grouping of content -->
<aside>    <!-- tangentially related content (sidebar) -->
<footer>   <!-- site/section footer -->
<figure>   <!-- image/diagram with optional caption -->
<figcaption> <!-- caption for figure -->
<time datetime="2026-04-19">April 19</time>
<address>  <!-- contact information -->

Note: Use <div> for layout/styling when no semantic element applies. But always prefer semantic elements — they help screen readers and search engines.

Headings and content hierarchy

Headings create document hierarchy. Never skip levels for styling purposes.

<h1>Site Title</h1>           <!-- one per page -->
<h2>Section Heading</h2>
<h3>Sub-section</h3>

<p>Paragraph text</p>
<strong>Important text</strong>  <!-- semantic bold -->
<em>Emphasised text</em>         <!-- semantic italic -->
<b>Stylistic bold</b>            <!-- no semantic meaning -->
<i>Stylistic italic</i>

<ul>  <!-- unordered list -->
    <li>Item one</li>
    <li>Item two</li>
</ul>

<ol>  <!-- ordered list -->
    <li>First step</li>
    <li>Second step</li>
</ol>

Forms

Forms collect user input. The action attribute specifies where data is sent; method specifies GET or POST.

<form action="/submit" method="POST">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>

    <label for="password">Password</label>
    <input type="password" id="password" name="password" minlength="8">

    <select id="role" name="role">
        <option value="">Choose role</option>
        <option value="admin">Admin</option>
        <option value="user" selected>User</option>
    </select>

    <textarea name="bio" rows="4"></textarea>

    <input type="checkbox" id="terms" name="terms">
    <label for="terms">I agree to the terms</label>

    <button type="submit">Submit</button>
</form>

Note: Always pair labels with inputs using for/id. This improves accessibility and clicking the label focuses the input.

Inline vs block elements

Block elements take full width and start on a new line. Inline elements flow with text.

<!-- Block elements -->
<div>, <p>, <h1>-<h6>, <ul>, <ol>, <li>
<table>, <form>, <header>, <section>, <article>

<!-- Inline elements -->
<span>, <a>, <strong>, <em>, <img>, <input>
<button>, <label>, <code>

<!-- inline-block -->
/* behaves inline but respects width/height/margins */
display: inline-block;

Note: You cannot place a block element inside an inline element. E.g. <a><div>...</div></a> is invalid HTML.

Exam tip

The most common HTML exam question: "What's the difference between div and section/article?" — div has no semantic meaning; section/article tell browsers and screen readers about the content's role.

🎯

Think you're ready? Prove it.

Take the free HTML & CSS readiness test. Get a score, topic breakdown, and your exact weak areas.

Take the free HTML & CSS test →

Free · No sign-up · Instant results

CSS Selectors Explained — Specificity, Pseudo-classes & Combinators

← All HTML & CSS guides