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

html

<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

html

<!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

Always use the DOCTYPE declaration - <!DOCTYPE html> is essential
Specify the language - <html lang="en"> for accessibility
Semantic structure - Use appropriate tags for content
Accessibility - Add alt attributes to images
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.

HTML5: Introduction ​

What is HTML5? ​

Semantic elements ​

New form input types ​

Native browser APIs ​

Basic HTML5 document structure ​

Best practices ​

Conclusion ​