Un modèle HTML5 de base pour tout projet –

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

nouvelles techniques à votre boîte à outils, vous allez probablement vouloir construire vous-même un modèle à partir duquel vous pouvez commencer tous vos projets basés sur HTML5. Nous encourageons cela, et vous pouvez également envisager d'utiliser l'une des nombreuses sources en ligne qui fournissent un point de départ HTML5 de base.

Dans cet article, nous allons voir comment démarrer avec cela. Commençons simple, avec une page HTML5 dénudée:

Avec ce modèle de base en place, examinons maintenant certaines parties importantes du balisage et comment celles-ci peuvent différer de la manière dont HTML a été écrit avant

The Doctype

Premièrement, nous avons la déclaration de type de document ou doctype . C'est simplement 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 spécifique et la version 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 de 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 fait mal (autre que forcer les utilisateurs à télécharger quelques octets supplémentaires), HTML5 a éliminé cette horreur indéchiffrable. Maintenant, tout ce dont vous avez besoin, c'est ceci:

Simple et précis. Le doctype peut être écrit en majuscule, en minuscule ou en casse mixte. Vous remarquerez que le "5" manque manifestement dans la déclaration. Bien que l’itération actuelle du balisage Web soit connue sous le nom de «HTML5», il ne s’agit que d’une évolution des standards HTML précédents – et les futures spécifications ne seront que le développement de ce que nous avons aujourd’hui. contenu existant sur le Web, il n'y a pas de confiance dans le type de document pour leur indiquer quelles fonctionnalités doivent être prises en charge dans un document donné. En d'autres termes, le doctype seul ne va pas rendre vos pages compatibles avec HTML5. C'est vraiment au navigateur de le faire. En fait, vous pouvez utiliser l'un de ces deux anciens types de code avec de nouveaux éléments HTML5 sur la page et la page sera rendue comme si vous utilisiez le nouveau type de document.

L'élément html [19659007] L’élément suivant html 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 XHTML, vous devez inclure un attribut xmlns . En HTML5, cela n'est plus nécessaire, et même l'attribut lang est inutile pour que le document se valide ou fonctionne correctement.

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

La tête élément

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

HTML5 s'améliore en réduisant au minimum le tag :

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 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 garantir que tous les navigateurs lisent le encodage de caractères correctement, la déclaration de codage de 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 ne diffère guère des syntaxes précédentes. Le titre de la page (le seul élément obligatoire dans la tête ) est déclaré comme il 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 de meta éléments valides ici que vous le souhaitez.

La feuille de style, incluse dans le lien habituel élément. Il n'y a pas d'attribut requis pour lien autre que href et rel . L'attribut de type (qui était commun dans les anciennes versions de HTML) n'est pas nécessaire, ni nécessaire d'indiquer le type de contenu de la feuille de style.

Mise à niveau de l'aire de jeu

introduit, il comprenait un certain nombre de nouveaux éléments, tels que article et section . Vous pensez peut-être que ce serait un problème majeur pour la prise en charge d'anciens navigateurs pour des éléments non reconnus, mais vous auriez tort. Cela est dû au fait que la majorité des navigateurs ne se soucient pas des balises que vous utilisez. Si vous aviez un document HTML avec une balise recette (ou même une balise ziggy ) et que votre CSS attachait certains styles à cet élément, presque tous les navigateurs allaient procéder comme si

Bien sûr, un tel document hypothétique ne pourrait pas être validé et pourrait avoir des problèmes d’accessibilité, mais il serait rendu correctement dans presque tous les navigateurs – à l’exception des anciennes versions d’Internet Explorer (IE ). Avant la version 9, Internet Explorer empêchait les éléments non reconnus de recevoir un style. Le moteur de rendu considérait ces éléments mystérieux 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 devaient encore être définis au moment du développement de ces versions de navigateur. Cela signifie (vous l'avez deviné) les nouveaux éléments HTML5.

La bonne nouvelle est que, de nos jours, l'utilisation d'Internet Explorer a chuté, IE11 étant tombé à environ 2,7% d'utilisation mondiale (à partir de 2018), et les versions avant cela, ayant pratiquement disparu de la carte. (Vous pouvez afficher les statistiques sur l'utilisation du navigateur et la prise en charge des fonctionnalités HTML5 dans heneral sur le site Puis-je utiliser le site .) Si vous devez vraiment prendre en charge d'anciens navigateurs, vous peut encore utiliser le fidèle HTML5 Shiv une pièce JavaScript très simple développée à l'origine par John Resig. Inspiré par une idée de Sjoerd Visscher, il a rendu les nouveaux éléments HTML5 plus stylés dans les anciennes versions d’IE. En réalité, cela ne devrait pas être nécessaire maintenant. Comme indiqué par Puis-je utiliser les éléments HTML5 sont pris en charge par tous les navigateurs modernes et même par leurs versions les plus récentes. (Cliquez sur l'option "Afficher tout" pour voir toutes les versions du navigateur.) La seule exception est que certains navigateurs ne reconnaissent pas l'élément le plus récent principal . Cependant, pour ces navigateurs, vous pouvez toujours utiliser cet élément, du moment que vous ajoutez un style apprenti (par exemple, en le définissant comme un élément de bloc).

Le reste est de l'histoire

nous avons l'élément habituel du corps avec sa balise de fermeture et la balise html qui ferme. Nous avons également une référence à un fichier JavaScript dans un élément script .

Tout comme la balise link évoquée plus haut, la balise

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

Nous avons placé l'élément script à l'écran. bas de notre page pour vous conformer aux meilleures pratiques d’intégration de JavaScript. Cela a à voir avec la vitesse de chargement de la page; Lorsqu'un navigateur rencontre un script, il interrompt le téléchargement et rend le reste de la page pendant qu'il analyse le script. Il en résulte que la page semble se charger beaucoup plus lentement lorsque des scripts volumineux 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'après le chargement du reste de la page.

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

Prochaines étapes

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

Le développement d'applications Web au niveau supérieur consiste à essayer l'un des frameworks 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 éditeur du contenu HTML / CSS sur SitePoint. Il blogue sur Impressive Webs et curates Web Tools Weekly un bulletin destiné aux développeurs front-end axés principalement sur les outils.