Introduction à HTML5

❮ Précédent Suivant ❯

HTML5 n’est pas seulement une autre version du langage HTML (Hypertext Markup Language), mais une nouvelle plate-forme ouverte (Web Applications 1.0), conçue pour créer des sites Web et des applications plus puissants prenant en charge le contenu multimédia, capables de fonctionner avec des interfaces de programmation, d’interagir avec des formulaires, des documents de structure, etc.

Les avantages de HTML5

Parmi les principaux avantages de HTML5, on doit noter que:

HTML5 prend en charge SVG, canvas et autres graphiques vectoriels virtuels sont pris en charge dans HTML5. Dans les versions antérieures, l'utilisation de graphiques vectoriels n'était possible qu'en combinaison avec des technologies telles que Flash, VML, etc.
Le code est devenu simple et plus accessible à la compréhension grâce à l'émergence de rôles sémantiques nouveaux et améliorés pour les éléments existants. Par exemple, la plupart des conteneurs div précédemment utilisés ont été remplacés par les éléments sémantiques section, article, nav et header, ce qui permet une meilleure structuration du contenu de la page.
Un support pour géolocalisation a apparu, ce qui permet de définir la location de l’utilisateur.
La possibilité de lire du contenu multimédia (audio, vidéo) a élargi, ce qui permet aux utilisateurs de lire des fichiers audio, vidéo ou d'animation directement dans le navigateur, sans installer d'applications spéciales (FlashPlayer), d'utilitaires ou de plug-ins.
Il existe un support pour le stockage local (localStorage), qui vous permet de stocker des données non seulement dans le cache du navigateur, mais également dans la base de données SQL. L'objet localStorage fait partie de l'espace de noms globaux et, lors de l'utilisation de scripts, est disponible de n'importe où.
En HTML5 la fonction d'application Web est prise en charge, ce qui signifie que les navigateurs peuvent servir de plate-forme pour les applications.

Modèles de contenu HTML5

En HTML5, le contenu d'une page peut être divisé en groupes sémantiques caractérisant le contenu d'une page Web. Ces groupes sont appelés modèles de contenu (content model). Chaque modèle décrit le type du contenu d’élément. Un élément peut appartenir à une ou plusieurs catégories.

En HTML5 les catégories de contenu suivantes :

Métadonnées (Meta Data)
Contenu en streaming (Flow)
Contenu sectionnel (Sectioning)
Contenu d'en-tête (Heading)
Contenu de texte (Phrasing)
Contenu intégré (Embedded)
Contenu interactif (Interactive)
Contenu explicite (Palpable)

Pour comprendre comment les modèles de contenu se trouvent sur une page Web et interagissent les uns avec les autres, nous donnons l'illustration suivante.

Comme vous pouvez le voir, dans certains endroits, les modèles de contenu se chevauchent, ce qui signifie que dans ce modèle, des éléments appartiennent simultanément à plusieurs catégories. Le contenu sectionnel, en-tête, texte, intégré, interactif, ainsi que certaines des métadonnées sont liés au contenu en streaming. Dans certains cas, les métadonnées et le contenu interactif peuvent être liés au contenu du texte. Le contenu intégré peut également être textuel en même temps, mais certains éléments peuvent être liés au contenu interactif.

Il convient également de noter que certains éléments sont utilisés à des fins spécifiques, par exemple pour déterminer les formulaires. Ces éléments ne concernent aucune de ces catégories.

Métadonnées

Les métadonnées incluent des éléments qui contiennent des informations supplémentaires sur le document HTML, le lient à d'autres documents (par exemple, des feuilles de style CSS), déterminent l'apparence ou le comportement du contenu de la page. La page n'affiche pas les métadonnées.

Les éléments de métadonnées sont: <base> , <link> , <meta>, <noscript>, <script>, <style>, <template> et <title>.

Contenu en streaming

Plusieurs éléments sont contenu en streaming et ils sont utilisés dans le corps du document (entre les balises <body></body>) ou les applications Web font référence au contenu en streaming.

<a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>, <bdi>, <bdo>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <details>, <dfn>, <dialog>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <main>, <map>, <mark>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <u>, <ul>, <var>, <video>, <wbr>.

Les éléments suivants sont également appelés flux, mais seulement si certaines conditions existent:

<area> seulement dans un élément <map>
<link> s'il y a un attribut itemprop
<meta> s'il y a un attribut itemprop
<style> s'il y a un attribut scoped

Contenu sectionnel

Le contenu de la section inclut des éléments qui créent des sections distinctes dans la structure du document, qui existent indépendamment l'une de l'autre, telles que l'en-tête (header), le pied de page (footer) etc. Notons également que chaque section distincte peut avoir son propre en-tête et sa propre table des matière (outline).

Les éléments de contenu sectionnel sont <article>, <aside>, <nav> et <section>.

Contenu d’en-tête

Le contenu d’en-tête contient des éléments qui déterminent les en-têtes des sections marquées avec des éléments de contenu sectionnel ou sont supposés basés sur le contenu de l'en-tête.

Les éléments du contenu de l'en-tête sont <h1>, <h2>, <h3>, <h4>, <h5>, <h6> et <hgroup>.

Contenu de text

Les éléments du contenu de text sont ceux, qui définissent le text et son format. Ce sont: <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small> <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video> et <wbr>.

Les éléments énumérés ci-dessous sont également appelés éléments de texte, sous réserve de certaines conditions :

<a>, si le contenu est seulement textuel
<area> seulement dans un élément <map>
<del>, s'il ne contient que du contenu textuel
<ins>, s'il ne contient que du contenu textuel
<link> s’il y a un attribut itemprop
<map>, s'il ne contient que du contenu textuel
<meta> s’il y a un attribut itemprop

Contenu intégré

Le contenu intégré et ce qui est importé dans le document HTML à partir d'autres ressources. Certains éléments peuvent contenir un contenu alternatif qui sera affiché si la ressource externe ne peut pas être utilisée (par exemple, si le navigateur ne prend pas en charge le format vidéo).

Le modèle intégré de contenu contient les éléments suivants: <audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <picture>, <svg>, <video>.

Contenu interactif

Les éléments interactifs sont considérés comme conçus pour interagir avec l'utilisateur. Ce modèle de contenu comprend des éléments <a> (s’il existe un attribut href), <button>, <details>, <embed>, <iframe>, <keygen>, <label>, <select> et <textarea>.

Les éléments suivants sont également appelés interactifs, sous réserve de certaines conditions:

<audio>, si l’attribut controls est indiqué
<img>, si l’attribut usemap est indiqué
<input>, si l’attribut type n’est pas masqué (hidden)
<menu>, si la valeur de l’attribut type est toolbar
<object>,si l’attribut usemap est indiqué
<video>, si l’attribut controls est indiqué

Contenu explicite

Les éléments des modèles de contenu permettent de contenir du contenu en streaming ou textuel, ils doivent avoir au moins un bloc enfant qui sera un contenu explicite et qui n'aura pas d'attribut hidden.

Cette exigence n'est pas obligatoire, il y a des cas où l'élément peut être vide. Par exemple, un élément peut être rempli avec du contenu d'un script tiers.

Catégories de contenu secondaires

Outre les principaux modèles de contenu, il existe également des catégories secondaires. Ce sont des éléments du support des scripts, <script> et <template>, qui servent à l'implémentation de scripts, soit en conservant directement le code du script, soit en spécifiant les données qui seront utilisées par les scripts. Les éléments du support des scripts sont : les éléments <blockquote>, <body>, <details>, <dialog>, <fieldset>, <figure> et <td> font référence à la partition racine. La catégorie du modèle de contenu transparent comprend les éléments <a>, <audio>, <canvas>, <del>, <ins>, <map>, <object> et <video>, qui héritent du type de contenu de l'élément parent. En plus de leur propre contenu, ils peuvent contenir du contenu valide dans leur élément parent.