Introduction à HTML5
HTML5 n’est pas seulement une nouvelle version de HTML enrichie de nouveaux éléments et attributs, mais aussi un ensemble de technologies permettant de créer des sites web et des applications plus puissants et plus variés, prenant en charge le multimédia et l’interaction avec des interfaces logicielles, etc.
Avantages de HTML5
Les principaux avantages de HTML5 sont listés ci-dessous :
- HTML5 est pris en charge par tous les navigateurs modernes.
- HTML5 est plus adapté aux appareils. Il est facile à utiliser.
- HTML5 peut aider à créer des sites web attrayants avec CSS, JavaScript, etc.
- HTML5 prend en charge SVG (Scalable Vector Graphics - Wikipedia) et d’autres graphiques vectoriels. Dans les versions antérieures, l’utilisation des graphiques vectoriels n’était possible qu’en combinaison avec des technologies telles que Flash, VML, etc.
- Le code devient plus propre principalement grâce au remplacement des balises div par des éléments sémantiques, qui aident à mieux structurer le contenu de la page web et à améliorer la lisibilité.
- HTML5 prend en charge la géolocalisation, ce qui permet de déterminer la localisation des utilisateurs.
- Les nouvelles normes ont été définies pour lire du multimédia (animation, audio, vidéo) directement dans le navigateur sans avoir à installer de plug-ins supplémentaires.
- La prise en charge du stockage web introduite dans HTML5 permet de stocker localement de grandes quantités de données d’application, sans affecter les performances de votre application web. Les données du stockage local persistent même lorsque le navigateur de l’utilisateur est fermé puis rouvert.
Inconvénients de HTML5 :
- Il n’est pas pris en charge par les anciens navigateurs.
Modèles de contenu HTML5
En HTML5, le contenu d’une page web peut être divisé en groupes sémantiques, qui décrivent son contenu. Ces groupes sont appelés modèles de contenu. Chacun de ces modèles décrit le type d’éléments qu’il contient. Le modèle de contenu peut contenir du texte et des éléments enfants. L’élément peut appartenir à une ou plusieurs catégories de contenu.
Les modèles de contenu HTML5 sont listés ci-dessous :
- Contenu de métadonnées
- Contenu de flux
- Contenu de sectionnement
- Contenu de titres
- Contenu phrastique
- Contenu intégré
- Contenu interactif
- Contenu palpable
Les modèles de contenu peuvent se chevaucher, ce qui signifie que les éléments appartiennent à plusieurs catégories en même temps. Par exemple, le contenu de sectionnement, de titres, phrastique, intégré, interactif et une partie du contenu de métadonnées se rapportent au contenu de flux. Le contenu de métadonnées et le contenu interactif peuvent, dans certains cas, se rapporter au contenu phrastique.
Il existe aussi des éléments utilisés à des fins spécifiques, par exemple pour définir des formulaires. Ce type d’éléments ne se rapporte à aucun des modèles de contenu mentionnés ci-dessus.
Contenu de métadonnées
Les éléments appartenant à la catégorie de contenu de métadonnées contiennent des informations sur les documents HTML, établissent des liens vers d’autres ressources, définissent leur présentation ou leur comportement. Ces éléments ne sont pas affichés sur la page web.
Les éléments de cette catégorie incluent : <base>, <link>, <meta>, <noscript>, <script>, <style>, <template> et <title>.
Exemple d’éléments appartenant au contenu de métadonnées :
Exemple d’éléments appartenant au contenu de métadonnées :
<head>
<title>Title of the document</title>
<meta charset="UTF-8">
<style>
* {
color: #1c87c9;
}
</style>
</head>Contenu de flux
Les éléments appartenant à la catégorie de contenu de flux sont généralement ceux utilisés dans le corps d’un document HTML (encadré par les balises <body>).
Les éléments de cette catégorie incluent : <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>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <u>, <ul>, <var>, <video>, <wbr>.
Exemple d’éléments appartenant au contenu de flux :
Exemple d’éléments appartenant à la catégorie de contenu de flux
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p><abbr title="Universal Resource Locator">URL</abbr> - This is a special form of designating an individual resource address on the Internet </p>
<hr/>
<div>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<hr/>
<ol type="A">
<li>Coca-Cola</li>
<li>Ice Tea</li>
<li>Fanta</li>
</ol>
</div>
</body>
</html>Les éléments suivants appartiennent au contenu de flux, mais seulement si une condition spécifique est remplie :
<area>, uniquement à l’intérieur de<map>,<link>, uniquement si l’attribut itemprop est spécifié,<meta>, uniquement si l’attribut itemprop est spécifié,<style>, uniquement si l’attribut scoped est spécifié.
Contenu de sectionnement
Les éléments appartenant au contenu de sectionnement sont ceux qui créent des sections indépendantes dans la structure d’un document HTML (par exemple, header, footer, etc.). Notez que chaque section peut avoir son propre titre et son propre plan.
Les éléments du modèle de contenu de sectionnement sont : <article>, <aside>, <nav> et <section>.
Exemple d’éléments appartenant au contenu de sectionnement :
Exemple d’éléments appartenant au contenu de sectionnement :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<section>
<h1>Article about flower</h1>
<article>
<h2>Roses</h2>
<p>Rose – the queen of flowers - is the object of worship and ardent love. Since time immemorial, the rose has been the object of worship and admiration.</p>
</article>
</section>
</body>
</html>Contenu de titres
Les éléments appartenant au modèle de contenu de sectionnement créent une section dans le plan courant qui définit la portée des éléments <header>, des éléments <footer> et du contenu de titres.
Les éléments du contenu de titres sont : <h1>, <h2>, <h3>, <h4>, <h5>, <h6> et <hgroup>.
Exemple d’éléments appartenant au contenu de titres :
Exemple d’éléments appartenant au contenu de titres :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<hgroup>
<h1>Welcome to W3Docs</h1>
<h2>Here you can learn HTML Bases.</h2>
<h3>Some text or subtitle.</h3>
</hgroup>
</body>
</html>Contenu phrastique
Les éléments appartenant au contenu phrastique définissent et balisent le texte. Il s’agit de <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <label>, <mark>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video> et <wbr>.
Exemple d’éléments appartenant au contenu phrastique :
Exemple d’éléments appartenant au contenu phrastique :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Example with HTML tags</h1>
<p>
Here is some text <sub> with the sup tag</sub>.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis ...</p>
<p>Reference site about Lorem Ipsum,<sup> giving information on its origins</sup>, as well as a random Lipsum generator.</p>
<p>Learn HyperText markup language (HTML) on <mark>W3Docs.com</mark> website.</p>
<p>We’ve used <strong> tag to highlight <strong> this important part of the text</strong>.</p>
<p>The important part of the text is highlighted by the <em> in italic</em>.</p>
</body>
</html>Les éléments suivants appartiennent au contenu phrastique, mais seulement si une condition spécifique est remplie :
<a>, s’il contient uniquement du contenu phrastique,<area>uniquement à l’intérieur de l’élément<map>,<del>, s’il contient uniquement du contenu phrastique,<ins>, s’il contient uniquement du contenu phrastique,<link>si l’attribut itemprop est spécifié,<map>, s’il contient uniquement du contenu phrastique,<meta>si l’attribut itemprop est spécifié.
Contenu intégré
Le contenu intégré importe une autre ressource ou insère du contenu provenant d’un autre langage de balisage ou d’un autre espace de noms dans le document. Ce modèle de contenu inclut les éléments suivants : <audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <picture>, <svg>, et <video>.
Exemples d’éléments appartenant au contenu intégré :
Exemples d’éléments appartenant au contenu intégré
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Examples of the HTML elements:</h1>
<h2>Example of the HTML<canvas> tag:</h2>
<canvas id="canvasExample" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('canvasExample');
var context = canvas.getContext('2d');
context.font = '30pt Calibri';
context.fillStyle = '#1c87c9';
context.fillText('Canvas Example !', 50, 100);
</script>
<h2>Example of the HTML<img> tag:</h2>
<img src="https://www.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
<h2>Example of the HTML<svg> tag:</h2>
<svg width="350" height="150">
<ellipse cx="100" cy="50" rx="100" ry="50" fill="#32ff00" />
</svg>
<br />
</body>
</html>Contenu interactif
Le modèle de contenu interactif inclut des éléments spécialement conçus pour l’interaction avec l’utilisateur. Il s’agit de <a> (si l’attribut href est spécifié), <button>, <details>, <embed>, <iframe>, <label>, <select> et <textarea>.
Exemple d’éléments appartenant au contenu interactif :
Exemple de contenu interactif :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Example of Interactive content</h1>
<form>
<select>
<option value="books">Books</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="php">PHP</option>
<option value="js">JavaScript</option>
</select>
<br /><br />
<textarea name="comment" rows="12" cols="35">Send your comments to the author.</textarea>
<br />
<button type="button">Send</button>
</form>
</body>
</html>Les éléments suivants appartiennent au modèle de contenu interactif, mais seulement si une condition spécifique est remplie :
<audio>, si l’attribut controls est spécifié,<img>, si l’attribut usemap est spécifié,<input>, si l’attribut type n’est pas hidden,<menu>, si la valeur de l’attribut type est « toolbar »,<object>, si l’attribut usemap est spécifié,<video>, si l’attribut controls est spécifié.
Contenu palpable
Le contenu est palpable lorsqu’il n’est ni vide ni masqué ; c’est le contenu qui est rendu et qui est substantiel. Les éléments dont le modèle est le contenu de flux ou le contenu phrastique doivent comporter au moins un nœud palpable, et ce nœud ne doit pas avoir d’attribut hidden.
Ce n’est pas une condition obligatoire ; il existe des cas où l’élément peut être vide. Par exemple, il peut être rempli après l’exécution d’un script externe.
Les catégories de contenu secondaires
Les catégories de contenu secondaires sont celles qui prennent en charge les scripts. Les éléments prenant en charge les scripts ne contribuent pas directement au rendu d’un document, mais prennent en charge les scripts, soit en contenant ou en spécifiant directement du code de script, soit en spécifiant des données qui seront utilisées par des scripts. Les éléments prenant en charge les scripts sont <script> et <template>. Les éléments <blockquote>, <body>, <details>, <dialog>, <fieldset>, <figure> et <td> sont appelés racines de sectionnement. Les éléments appartenant au modèle de contenu transparent sont <a>, <audio>, <canvas>, <del>, <ins>, <map>, <object> et <video>. Ces éléments héritent du type de l’élément parent et peuvent contenir le contenu autorisé dans leur élément parent.
Pratique
What are some of the new elements introduced in HTML5?