HTML5: Introduction

HTML5 is the fifth revision of the HTML markup language, the fundamental standard for structuring content on the World Wide Web.

What is HTML5?

HTML5 represents the evolution of the HTML language, introducing new features that make web development simpler and more powerful. Among the main innovations we find:

Semantic elements

HTML5 introduces semantic tags that give meaning to the page structure:

• <header> - Page or section header
• <nav> - Main navigation
• <main> - Main content of the page
• <article> - Independent and reusable content
• <section> - Thematic section of the document
• <aside> - Content related but separate from the main content
• <footer> - Page or section footer

New form input types

<input type="email" placeholder="email@example.com">
<input type="date" min="2023-01-01">
<input type="range" min="0" max="100">
<input type="color" value="#ff0000">

Native browser APIs

HTML5 brings several native JavaScript APIs:

• Canvas - 2D/3D graphic drawing
• Video and Audio - Multimedia without plugins
• Geolocation - User location
• LocalStorage/SessionStorage - Persistent storage
• Web Workers - Background processing
• WebSockets - Bidirectional communication

Basic HTML5 document structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My page</title>
</head>
<body>
    <header>
        <h1>Site title</h1>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article>
            <h2>Article title</h2>
            <p>Article content...</p>
        </article>
    </main>
    
    <footer>
        <p>&copy; 2023 My site</p>
    </footer>
</body>
</html>

Best practices

1. Always use the DOCTYPE declaration - <!DOCTYPE html> is essential
2. Specify the language - <html lang="en"> for accessibility
3. Semantic structure - Use appropriate tags for content
4. Accessibility - Add alt attributes to images
5. SEO - Use descriptive and structured meta tags

Conclusion

HTML5 is the fundamental base for any web developer. Knowing its features in depth is essential for creating modern, accessible, and search engine optimized sites.