2. <à part>

4. Assemblez-les

5. Styles d'écriture pour les nouveaux éléments

6. Compatible avec les anciens navigateurs

7. Vous pouvez désormais utiliser HTML 5, mais l'utiliserez-vous ?

Qu'est-ce qui est différent avec HTML 5 ?

Tout d’abord, qu’exprimons-nous à travers HTML 5 ? Tout d'abord, qu'entendons-nous par HTML 5 ? En théorie, nous exprimons tout : de nouvelles balises de structure sémantique, telles que les spécifications de l'API de canevas ou de stockage hors ligne, et de nouvelles balises sémantiques en ligne. Cependant, nous limitons la raison réelle (PS : problèmes de prise en charge du navigateur) aux balises de structure uniquement. Les API de canevas, de stockage hors ligne, de vidéo locale ou de géolocalisation sont toutes excellentes, mais elles ne sont pas encore prises en charge de manière uniforme par tous les navigateurs.

"Mais attendez", dites-vous, "la plupart des navigateurs ne prennent pas non plus en charge les nouveaux éléments structurels !" C'est vrai, mais la grande majorité d'entre eux accepteront volontiers tout ce que vous voulez créer Label. Même IE6 peut gérer de nouveaux onglets, mais si vous souhaitez le styliser avec CSS, vous aurez besoin d'un peu d'aide de JavaScript.

Une chose dont vous devez vous rappeler lorsque vous stylisez de nouvelles balises est que les balises inconnues n'ont pas de style par défaut dans la plupart des navigateurs. Ils sont également considérés comme des éléments de niveau ligne. Néanmoins, étant donné que la plupart des nouvelles balises HTML 5 peuvent être construites, nous leur donnerons le comportement d'éléments de niveau bloc. La solution est de vous assurer d'inclure display:block; dans votre style CSS.

Pour vous aider à comprendre certaines des nouveautés du HTML 5 aujourd'hui, passons aux choses sérieuses maintenant et commençons à utiliser de nouveaux éléments structurels.

Enfin un type de document dont tout le monde peut se souvenir

La première chose que nous devons faire pour créer un document HTML 5 est d'utiliser le nouveau type de document. Maintenant, si vous vous souvenez clairement des types de documents HTML 4 ou XHTML 1.x, vous êtes un gars plus méchant que nous. Chaque fois que nous créons une nouvelle page, nous devons ouvrir un ancien fichier, couper et coller la définition du type de document.

C'est vraiment pénible, et c'est pourquoi nous aimons le nouveau type de document HTML 5 . Es-tu prêt? Il apparaît :

Ce ne sera pas trop difficile à retenir. Simple et facile à comprendre. Non sensible à la casse.

L'idée est d'arrêter le versioning HTML et de faciliter la rétrocompatibilité. Que cela réussisse à long terme est une autre affaire, mais au moins cela vous permet d'économiser le temps moyen de frappe.

La structure sémantique la plus basique

Nous avons défini notre page comme un document HTML 5. Jusqu'ici, tout va bien. Alors, de quoi s’agit-il exactement, ces nouveaux labels dont nous entendons parler ?

Avant de nous lancer dans de nouvelles balises, réfléchissez à la structure de votre page Web moyenne, quelque chose comme ceci :

C'est bien à des fins de présentation, mais que se passe-t-il si nous voulons savoir quelque chose sur ce que contient l'élément de page ?

Dans l'exemple ci-dessus, nous avons ajouté des identifiants à tous nos div structurels. Ceci est courant parmi les designers avertis. L'objectif est double : premièrement, l'ID fournit une ancre qui peut être utilisée pour appliquer des styles à des paragraphes particuliers de la page, et deuxièmement, l'ID agit comme une structure pseudo-sémantique de base. Un analyseur sophistiqué examinera l'attribut ID de la balise et tentera de deviner ce qu'il signifie, mais cela est difficile lorsque les noms d'ID sont différents pour chaque site.

C'est là qu'intervient la nouvelle balise de structure.

Reconnaissant que ces identifiants étaient devenus une convention, les créateurs de HTML 5 sont allés plus loin et ont fait de certains de ces éléments leurs propres balises. Voici un bref résumé des nouvelles balises entrant en vigueur dans HTML 5 :

La balise

head est conçue comme un conteneur d'informations d'introduction sur un chapitre ou une page Web entière. La balise

peut contenir n'importe quoi, depuis votre logo ou slogan typique en haut de la plupart des pages, jusqu'aux slogans et lignes d'ouverture qui introduisent un chapitre. Si vous utilisez toujours

dans votre page, vous pouvez utiliser

L’élément

nav est assez évident, c’est votre élément de navigation. Bien sûr, il y a un débat sur ce qui compte comme navigation. Il existe une navigation de base sur le site, mais dans certains cas, il peut également y avoir des éléments de navigation par page. Les créateurs de HTML5, WHATWG, ont récemment modifié l'explication de

pour montrer comment il peut être utilisé deux fois sur la même page.

Pour plus d'informations sur la navigation et le débat houleux sur HTML5, voir

L'article de Jeffrey Zeldman sur l'élément nav .

Si vous utilisez toujours la balise

pour contenir la navigation de votre page, vous pouvez utiliser la balise concise

La section est probablement la plus obscure des nouvelles balises. Selon la

définition HTML 5 , un chapitre est un ensemble thématique de contenu, généralement après la balise d'en-tête et avant la balise de pied de page. Toutefois, les sections peuvent être imbriquées les unes dans les autres si nécessaire.

Dans notre exemple ci-dessus, le div marqué « content » est un bon choix pour devenir une section. De plus, au sein de cette section, nous pouvons ajouter des sections en fonction du contenu.

Contrairement au commentaire de WHATWG, l'élément article peut contenir « un élément de contenu qui constitue une partie distincte d'un document ou d'un site ; par exemple, un magazine ou un article d'actualité, ou une entrée de blog

N'oubliez pas qu'une page peut avoir plusieurs balises d'article ; par exemple, une page d'accueil de blog peut contenir les dix derniers articles, chacun étant contenu dans une balise d'article. Les articles peuvent également être divisés en plusieurs paragraphes à l’aide de la balise section, mais vous devez être un peu prudent lors de la planification de votre structure, sinon vous pouvez facilement vous retrouver avec un vilain mélange de balises.

<à part>

Autre balise plutôt obscure, l'élément side est utilisé pour le contenu qui n'est "pas pertinent par rapport au contenu du corps principal qui constitue le document". Cela signifie un commentaire supplémentaire, des notes de bas de page en ligne, des citations, des annotations ou un contenu plus typique de la barre latérale comme celui que vous voyez sur le côté droit de cet article.

D'après les commentaires du WHATWG, il semble que

puisse être utilisé dans toutes ces situations, bien que les citations dans votre barre latérale soient très différentes du nuage de tags.

Personne n’a dit que HTML 5 était parfait !

L'utilité du pied de page devrait également être évidente, sauf peut-être que vous ne savez pas que vous pouvez avoir plusieurs pieds de page. En d’autres termes, en plus des indices principaux que l’on trouve généralement au bas de la plupart des pages, les paragraphes peuvent également contenir des indices.

Assemblez-les

Réécrivons notre exemple original en utilisant de nouvelles balises :

Très clair et facile à comprendre, n’est-ce pas ? Quelques remarques : nous pouvons inclure le titre

Mon article

dans la balise d'en-tête. Je ne l'ai pas fait car l'élément h1 transmet déjà la signification du titre, mais si vous avez également la date de publication, la signature ou d'autres données en haut de votre article, l'ajout d'une balise de conteneur d'en-tête au jeu de balises est une solution. bonne option.

Notez également que nous pouvons ajouter un deuxième élément de pied de page sous l'élément article pour inclure la navigation dans les pages, les articles connexes ou tout autre contenu.

Styles d'écriture pour les nouvelles balises

Dans la plupart des navigateurs, il vous suffit de définir vos styles comme vous le feriez normalement pour appliquer une feuille de style sur un nouvel onglet. Mais assurez-vous d'ajouter la règle display:block; à chaque élément, quoi qu'il arrive, à partir de maintenant. Au fil du temps, à mesure que les navigateurs commenceront à standardiser et à prendre en charge de nouveaux éléments, cela ne sera plus nécessaire.

Par exemple, appliquons quelques styles à notre en-tête :

N'oubliez pas que vous pouvez toujours ajouter des attributs de classe et d'ID à ces balises. Ainsi, si vous souhaitez styliser une navigation séparément, vous pouvez facilement ajouter une classe ou un style à la balise, comme ceci :

Ensuite, vous pouvez appliquer un style :

Compatible avec les anciens navigateurs

Mais attendez, qu'en est-il d'IE ? Ces styles ne fonctionnent pas du tout sous IE6. Si vous devez toujours prendre en charge les navigateurs existants comme IE6, voici une solution. IE6 analyse et affiche correctement ces balises, mais vous ne pouvez définir aucun CSS dessus. La solution est d'utiliser un peu de JavaScript.

Nous devons simplement demander à IE de styliser la balise HTML 5 que nous avons créée à l'aide de la méthode createElement. Ajoutez ceci dans la balise head de votre fichier HTML 5. Alternativement, vous pouvez l'enregistrer dans un fichier spécifique et l'inclure de cette façon.

Je sais ce que vous pensez : "Frère, vous n'avez pas du tout défini de type MIME pour cette balise de script

Vous n’avez pas du tout besoin de faire ces choses en HTML 5. En HTML 5, tous les scripts sont supposés être type="text/javascript", il n'est donc pas nécessaire d'encombrer vos balises de script avec des attributs (sauf si votre script n'est pas JavaScript).

Cela résout le problème avec IE, mais nous ne sommes pas sortis du bois. Il s'avère qu'il existe un bug dans le moteur de rendu Gecko qui bloque certaines versions de Firefox 2 et Camino sur ces onglets.

Il existe deux manières de gérer ce bug, dont aucune n’est idéale. Pour plus de détails, veuillez consulter cet article de HTML5doctor. Cet article est également livré avec un script pratique qui active tous les éléments HTML 5.

Gardez à l'esprit que même si l'utilisation de Firefox 2 est rapidement tombée en dessous de 10 % de tout le trafic du site, le simple fait d'ignorer ce bug peut toujours dépendre des visiteurs de votre site.

Vous pouvez désormais utiliser HTML 5, mais l'utiliserez-vous ?

La réponse courte est : nous le faisons.

Le plus compliqué c'est : cela dépend des sites. Si vous êtes accusé d'avoir refait la page d'accueil de CNN, eh bien, vous pourriez résister un peu jusqu'à ce que la prise en charge du navigateur s'améliore. Mais si vous souhaitez réorganiser votre blog, nous sommes à vos côtés. Voici quelques plugins WordPress qui peuvent vous aider si vous utilisez un système de publication aussi populaire. Voici un thème HTML 5 créé par Jeff Starr.

Essayez également la Galerie HTML 5 axée sur le site et consultez le code source pour voir ce qu'ils ont fait.

Néanmoins, si les lacunes d’IE vous arrêtent, considérez ceci : même Google utilise le type de document HTML 5 sur sa page de recherche principale. Même si vous n'utilisez pas toutes les nouvelles balises structurelles, vous pouvez au moins profiter de déclarations de script concises et de certaines balises sémantiques non structurelles que nous aborderons la prochaine fois.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Compétences du didacticiel Analysis_html5 sur les règles d'analyse HTML5Article suivant：Compétences du didacticiel Analysis_html5 sur les règles d'analyse HTML5

Articles Liés

Voir plus

Tutoriel sur la création de pages Web avec les compétences du didacticiel HTML5.0_html5

Contenu