HedgeDoc - Collaborative markdown notes

#**Dictionnaire HTML5** **Dernière mise à jour :** 2014-04-11 **Permalien :** <\url{https://notes.typo3.org/p/dvp-html5}> **Documents de référence :** <\url{http://www.w3.org/TR/html5/}>, <\url{http://developers.whatwg.org/}> ##Introduction ###Liste des Attributs globaux * accesskey : guide l'User Agent dans la création d'un raccourci clavier, et pour activer ou sélectionner un élément de la page. * class : assigne une ou des classes à un élément (typiquement pour lui ajouter des styles ou des fonctionnalités). * **Remarque :** *class* fait sens auprès des moteurs. * contenteditable : rend éditable ou non le contenu d'un élément. * dir : spécifie le sens de lecture du texte d'un élément. * draggable : rend possible ou non le glissement d'un élément (équivaut au mouvement *drag* d'un *drag and drop*). * dropzone : spécifie le comportement d'un élément lorsqu'il reçoit un élément glissable valide (faire un drop, créer une copie, faire un lien…) * hidden : si présent, l'élément est masqué et l'User Agent ne devrait même pas le servir. * **Remarque :** une règle CSS contraire prend le dessus sur cette valeur. Ex : * <style> * p { display:block; } * </style> * <p hidden> * Ce contenu sera servi à l'utilisateur. * </p> * id : assigne un identifiant unique à un élément. Cet identifiant ne doit pas contenir d'espace. * **Remarque :** *id* n'a aucune valeur sémantique. * lang : spécifie la langue principale du contenu d'un élément. * spellcheck : active ou non la correction orthographique sur le texte d'un élément. * style : ajoute des styles CSS à un élément. * **Remarque :** pour masquer/afficher un élément, il faut utiliser l'attribut *hidden* et non l'attribut *style*. * tabindex : définit si un élément peut recevoir le focus, et l'ordre de séquence de focus sur les éléments de la page. * title : permet d'accompagner un élément avec du texte additionnel, typiquement sous la forme d'une info-bulle ou d'une étiquette. * translate : empêche ou non la traduction du texte d'un élément, ainsi que le contenu de certains de ces attributs. Ex : * <header> * Site officiel de <img src="logo.png" alt="my english band" translate="no" /> * </header> * ###L'attribut ITEMPROP Il est utilisé pour le schéma de micro-données Schema.org <\url{http://schema.org/}>. L'attribut peut être ajouté à la balise BODY et tous ses enfants, ainsi qu'aux balises META et LINK. ###Les commentaires Vous pouvez commenter votre document HTML5, afin de rendre votre code plus clair et donc plus simple à maintenir. Les commentaires se rédigent ainsi :   ###À propos des ARIA Role Ces rôles font partie de la recommandation Accessible Rich Internet Applications (ARIA) pour favoriser l'accessibilité des documents et des applications Web (et notamment leur interprétation par les lecteurs d'écran). Le rôle par défaut d'une balise ne devrait pas être rappelé. Néanmoins, tant que HTML5 ne sera pas complètement supporté, on peut rappeler les rôles des nouvelles balises. Plus d'infos sur : <\url{http://www.w3.org/TR/wai-aria/#roles}> ###À propos de la validation La validation HTML d'un document consiste à vérifier si le son code est conforme au standard HTML. C'est un processus incontournable de l'intégration Web. Le validateur du W3C se trouve sur : <\url{http://validator.w3.org/}> **Voici un document HTML valide minimal :** <!DOCTYPE html> <title>Mon titre</title> **Voici un document HTML valide standard :** <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <title>Mon titre</title> </head> <body> </body> </html> --------------------------------------------------------------------------------- ##Le doctype C'est le préambule obligatoire à tout document HTML. Il se place sur la première ligne du document. Le doctype HTML5 est <!DOCTYPE html> Comme le reste des balises et attributs HTML5, il est insensible à la casse. ##L'élément racine ###HTML C'est la racine de votre document HTML5. Il est précédé du DOCTYPE. Tous les autres éléments sont enfants de HTML. Ses deux enfants directs sont les éléments HEAD et BODY. Il est conseillé de définir la langue principale du document dans HTML. Exemple <html lang="fr">  </html> Attributs * attributs globaux ; * manifest : l'url d'un fichier contenant une liste de ressources à mettre en cache, typiquement pour le fonctionnement offline d'une application. ##Les métadonnées du document ###HEAD Il s'agit d'un ensemble de métadonnées pour le document (typiquement : TITLE et des éléments META et LINK). Il est unique et contient au moins l'élément TITLE. Attributs Attributs globaux. ###TITLE C'est le titre du document. Il est unique et ne correspond pas nécessairement au titre principal de la page. Il est enfant de l'élément HEAD. Quelques règles à retenir à propos de l'élément TITLE : * il doit être compréhensible et indépendant du contexte du site (par ex: dans un historique de navigation ou dans des résultats de recherche) ; * il doit être explicite, car il sera lu par les internautes dans les résultats des moteurs de recherche ; * il n'a pas de longueur maximale, mais il est conseillé de ne pas dépasser 64 caractères. Attributs Attributs globaux. ###BASE Il est unique, et contient : * soit l'attribut href (dont la valeur est une url, qui sert de base aux url relatives de la page) ; * soit l'attribut target (dont la valeur définit le contexte de navigation) ; * soit les deux. Il est enfant de l'élément HEAD. C'est une balise auto-fermante. **À noter :** l'attribut manifest de l'élément HTML n'est pas affecté par l'attribut href de BASE. Exemple <head> <title>Archives - Mon site</title> <base href="\url{http://example.com/archives/}" /> </head> <body> <h1>Liste des archives</h1> <ul> <li><a href="foo.html">foo</a></li> <li><a href="/2005/bar.html">bar</a></li> </ul> <body> Attributs * attributs globaux ; * href ; * target. ###LINK Il permet de lier un document à d'autres ressources. Il est typiquement enfant de l'élément HEAD. C'est une balise auto-fermante. Exemple <head> <title>Mon site</title> <link rel="icon" type="image/png" href="favicon.png" />  <link rel="alternate" hreflang="de" href="\url{http://example.com/de/}" />  <link rel="license nofollow" href="\url{http://creativecommons.org/licenses/by-sa/3.0/deed.fr}" />  </head> Attributs * attributs globaux ; * href : un hyperlien ; * rel : une ou plusieurs valeurs qui définissent la relation entre le présent document et la destination de l'hyperlien. Plusieurs valeurs peuvent utiliser le même hyperlien, mais l'élément LINK génèrera autant d'hyperlien que de valeurs ; * hreflang : la langue de la ressource de destination ; * type : le type de la ressource de destination ; * sizes : pour rel="icon". Il contient une ou plusieurs tailles d'icone en pixel CSS, séparées par des espaces, de forme largeurxhauteur ; * title : pour feuilles de style alternatives. Il contient un texte identifiant chaque feuille de style ; * media : le type de média pour lequel le document de destination a été conçu. Utilisé typiquement pour les requêtes média ; * crossorigin : pour l'usage de ressources externes et leurs comportements. ###META Il permet d'ajouter des métadonnées au document. Il est typiquement enfant de l'élément HEAD. C'est une balise auto-fermante. Attributs * attributs globaux ; * name : le nom de l'élément ; * http-equiv : contient des directives pragma, typiquement des informations qui peuvent être définies côté serveur ; * content : la valeur de l'élément ; * charset : la déclaration d'encodage des caractère. ###STYLE Il permet d'intégrer des informations de styles dans le document. Par défaut, ce sont des styles CSS. Il est typiquement enfant de l'élément HEAD. Attributs * attributs globaux ; * media : le type de média pour lequel le document de destination a été conçu. Utilisé typiquement pour les requêtes média ; * type : le type de ressource intégrée ; * scoped : attribut vide. Permet d'utiliser STYLE à l'intérieur de l'élément BODY. Les styles s'appliquent alors à l'élément parent de l'élément STYLE ; * title : pour feuilles de style alternatives. Il contient un texte identifiant chaque feuille de style. ##Les sections du document ###BODY C'est la racine des éléments de section. Il est unique et représente le contenu principal du document. Attributs Attributs globaux. ARIA Role * document : par défaut. * application : si le document est une application web ; ###ARTICLE Il représente une portion indépendante et réutilisable du document ou de l'application. Sur un blog par exemple, ARTICLE pourrait être utilisé pour chaque billet et chaque commentaire. Plusieurs éléments ARTICLE peuvent être imbriqués. Exemple <section> <h2>Commentaires<h2> <article class="comment"> <h3 id="comm1">John (<time>2014-12-25T00:01:14</time>)</h3> <p> Bonne année :D </p> </article> <article class="comment"> <h3 id="comm2">John (<time>2014-12-25T00:07:51</time>)</h3> <p> <a href="#comm1">@John<a> : que tu es drôle ¬\_¬ </p> </article> </section> Attributs Attributs globaux. ARIA Role * article : (par défaut) une section indépendante du document, de la page, ou du site ; * application : si c'est une application web (par exemple, un widget interactif) ; * document ; * main : si c'est le contenu principal du document. ###SECTION Il définit une section thématique du document ou de l'application (ex : les chapitres d'un texte, les onglets d'une boîte de dialogue…). Le thème de la section doit être identifiable, typiquement grâce à un titre (H1-H6). Remarque * plusieurs éléments SECTION peuvent être imbriqués ; * la balise SECTION n'a pas remplacé la balise DIV. Attributs Attributs globaux. ARIA Role * region : (par défaut) une zone largement perceptible du document, qui pourrait faire partie d'une table des matières dans ce document ; * alert : message important ou d'alerte général ; * alertdialog : message important ou d'alerte spécifique à un élément ; * status : message d'avertissement qui ne nécessite pas une alerte ; * application : si c'est une application web (par exemple, un widget interactif) ; * dialog : une interruption dans le déroulement de l'application et qui demande une action de l'utilisateur (boîte de dialogue) ; * log : une zone d'informations organisée logiquement, et où des informations obsolètes peuvent être supprimées ; * marquee : une zone d'informations facultatives qui peuvent changer fréquemment ; * presentation ; * document ; * main : si c'est le contenu principal du document ; * contentinfo : informations sur le document parent ; * search : une zone contenant des outils de recherche (typiquement un formulaire de recherche et/ou un sitemap). ###NAV Il s'agit d'une section avec des liens (typiquement sous la forme d'une liste) pour naviguer parmi les sections du site ou de la page. NAV n'est pas nécessaire pour tous les groupes de liens, typiquement les petites listes qu'on trouve dans les FOOTER (ex : lien vers la page d'accueil, vers les conditions d'utilisation et vers les informations de copyright). Exemple <header> La respiraton pour les nuls (nouvelle édition). <nav> <ol role="directory"> <li><a href="introduction.html">L'oxygène : une introduction</a></li> <li><a>Inspirer</a></li> <li><a href="expirer.html">Expirer</a></li> <li><a href="conclusion.html">Respirer : une bonne pratique au quotidien</a></li> </ol> </nav> </header> <main> <h1>Chapitre 2 : Inspirer.</h1>  </main> Remarque * l'ARIA role *directory* s'emploie typiquement dans ce genre de contexte pour déclarer une table des matières ; * NAV n'est pas obligatoirement dans un HEADER. Attributs Attributs globaux. ARIA Role * navigation : (par défaut) un ensemble d'éléments de navigation (habituellement des liens) pour naviguer dans le document ou des documents associés ; * presentation. ###ASIDE Il s'agit d'une section indirectement liée à du contenu, et qui peut en être séparé. Dans un texte, il peut s'agir d'un encadré ou d'une citation extraite du texte. Dans une page, il peut s'agir d'un fil social intégré, d'un groupe d'éléments NAV ou de publicités. **Exemple** <article> <h1>Hamlet, un entretien exclusif.</h1> <aside class="hook"><q>Être ou ne pas être.</q><aside>  <p>Moi : <q>Salut Hamlet !</q></p> <p>Hamlet : <q>Être ou ne pas être : là est la question.</q></p> <p>Moi : <q>Merci pour cet entretien !</q></p> </article>  <aside class="about"> <h2>À propos de moi</h2> Je suis journaliste. Suivez-moi sur <a>Twitter</a> ! </aside> Attributs Attributs globaux. ARIA Role * complementary : (par défaut) une section complémentaire au contenu principal, placée au même niveau dans la hiérarchie DOM, mais qui reste signfiante si elle est séparée de ce contenu ; * presentation ; * note : une section qui sert de parenthèse ou d'auxiliaire au contenu ; * search : une zone contenant des outils de recherche (typiquement un formulaire de recherche et/ou un sitemap). ###H1, H2, H3, H4, H5, H6 Ce sont les titres qui structurent le document, H1 étant le titre le plus élevé et H6 le moins élevé. Pour des raisons d'optimisation pour les moteurs de recherche, on a tendance à utiliser un seul H1, qui sert de titre à l'ensemble du document. Néanmoins, le niveau du H1 peut être interprété en fonction de son contexte, notamment grâce à un élément de section. **Remarque :** Les niveaux des titres relèvent de leur importance, pas de leur place dans le document. Par exemple, un titre H2 peut être précédé d'un titre H3. **Exemple** <h1>Curriculum Vitae</h1> <section> <h1>Présentation</h1> <p>Je m'appelle Camille.</p> <section> <h1>Me suivre en ligne</h1>  </section> </section> <section> <h1>Compétences</h1> <p>Je fais des pages Web.</p> </section> Est l'équivalent de : <h1>Curriculum Vitae</h1> <h2>Présentation</h2> <p>Je m'appelle Camille.</p> <h3>Me suivre en ligne</h3>  <h2>Compétences</h2> <p>Je fais des pages Web.</p> Ou aussi bien de : <h1>Curriculum Vitae</h1> <section> <h2>Présentation</h2> <p>Je m'appelle Camille.</p> <section> <h3>Me suivre en ligne</h3>  </section> </section> <section> <h2>Compétences</h2> <p>Je fais des pages Web.</p> </section> Attributs Attributs globaux. ARIA Role * heading : (par défaut) un titre de section ; * presentation ; * tab : une étiquette dans un mécanisme de sélection d'onglet. ###HEADER Cette section sert d'en-tête à son plus proche ancêtre. Elle peut contenir un titre de section, un chapo d'article, la bannière d'un site et/ou un contexte de navigation, etc. **Remarque :** l'élément HEADER n'est pas interprété comme une section dans l'*outline*. Dans l'exemple suivant, les paragraphes (P) sont au même niveau dans la hiérarchie DOM : <article> <header> <h2>Première sous-section</h2> <p>Contenu de la première sous-section.</p> <h2>Seconde sous-section</h2> <p>Contenu de la seconde sous-section…</p> </header> <p>Suite de la seconde sous-section.</p> </article> Attributs Attributs globaux. ARIA Role * banner : (par défaut) contenu destiné à l'ensemble du site plutôt qu'à une page en particulier ; * presentation. ###FOOTER Cette section sert de pied-de-page à son plus proche ancêtre. Elle contient typiquement des informations de copyright, des boutons de médias sociaux, et/ou des liens vers des documents relatifs au présent document. FOOTER peut contenir de longues sections représentant des appendices ou des index. L'élément FOOTER est habituellement mais pas obligatoirement placé à la fin d'une section. **Remarque :** l'élément FOOTER n'est pas interprété comme une section dans l'*outline*. Dans l'exemple suivant, les paragraphes (P) sont au même niveau dans la hiérarchie DOM : <body> <h2>Première sous-section</h2> <p>Contenu de la première sous-section…</p> <footer> <p>Suite de la première sous-section.</p> <h2>Seconde sous-section</h2> <p>Contenu de la seconde sous-section.</p> </footer> </body> Attributs Attributs globaux. ARIA Role * contentinfo : (par défaut) informations sur le document parent ; * presentation. ###ADDRESS Cet élément contient les informations de contact. Il peut s'agir d'adresses email, de liens vers un formulaire de contact ou vers des pages personnelles. *Il ne s'agit pas* d'adresse postale ou de numéro de téléphone. **Remarque :** * il est relatif au plus proche ancêtre ARTICLE ou BODY ; * il est typiquement intégré dans un élément FOOTER. Exemple <footer> <h2>Nous contacter</h2> <address><a href="\url{http://example.com/contact}">Sur notre site</a>, ou par email à : <a href="\url{mailto:contact@example.com}">contact@example.com</a> </address> <p>Par courrier à : Example Corp. 42000 Saint-Étienne</p> </footer> Attributs Attributs globaux. ARIA Role contentinfo ##Les éléments de regroupement ###P ### Il s'agit typiquement d'un paragraphe (au sens typographique), ou bien d'un regroupement thématique en général. **Remarque :** En HTML, le paragraphe n'est pas un concept logique (comme en typographie) mais un concept de structure. Ainsi, P n'est qu'une façon de marquer un paragraphe. De même, l'élément LI d'une liste est lui aussi interprété comme un paragraphe. Exemple 1 <article> <p>Hier, nous avons rencontré Hamlet. Voici ce qu'il nous a déclaré :</p> <blockquote> <p>Être ou ne pas être : là est la question.</p> </blockquote> <article> Exemple 2 <form action="script.php" method="post"> <p> <label for="name">Nom :</label> <input type="text" name="name" id="name" /> </p> <p> <label for="email">Email :</label> <input type="email" name="email" id="email" /> </p> <p> <input type="submit" value="Envoyer" /> <p> </form> Attributs Attributs globaux. ARIA Role N'importe quel rôle. --------------------------------------------------------------------------------- ##Balises et attributs HTML5 dépréciés ###HGROUP Élément qui regroupait un titre et son sous-titre. Alternative possible <header> <h1>Mon site</h1> <p class="subheading">Un site vraiment super.</p> </header> ###REL=SHORTCUT La valeur SHORTCUT de l'attribut REL servait à définir une icône de raccourci. Alternative Utiliser simplement la valeur ICON.