HTML5 Fundamentals

HTML (HyperText Markup Language) is the standard language for creating web pages. HTML5 is the latest version of the language, bringing many new features and improvements.

Basic Structure of an HTML5 Page

Here is the basic structure of an HTML5 page:

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titre de la page</title>
</head>
<body>
    <!-- Contenu de la page -->
</body>
</html>

HTML5 Semantic Elements

HTML5 introduced several semantic elements that make it easier to structure content:

• <header>: Header of the page or of a section
• <nav>: Navigation section
• <main>: Main content of the page
• <section>: Generic content section
• <article>: Self-contained, independent content
• <aside>: Related but separate content
• <footer>: Page footer

Example of Using Semantic Elements

<header>
    <h1>Mon Site Web</h1>
    <nav>
        <ul>
            <li><a href="/">Accueil</a></li>
            <li><a href="/blog">Blog</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
    </nav>
</header>

<main>
    <section>
        <h2>À propos</h2>
        <p>Bienvenue sur mon site web...</p>
    </section>
    
    <article>
        <h2>Mon dernier article</h2>
        <p>Contenu de l'article...</p>
    </article>
    
    <aside>
        <h3>Articles connexes</h3>
        <ul>
            <li><a href="#">Article 1</a></li>
            <li><a href="#">Article 2</a></li>
        </ul>
    </aside>
</main>

<footer>
    <p>&copy; 2023 Mon Site Web</p>
</footer>

Forms in HTML5

HTML5 also improved forms with new input types and attributes:

<form>
    <label for="email">Email:</label>
    <input type="email" id="email" required>
    
    <label for="website">Site web:</label>
    <input type="url" id="website">
    
    <label for="age">Âge:</label>
    <input type="number" id="age" min="0" max="120">
    
    <label for="birthday">Date de naissance:</label>
    <input type="date" id="birthday">
    
    <button type="submit">Envoyer</button>
</form>

Multimedia Elements

HTML5 introduced native elements for audio and video:

<video controls width="500">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Votre navigateur ne prend pas en charge la vidéo HTML5.
</video>

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Votre navigateur ne prend pas en charge l'audio HTML5.
</audio>

Conclusion

HTML5 offers many features that make it easier to build modern, accessible websites. By using the appropriate semantic elements, you improve not only the structure of your code, but also your site’s accessibility and SEO.

To deepen your knowledge of HTML5, I recommend consulting the official MDN (Mozilla Developer Network) documentation and practicing regularly by building personal projects.