INTCSS: Syntaxe

📄 Le DOCTYPE 🔤 Encodage des caractères ⚡ La balise <script> 🔗 La balise <link> 🏷️ Éléments HTML5 📌 Attributs HTML5 📄 Document HTML5

📄 1. Le DOCTYPE

Le DOCTYPE est la toute première ligne d'un document HTML. Il indique au navigateur quelle version de HTML utiliser pour interpréter la page.

❌ Anciennes versions HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Long et difficile à mémoriser

✅ HTML5

<!DOCTYPE html>

Simple, court et facile à retenir

💡 Important : Le DOCTYPE n'est pas une balise HTML, c'est une instruction. Il doit être placé avant la balise <html>.

📖 Pourquoi le DOCTYPE est-il important ?

✅ Explication

Il déclenche le mode standard du navigateur (vs mode quirks)
Il garantit un affichage cohérent entre les navigateurs
Sans DOCTYPE, les navigateurs utilisent le mode "quirks" (comportement imprévisible)

🔤 2. Encodage des caractères

L'encodage des caractères définit comment les caractères sont représentés et interprétés par le navigateur.

<meta charset="UTF-8">

📌 UTF-8

Encodage recommandé pour HTML5

Support de toutes les langues (français, arabe, chinois...)
Support des emojis 😀🎉❤️
Compatible avec ASCII

📌 Position

Dans la balise <head>, dès les premiers octets

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    ...

📝 Exemple : Caractères spéciaux en UTF-8

<p>Français : é, è, ê, ë, à, ù, ç, œ</p>
<p>Arabe : مرحبا بالعالم</p>
<p>Emojis : 😀 🎉 ❤️ 🚀</p>

✨ Aperçu

Français : é, è, ê, ë, à, ù, ç, œ

Arabe : مرحبا بالعالم

Emojis : 😀 🎉 ❤️ 🚀

⚡ 3. La balise <script>

La balise <script> permet d'intégrer ou de lier du code JavaScript à une page HTML.

📌 JavaScript interne

<script>
    console.log("Bonjour le monde !");
</script>

📌 JavaScript externe

<script src="script.js"></script>

Avantage : Code réutilisable et plus propre

📌 Attribut defer

<script src="script.js" defer></script>

Exécute le script après le chargement du HTML

📌 Attribut async

<script src="script.js" async></script>

Exécute le script dès qu'il est téléchargé

💡 Bonnes pratiques : Placez les balises <script> juste avant la fermeture de </body> pour ne pas bloquer l'affichage de la page.

🔗 4. La balise <link>

La balise <link> définit la relation entre le document courant et une ressource externe.

📌 Lier un fichier CSS

<link rel="stylesheet" href="style.css">

📌 Icône du site (favicon)

<link rel="icon" type="image/png" href="favicon.png">

📌 Version imprimable

<link rel="stylesheet" href="print.css" media="print">

📌 Préchargement

<link rel="preload" href="font.woff2" as="font">

📝 Exemple complet d'utilisation de link

<head>
    <meta charset="UTF-8">
    <title>Mon site</title>
    <!-- CSS principal -->
    <link rel="stylesheet" href="css/main.css">
    <!-- Version mobile -->
    <link rel="stylesheet" href="css/mobile.css" media="(max-width: 768px)">
    <!-- Favicon -->
    <link rel="icon" type="image/png" href="img/favicon.png">
</head>

🏷️ 5. Éléments HTML5

Un élément HTML est composé d'une balise ouvrante, de contenu et d'une balise fermante.

❮

Ceci est un paragraphe

❯

❮/❯

📌 Éléments sémantiques

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

📌 Éléments de texte

<h1>...<h6>, <p>, <span>, <strong>, <em>, <mark>

📌 Éléments multimédia

<img>, <audio>, <video>, <canvas>, <svg>

📌 Éléments de liste

<ul>, <ol>, <li>, <dl>, <dt>, <dd>

📌 Éléments de tableau

<table>, <thead>, <tbody>, <tr>, <td>, <th>

📌 Éléments de formulaire

<form>, <input>, <button>, <select>, <textarea>

📝 Exemple : Structure avec éléments sémantiques

<body>
    <header>
        <h1>Mon Site</h1>
        <nav>
            <ul>
                <li><a href="#">Accueil</a></li>
                <li><a href="#">À propos</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article>
            <h2>Titre de l'article</h2>
            <p>Contenu de l'article...</p>
        </article>
    </main>
    
    <footer>
        <p>© 2026 Mon Site</p>
    </footer>
</body>

📌 6. Attributs HTML5

Les attributs fournissent des informations supplémentaires sur les éléments HTML.

❮

input

type

"text"

❯

📌 Attributs globaux

id – Identifiant unique
class – Classe CSS
style – Style inline
title – Info-bulle
data-* – Données personnalisées
hidden – Cache l'élément

📌 Nouveaux attributs HTML5

placeholder – Texte indicatif
required – Champ obligatoire
autofocus – Focus automatique
pattern – Validation par regex
min/max – Valeurs min/max
step – Incrément

📝 Exemple : Utilisation des attributs HTML5

<!-- Formulaire avec attributs HTML5 -->
<form>
    <input type="text" placeholder="Votre nom" required>
    <input type="email" placeholder="Email" required>
    <input type="date" min="2020-01-01" max="2025-12-31">
    <input type="number" min="0" max="100" step="5">
    <input type="color" value="#ff0000">
    <input type="range" min="0" max="100" value="50">
    <button type="submit">Envoyer</button>
</form>

<!-- Élément avec données personnalisées -->
<div id="user-42" class="user-card" data-user-id="42" data-role="admin">
    John Doe
</div>

📄 7. Document HTML5

Un document HTML5 complet suit une structure bien définie.

📝 Structure complète d'un document HTML5

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Description de la page">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="author" content="Votre nom">
    <title>Titre de la page</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" type="image/png" href="favicon.png">
</head>
<body>
    <header>
        <h1>En-tête du site</h1>
        <nav>
            <ul>
                <li><a href="#accueil">Accueil</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section id="accueil">
            <h2>Section d'accueil</h2>
            <p>Contenu principal de la page...</p>
        </section>
        
        <section id="services">
            <h2>Nos services</h2>
            <article>
                <h3>Service 1</h3>
                <p>Description du service 1</p>
            </article>
        </section>
    </main>
    
    <aside>
        <h3>Barre latérale</h3>
        <p>Informations complémentaires...</p>
    </aside>
    
    <footer>
        <p>© 2026 Mon Site - Tous droits réservés</p>
    </footer>
    
    <script src="script.js"></script>
</body>
</html>

📌 Récapitulatif de la structure

<!DOCTYPE html> – Déclaration du type de document
<html lang="fr"> – Élément racine avec langue française
<head> – Métadonnées (non visibles)
<body> – Contenu visible de la page
<header> – En-tête de la page
<main> – Contenu principal
<footer> – Pied de page

📝 Résumé du chapitre

✅ Le DOCTYPE en HTML5 est simplement <!DOCTYPE html>
✅ L'encodage recommandé est UTF-8 : <meta charset="UTF-8">
✅ La balise <script> pour JavaScript (interne ou externe)
✅ La balise <link> pour lier CSS, favicon, préchargement
✅ Les éléments HTML5 sémantiques améliorent la structure
✅ Les attributs (id, class, data-*) enrichissent les éléments
✅ Un document HTML5 a une structure bien définie (head → body)

📌 Quiz de vérification

Question 1 : Quel est le DOCTYPE en HTML5 ?

📖 Voir la réponse

✅ Réponse

<!DOCTYPE html>

Question 2 : Quelle balise utilise-t-on pour lier un fichier CSS externe ?

📖 Voir la réponse

✅ Réponse

<link rel="stylesheet" href="style.css">

Question 3 : À quoi sert l'attribut data-* ?

📖 Voir la réponse

✅ Réponse

Il permet de stocker des données personnalisées dans un élément HTML, accessibles via JavaScript.

Question 4 : Où doit être placé l'encodage <meta charset="UTF-8"> ?

📖 Voir la réponse

✅ Réponse

Dans la balise <head>, dès les premiers octets.