HTML5 New Elements

Overview

HTML5 introduced many new semantic and functional elements, making webpage structure clearer and more powerful. This chapter introduces the main new elements in HTML5.

Structure Elements

<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>

These elements define the structure of a webpage:

<header>
    <h1>Website Title</h1>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
    </nav>
</header>

<main>
    <article>
        <h2>Article Title</h2>
        <p>Article content...</p>
    </article>
    
    <aside>
        <h3>Related Links</h3>
    </aside>
</main>

<footer>
    <p>&copy; 2024 All rights reserved</p>
</footer>

Content Elements

<figure> and <figcaption>

<figure>
    <img src="image.jpg" alt="Image">
    <figcaption>Image caption</figcaption>
</figure>

<mark>, <time>, <progress>, <meter>

<p>This is <mark>important</mark> text.</p>
<time datetime="2024-01-01">January 1, 2024</time>
<progress value="70" max="100">70%</progress>
<meter value="0.6">60%</meter>

<details> and <summary>

<details>
    <summary>Click to expand</summary>
    <p>Detailed content...</p>
</details>

Form Elements

<datalist> and <output>

<input list="browsers">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
</datalist>

<output name="result">0</output>

Media Elements

<video>, <audio>, <source>, <track>

<video controls>
    <source src="movie.mp4" type="video/mp4">
    <track kind="subtitles" src="subs.vtt" srclang="en">
</video>

<audio controls>
    <source src="music.mp3" type="audio/mpeg">
</audio>

Graphics Elements

<canvas> and <svg>

<canvas id="myCanvas" width="200" height="100"></canvas>

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

New Input Types

HTML5 added new input types:

<input type="color">
<input type="date">
<input type="email">
<input type="number">
<input type="range">
<input type="search">
<input type="tel">
<input type="time">
<input type="url">

Browser Support

Most modern browsers support HTML5 new elements. For older browsers, use polyfills or JavaScript libraries.

Best Practices

1. Use semantic tags appropriately
2. Provide progressive enhancement
3. Validate your code
4. Consider accessibility
5. Test cross-browser compatibility

Summary

HTML5 new elements greatly enhance HTML's semantics and functionality. Proper use of these elements creates clear, powerful modern webpages.