What Is HTML5? Structure, Semantic Elements & Examples

HTML5 is the current version of HTML (HyperText Markup Language), the language that gives every web page its structure. HTML describes what each piece of content is (a heading, a paragraph, a navigation menu, a form), while CSS controls how it looks and JavaScript controls how it behaves. That is why HTML is often called the backbone, or skeleton, of a website.

This guide covers the structure of an HTML5 document, the semantic elements that HTML5 introduced, tags and attributes you will use every day, and the mistakes that most often break pages. Every code sample passes the W3C Nu HTML Checker with no errors or warnings.

A Short History: From HTML to HTML5 to the Living Standard

Tim Berners-Lee created HTML in the early 1990s at CERN as part of the World Wide Web. It went through numbered versions, with HTML 4.01 (1999) being the long-standing one. HTML5 was developed from 2004 onward by the WHATWG, a group of browser makers, together with the W3C, and the W3C published it as a formal Recommendation in October 2014.

Since 2019, there is only one official HTML specification: the HTML Living Standard maintained by the WHATWG, which is updated continuously instead of in numbered releases. So when people say “HTML5” today, they mean modern HTML as described by that standard. There is no HTML6 planned.

What HTML5 Added

• A simple doctype: just <!DOCTYPE html> instead of the long HTML 4 declarations.
• Semantic elements: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure> and <time>, which describe the role of content instead of wrapping everything in <div>.
• Native audio and video: <audio> and <video> replaced plugins like Flash.
• Graphics: <canvas> for drawing with JavaScript, and inline <svg>.
• Better forms: input types such as email, url, number, date and range, plus built-in validation with attributes like required and pattern.
• JavaScript APIs developed alongside it, such as Web Storage (localStorage), geolocation, drag and drop and the History API.
• Removed presentational tags: elements like <center> and <font> are obsolete. Use CSS for layout and appearance.

The Structure of an HTML5 Document

Here is a complete, valid HTML5 page for a simple recipe article. It shows the parts every page needs and the main semantic elements in context:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cold Brew at Home | Bean Notes</title>
    <meta name="description" content="A simple cold brew coffee recipe with ratios and timings.">
    <link rel="stylesheet" href="/styles.css">
    <script src="/app.js" defer></script>
  </head>
  <body>
    <header>
      <a href="/">Bean Notes</a>
      <nav aria-label="Main">
        <ul>
          <li><a href="/recipes/">Recipes</a></li>
          <li><a href="/about/">About</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <article>
        <h1>Cold Brew at Home</h1>
        <p>Published <time datetime="2026-10-22">22 October 2026</time></p>

        <section>
          <h2>What you need</h2>
          <ul>
            <li>100 g coarsely ground coffee</li>
            <li>1 litre of cold water</li>
          </ul>
        </section>

        <section>
          <h2>Steps</h2>
          <ol>
            <li>Stir the coffee into the water.</li>
            <li>Leave it in the fridge for 16 to 18 hours.</li>
            <li>Strain through a paper filter.</li>
          </ol>
          <figure>
            <img src="/img/cold-brew.webp" alt="A jar of cold brew coffee being strained through a paper filter" width="800" height="533">
            <figcaption>Straining takes about ten minutes.</figcaption>
          </figure>
        </section>
      </article>

      <aside>
        <h2>Related</h2>
        <p><a href="/recipes/iced-latte/">Iced latte</a></p>
      </aside>
    </main>

    <footer>
      <p>&copy; 2026 Bean Notes</p>
    </footer>
  </body>
</html>

The head: information about the page

Everything inside <head> is metadata, which is not shown on the page itself:

• <!DOCTYPE html> tells the browser to use standards mode. Without it, browsers fall back to “quirks mode” and render some CSS differently.
• lang="en" on <html> sets the page language for screen readers, translation tools and search engines.
• <meta charset="utf-8"> sets the character encoding so that symbols and non-English text display correctly. Put it first in the head.
• <meta name="viewport"> makes the page fit mobile screens instead of showing a zoomed-out desktop layout.
• <title> appears in the browser tab and usually as the headline in search results, and the meta description is often used as the search snippet. I cover both in more detail in how to optimize an HTML page for SEO.
• <link rel="stylesheet"> loads CSS, and <script defer> loads JavaScript without blocking the page from rendering.

The body: what visitors see

The <body> holds the visible content, organized with semantic elements:

Use <div> and <span> only when no semantic element fits, typically as a styling hook.

Why Semantic HTML Matters

• Accessibility: screen readers announce landmarks such as navigation and main content and let users jump between them and between headings. A page built only from <div>s gives them nothing to navigate by.
• SEO: clear headings and structure help search engines understand what a page is about and which part is the main content. For developers, I wrote a broader guide on technical SEO for front-end developers.
• Maintainability: <nav> and <article> explain themselves to the next developer; <div class="box2"> does not.
• Free behaviour: a real <button> is focusable and works with the keyboard out of the box; a clickable <div> needs extra code to do the same.

Elements, Tags and Attributes

An element is usually written as an opening tag, content and a closing tag, such as <p>Hello</p>. Some elements are void elements with no content and no closing tag, such as <img>, <br>, <hr>, <input>, <meta> and <link>. Tag names are not case-sensitive, but lowercase is the convention.

Attributes add information to an element and go in the opening tag: <a href="/about/">, <img src="photo.webp" alt="...">. Two attributes work on any element:

• id must be unique within the page. Use it for in-page links (#section-id), to connect a <label> to an input, or to find one element from JavaScript.
• class can be shared by many elements, and one element can have several classes separated by spaces. Use it for styling and for selecting groups of elements.

Block-level vs inline elements

By default, block-level elements such as <p>, <div>, <h1>–<h6>, <ul>, <section> and <table> start on a new line and take the full available width. Inline elements such as <a>, <span>, <strong>, <em> and <img> sit within a line of text. Strictly, modern HTML groups elements into content categories such as “flow” and “phrasing” content, and CSS’s display property decides how each one is laid out, but block and inline remain a useful mental model.

Common HTML5 Tags and What They Do

MDN’s HTML elements reference lists every element with browser support details.

HTML5 Forms and Media Example

HTML5 forms validate common input on their own. In this example the browser will not submit the form until the email field contains something that looks like an email address, and the date field shows a native date picker:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Newsletter</title>
  </head>
  <body>
    <main>
      <form action="/subscribe" method="post">
        <label for="email">Email</label>
        <input id="email" name="email" type="email" required autocomplete="email">

        <label for="topic">Topic</label>
        <select id="topic" name="topic">
          <option value="web">Web development</option>
          <option value="ai">AI</option>
        </select>

        <label for="start">Start date</label>
        <input id="start" name="start" type="date">

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

      <video controls width="640" height="360" poster="/img/intro.jpg">
        <source src="/video/intro.mp4" type="video/mp4">
        Your browser does not support the video element.
      </video>
    </main>
  </body>
</html>

Each <label> is linked to its input through matching for and id values, so clicking the label focuses the field and screen readers read the label aloud. Built-in validation improves the experience, but it can be bypassed, so always validate data on the server too.

Useful Global Attributes

Common HTML Mistakes to Avoid

• Missing the doctype, lang or charset.
• Images without alt text. Use an empty alt="" only for purely decorative images.
• Choosing headings for their size instead of their level. Style them with CSS instead.
• Using <div> or <span> with a click handler instead of <button> or <a>.
• Form inputs without a <label>; a placeholder is not a label.
• Duplicate id values on the same page.
• Using tables or obsolete tags such as <center> for layout.

Run your pages through the W3C validator or a linter like html-validate in your build to catch most of these automatically. If you want to know what the browser does with your markup next, read what HTML parsing means and how the browser’s rendering engine works.

How to Write and View Your First HTML Page

1. Open any code editor. Visual Studio Code is free and popular, but even a plain text editor works.
2. Paste the example page above and save it as index.html.
3. Open the file in a browser by double-clicking it or dragging it into a window.
4. Edit, save and refresh to see changes. To view the HTML of any website, press Ctrl+U (Cmd+Option+U on a Mac), or right-click an element and choose Inspect to open the developer tools.

Conclusion

HTML5 is simply modern HTML: a short doctype, a properly filled-in head, and a body built from elements that describe what the content is. Get that structure right and everything built on top of it, from CSS and JavaScript to accessibility and search rankings, becomes easier. Validate your markup, prefer semantic elements over generic ones, and leave appearance to CSS.

FAQs