Mémento | HTML5

Gardez les bonnes habitudes XHTML.

La syntaxe d'HTML5 est plus permissive qu'en XHTML : les éléments vides ne nécessitent pas d'être fermés.

HTML définit des familles d'éléments plus variées que les simples types bloc et en ligne: les méta-informations, les éléments de flux, les éléments de phrasé, le contenu embarqué, et le contenu interactif.

Un nouveau doctype, plus simple à retenir.

<!DOCTYPE html>

Structure de base d'un document

            
                <!DOCTYPE html><!-- le doctype -->
                <html lang="fr"><!-- la racine -->
<head>><!-- en-tête du document -->
<meta charset="utf-8"><!-- meta informations -->
<title>Mon document</title><!-- titre du document -->
</head>
<body><!-- corps du document -->
...
</body>
</html>
            
                <!DOCTYPE html> <!-- le doctype -->
<html lang="fr"> <!-- la racine -->
<head> <!-- en-tête du document -->
<meta charset="utf-8"> <!-- meta informations -->
<title>Mon document</title> <!-- titre du document -->
<style>Mes styles</style> <!-- Styles embarqués dans le document -->
<script>Mon js</script> <!-- Script contient un script (javascript) ou fait référence à un fichier externe -->
<noscript>Mon js</noscript> <!-- Lorsque les scripts sont désactivés sur le navigateur -->
<base>Mon js</base> <!-- L'attribut href indique une url absolue de base à partir de laquellle calculer les liens du document -->
<body> <!-- corps du document -->

Des sections pour structurer le document

            
                <article> <!-- Article. Portion de contenu indépendante, se suffisant en termes de compréhension (pouvant être syndiqué dans un flux RSS) -->
<aside> <!-- Aparté. Contenu indirectement lié au contenu principal, non nécessaire à sa compréhension : définitions, digressions, sidebar, compléments... -->
<section> <!-- Section. Elément générique pour une section de contenu ou d'application web, utilisé à défaut d'un autre élément de section plus sémantique tel que article, nav, header,
footer, aside. A ne pas confondre avec div qui n'a aucune valeur semantique.En général, section contient un titre qui l'a définit. -->
<nav> <!-- Navigation. Regroupe la sélection des principaux liens pour naviguer dans le site, l'application ou le document. -->
</header> <!-- En-tête. S'applique au document entier, mais aussi à toute section au sens large, article y compris. -->
</footer><!-- Footer. S'applique au document entier, mais aussi à toute section au sens large, article y compris -->

Hierarchisation du texte et séparations

            
                <!-- Hiérarchie des titres. Six niveaux de titres pour hiérarchiser le contenu. Bien les utilisers selon leur niveau et non leur aspect ou taille par défaut.
Il revient aux CSS d'en définir le rendu -->
<h1>Balise titre</h1> <h2>Balise titre</h2> <h3>Balise titre</h3> <h4>Balise titre</h4> <h5>Balise titre</h5> <h6>Balise titre</h6> <hgroup> <!-- Groupe de titres. Regroupe un ensemble d'éléments <h1><h6> quand l'en-tête est constitué de plusieurs niveaux (sous-titres, lignes, additionnelles, mentions), pour représenter l'en-tête d'une section. --> <p> <!-- Paragraphe. Contient un paragraphe de texte, éventuellement accompagné d'autres balises en ligne plus sémantique (des images, vidéos, audio), mais pas d'autre élément de type bloc (y compris p lui meme) --> <wbr> <!-- Indication d'opportunité de césure de mot. Indique au navigateur qu'il est plus opportun de scinder un mot à l'emplacement de cet élément, s'il y a besoin, notamment pour éviter une césure automatique pouvant être mal interprétée. --> <br> <!-- Forcer un saut de ligne : l'affichagese poursuit en début de ligne suivante --> <hr> <!-- Séparation : élément vide qui marque une séparation dans le contenu, typiquement au niveau des paragraphes, usuellement représentée par une barre horizontale -->

Conteneurs génériques

            
                <!-- Hiérarchie des titres. Six niveaux de titres pour hiérarchiser le contenu. Bien les utilisers selon leur niveau et non leur aspect ou taille par défaut.
Il revient aux CSS d'en définir le rendu -->
<div><!-- Conteneur de type bloc. Elément neutre permettant de regrouper d'autre éléments de tous types (bloc ou en ligne) --> <span><!-- Conteneur de type en ligne. Equivalent en ligne de l'élément bloc <div> il n'a pas de valeur sémantique propre, mais peut être employé comme conteneur neutre. -->

Balises en ligne sur le statut du contenu

            
                <ins><!-- Conteneur ajouté. Marque une portion de contenu insérée dans le document. -->
                <del><!-- Conteneur supprimé. Marque une portion de contenu amenée à être supprimé du document. -->
                <s><!-- Conteneur obsolète. Signifie que le contenu n'est plus exact ou pertinent dans le contexte, usuellement représenté par un texte barré. -->
            
        

Bloc sémantique