Un modèle HTML5 de base pour tout projet –

Cet article, mis à jour en 2020, était à l'origine basé sur un chapitre de HTML5 et CSS3 pour le monde réel par Alexis Goldstein, Louis Lazaris et Estelle Weyl.

À mesure que vous apprenez HTML5 et ajoutez de nouvelles techniques à votre boîte à outils, vous voudrez probablement vous construire un passe-partout à partir duquel vous pourrez commencer tous vos projets HTML5. Nous vous encourageons à le faire et vous pouvez également envisager d'utiliser l'une des nombreuses sources en ligne qui vous fournissent un point de départ HTML5 de base.

Dans cet article, nous allons voir comment commencer avec cela. Commençons simplement, avec une page HTML5 simple:

Avec ce modèle de base en place, examinons maintenant certaines des parties importantes du balisage et comment elles peuvent différer de la façon dont le HTML a été écrit auparavant vers HTML5.

Qu'est-ce que HTML5?

• HTML5 est la spécification active actuelle pour HTML, ou Hypertext Markup Language.
• HTML forme la couche de contenu du Web, offrant un moyen de structurer les informations d'une manière qui peut être rendu par les navigateurs et traité par les robots des moteurs de recherche.
• HTML5 a été initialement publié en 2008 et a depuis ajouté des fonctionnalités supplémentaires. Il améliore les versions antérieures en activant le contenu multimédia natif, la prise en charge des graphiques vectoriels SVG et MathML et de nouveaux éléments de document sémantique.
• Le HTML est utile en soi, mais une grande partie de sa puissance est déverrouillée par les autres couches du Web. CSS est la couche de style qui détermine la façon dont ce contenu est affiché. JavaScript est la couche de comportement qui permet l'interaction de l'utilisateur et la manipulation dynamique des données.

Le Doctype

Tout d'abord, nous avons la déclaration de type de document, ou doctype . Il s'agit simplement d'un moyen de dire au navigateur – ou à tout autre analyseur – quel type de document il regarde. Dans le cas des fichiers HTML, cela signifie la version et la saveur spécifiques du HTML. Le doctype doit toujours être le premier élément en haut de tout fichier HTML. Il y a de nombreuses années, la déclaration doctype était un gâchis laid et difficile à retenir. Pour XHTML 1.0 Strict:

Et pour HTML4 Transitional:

Bien que cette longue chaîne de texte en haut de nos documents ne nous ait pas vraiment blessés (à part forcer les utilisateurs de nos sites à télécharger quelques octets supplémentaires), HTML5 a supprimé cette horreur indéchiffrable. Maintenant, tout ce dont vous avez besoin est le suivant:

Simple et précis. Le doctype peut être écrit en majuscules, en minuscules ou en majuscules. Vous remarquerez que le «5» est clairement absent de la déclaration. Bien que l'itération actuelle du balisage Web soit connue sous le nom de «HTML5», il ne s'agit en réalité que d'une évolution des normes HTML précédentes – et les futures spécifications ne seront qu'un développement de ce que nous avons aujourd'hui.

Parce que les navigateurs sont généralement requis pour prendre en charge tous contenu existant sur le Web, il n'y a aucune dépendance sur le doctype pour leur dire quelles fonctionnalités doivent être prises en charge dans un document donné. En d'autres termes, le doctype seul ne rendra pas vos pages conformes à HTML5. C'est vraiment au navigateur de le faire. En fait, vous pouvez utiliser l'un de ces deux doctypes plus anciens avec de nouveaux éléments HTML5 sur la page et la page restituera la même chose que si vous utilisiez le nouveau doctype.

L'élément html [19659012] Ensuite dans tout document HTML se trouve l'élément html qui n'a pas beaucoup changé avec HTML5. Dans notre exemple, nous avons inclus l'attribut lang avec une valeur de en qui spécifie que le document est en anglais. Dans la syntaxe basée sur XHTML, vous devrez inclure un attribut xmlns . En HTML5, cela n'est plus nécessaire, et même l'attribut lang n'est pas nécessaire pour que le document soit validé ou fonctionne correctement.

Voici donc ce que nous avons jusqu'à présent, y compris la balise de fermeture :

L'élément head

La partie suivante de notre page est la section . La première ligne à l'intérieur de la tête est celle qui définit le codage des caractères pour le document. Il s'agit d'un autre élément simplifié depuis XHTML et HTML4. Il s'agit d'une fonctionnalité facultative, mais recommandée. Dans le passé, vous l'avez peut-être écrit comme ceci:

HTML5 améliore cela en réduisant la balise de codage des caractères au strict minimum:

Dans presque tous les cas, utf-8 est la valeur que vous utiliserez dans vos documents. Une explication complète de l'encodage des caractères dépasse le cadre de cet article, et cela ne vous intéressera probablement pas non plus. Néanmoins, si vous voulez approfondir un peu, vous pouvez lire le sujet sur W3C ou WHATWG .

Remarque: pour vous assurer que tous les navigateurs lisent le le codage des caractères correctement, la déclaration de codage des caractères entière doit être incluse quelque part dans les 512 premiers caractères de votre document. Il devrait également apparaître avant tout élément basé sur le contenu (comme l'élément

Dans ces lignes, HTML5 diffère à peine des syntaxes précédentes. Le titre de la page (le seul élément obligatoire à l'intérieur de la tête ) est déclaré comme il l'a toujours été, et les balises META que nous avons incluses ne sont que des exemples facultatifs pour indiquer où elles seront placées; vous pouvez mettre autant d'éléments méta valides ici que vous le souhaitez.

L'élément clé de ce morceau de balisage est la feuille de style, qui est incluse à l'aide du lien habituel élément. Aucun attribut n'est requis pour link autre que href et rel . L'attribut de type (qui était courant dans les anciennes versions de HTML) n'est pas nécessaire, ni n'a jamais été nécessaire pour indiquer le type de contenu de la feuille de style.

Niveler le terrain de jeu

Lorsque HTML5 était introduit, il comprenait un certain nombre de nouveaux éléments, tels que l'article et la section . Vous pourriez penser que ce serait un problème majeur pour les anciens navigateurs prenant en charge les éléments non reconnus, mais vous vous trompez. En effet, la majorité des navigateurs ne se soucient pas réellement des balises que vous utilisez. Si vous aviez un document HTML contenant une balise de recette (ou même une balise ziggy ) et que votre CSS attachait des styles à cet élément, presque tous les navigateurs procéderaient comme si ce étaient tout à fait normaux, appliquant votre style sans se plaindre.

Bien sûr, un tel document hypothétique ne pourrait pas être validé et pourrait avoir des problèmes d'accessibilité, mais il s'afficherait correctement dans presque tous les navigateurs – à l'exception des anciennes versions d'Internet Explorer (IE ). Avant la version 9, IE empêchait les éléments non reconnus de recevoir un style. Ces éléments mystères ont été vus par le moteur de rendu comme des «éléments inconnus», vous n'avez donc pas pu modifier leur apparence ou leur comportement. Cela inclut non seulement nos éléments imaginés, mais également tous les éléments qui n'avaient pas encore été définis au moment où ces versions de navigateur ont été développées. Cela signifie (vous l'avez deviné) les nouveaux éléments HTML5.

La bonne nouvelle est que, de nos jours, l'utilisation d'IE a chuté, IE11 étant tombé à environ 2,7% d'utilisation mondiale (en 2018), et les versions avant cela, ayant pratiquement disparu de la carte. (Vous pouvez afficher des statistiques sur l'utilisation du navigateur et la prise en charge des fonctionnalités HTML5 en général sur le site Puis-je utiliser .)

Si vous avez vraiment besoin de prendre en charge les anciens navigateurs, cependant, vous peut toujours utiliser le fidèle HTML5 Shiv un morceau très simple de JavaScript développé à l'origine par John Resig. Inspiré d'une idée de Sjoerd Visscher, il a rendu les nouveaux éléments HTML5 stylables dans les anciennes versions d'IE. Vraiment, cependant, cela ne devrait pas être nécessaire maintenant. Comme indiqué par Puis-je utiliser les éléments HTML5 sont pris en charge sur tous les navigateurs modernes et même sur leurs anciennes versions les plus récentes. (Cliquez sur l'option «Afficher tout» pour voir toutes les versions de navigateur.) La seule exception est que certains navigateurs ne reconnaissent pas le nouvel élément principal principal . Cependant, pour ces navigateurs, vous pouvez toujours utiliser cet élément, tant que vous ajoutez un style approprié (par exemple, en le définissant comme un élément de bloc.)

The Rest is History

En regardant le reste de notre modèle de départ, nous avons l'élément habituel body avec sa balise de fermeture et la balise de fermeture html . Nous avons également une référence à un fichier JavaScript à l'intérieur d'un élément de script .

Tout comme la balise link décrite précédemment, la balise

Puisque JavaScript est, à toutes fins pratiques, le seul véritable langage de script utilisé sur le Web, et puisque tous les navigateurs que vous utilisez JavaScript même lorsque vous ne déclarez pas explicitement ce fait, l'attribut type n'est pas nécessaire dans les documents HTML5:

Nous avons placé l'élément de script dans l'élément en bas de notre page pour se conformer aux meilleures pratiques d'intégration de JavaScript. Cela a à voir avec la vitesse de chargement des pages; lorsqu'un navigateur rencontre un script, il interrompt le téléchargement et le rendu du reste de la page pendant qu'il analyse le script. Il en résulte que la page semble se charger beaucoup plus lentement lorsque de gros scripts sont inclus en haut de la page avant tout contenu. C'est pourquoi la plupart des scripts doivent être placés tout en bas de la page, afin qu'ils ne soient analysés qu'une fois le reste de la page chargé.

Dans certains cas, cependant (comme avec le shiv HTML5), le le script peut avoir besoin que soit placé dans la tête de votre document, car vous voulez qu'il prenne effet avant que le navigateur ne commence à rendre la page.

Étapes suivantes

Une façon d'amener votre HTML5 vers le le niveau suivant consiste à essayer la Boilerplate HTML5 . Cette ressource régulièrement mise à jour fournit un point de départ pratique pour vos projets, contenant toutes les dernières meilleures pratiques établies par des centaines des meilleurs programmeurs du monde. Cela vaut la peine de le télécharger et de le vérifier même si vous voulez simplement parcourir le code et voir comment certains éléments sont utilisés de nos jours, tels que les divers méta-éléments trouvés dans la tête du document.

Commencez à vous familiariser avec la main- codé HTML5 et CSS3 avec notre ressource, HTML5 & CSS3 pour le monde réel . Vous apprendrez tout, des bases du balisage HTML sémantique aux techniques de style attrayantes.

Une autre façon de faire passer le développement de votre site Web ou de votre application Web au niveau supérieur consiste à essayer l'un des cadres modernes largement utilisés aujourd'hui. Par exemple, consultez les ressources étendues de SitePoint sur React et Angular .

Louis est impliqué dans l'industrie du développement Web depuis 2000, et est un co- éditeur du contenu HTML / CSS sur SitePoint. Il blogue sur Impressive Webs et organise Web Tools Weekly un bulletin d'information destiné aux développeurs frontaux qui se concentre principalement sur les outils.