Quoi de neuf dans HTML5 ? 9 éléments que vous devez savoir
HTML5 est la dernière et la meilleure version du langage de balisage le plus largement utilisé sur le Web. Il y a de grands changements par rapport à la dernière version du langage, et si vous ne les utilisez pas, vous manquez des fonctionnalités vraiment intéressantes.
Nous n'avons pas la place pour couvrir tous les nouveaux éléments de la cinquième version de HTML, mais ces neuf sont parmi les plus importants. Pour plus d'informations sur les nouveaux éléments et API dans HTML5, assurez-vous de consulter W3Schools.
Une introduction aux éléments sémantiques
Comme une grande partie d'Internet, HTML5 s'est concentré sur la sémantique. Désormais, au lieu que les balises soient simplement utilisées pour la mise en forme, elles sont également utilisées pour indiquer aux navigateurs et aux moteurs de recherche la signification de ce qu'elles entourent.
Par exemple,
indique simplement à un navigateur qu'il contient un paragraphe. , dont nous parlerons dans un instant, indique à un navigateur qu'il contient le contenu principal de la page.
Le Web sémantique est encore en développement, et nous avons seulement commencé à effleurer la surface de ce qu'il peut faire. HTML5 contribue à apporter le balisage sémantique à une plus grande partie d'Internet, et cela ne peut qu'être bon pour l'avenir du traitement sémantique.
1.
La balise définit "un contenu indépendant et autonome". L'exemple le plus simple est, bien sûr, un article. Pour cet article particulier, nous ouvririons la balise avant l'introduction et la fermerions après la conclusion.
Tout le texte de votre section autonome.
Mais il existe également d'autres façons de l'utiliser. Par exemple, de nombreux blogs de cuisine incluent des histoires personnelles sur la façon dont une recette est née ou pourquoi elle est importante pour l'auteur. Il est ensuite suivi de la recette elle-même. Vous pourriez faire valoir que chacun de ces éléments pourrait être autonome.
Dans un forum, chaque message ou fil de discussion peut être considéré comme autonome et chacun peut être marqué avec sa propre balise . Pour la plupart, il sera utilisé sur le contenu principal d'une page. Mais gardez à l'esprit que vous pouvez également l'utiliser de manière plus créative.
2.
Étroitement lié à est . Cela définit un "regroupement thématique de contenu, généralement avec un titre". Donc sera à l'intérieur de ... n'est-ce pas ?
Pas nécessairement. W3 précise que cela dépend de la structure de votre site. Vous pouvez avoir un contenu autonome dans différentes sections de votre page (pensez à la page d'accueil d'un site d'actualités, par exemple). Vous pourriez alors avoir des sections dans cet article.
Pourquoi avez-vous besoin d'un DAC
Tout sonne mieux.
Comment configurer un DAC
Voici ce que vous devez faire . . .
Vous pouvez même avoir des sections dans les sections si cela correspond à votre page. N'oubliez pas qu'une section est simplement un "regroupement thématique de contenu" et que vous trouverez de nombreux endroits pour l'utiliser.
3.
Cet élément "devrait être utilisé comme conteneur pour le contenu d'introduction". En bref, c'est la partie de votre page qui aide les internautes à comprendre ce qu'ils s'apprêtent à lire.
Mais ne vous y trompez pas, vous pouvez utiliser ce conteneur plus d'une fois. Par exemple, vous pouvez l'utiliser pour identifier le titre de la page et le paragraphe d'introduction de votre article de blog. Mais vous pouvez également l'utiliser pour marquer le contenu d'introduction de chaque section.
Tout ce que vous devez savoir sur les DAC
Voici une introduction utile aux DAC...
Le reste de votre article va ici.
Les sections d'en-tête contiennent généralement au moins une balise d'en-tête -- H1, H2, etc. Ils ne sont pas obligés de le faire, mais en général, si vous utilisez une balise d'en-tête, il y a fort à parier que vous incluez le contenu de l'en-tête.
4.
W3 indique que les balises de pied de page contiennent généralement "l'auteur du document, les informations de copyright, les liens vers les conditions d'utilisation, les informations de contact, etc." Vous pouvez considérer cela comme des trucs "d'entretien ménager".
La documentation indique également que vous pouvez avoir plusieurs sections de pied de page sur votre page. C'est probablement une bonne idée, cependant, de conserver toutes ces informations au même endroit.
5.
Cette balise contient les liens de navigation pour une page donnée. Notez que seule la section de navigation reçoit cette balise, pas tous les liens de votre page. C'est pour les barres de navigation et les outils similaires.
C'est une balise très simple - c'est tout ce qu'il y a à faire. Utilisez-le pour définir la section de navigation et ne l'utilisez plus sur votre page.
6. <à part>
L'un des nouveaux éléments les plus intéressants de HTML5 est l'aparté. W3 lui donne la définition quelque peu inutile de "un contenu en dehors du contenu dans lequel il est placé".
En bref, un aparté est tout ce qui est lié (mais séparé) aux informations environnantes. Il peut s'agir d'une barre latérale qui ajoute des détails à votre contenu. Lorsqu'il est utilisé dans un ensemble de balises , il fournit des informations supplémentaires qui ne sont pas nécessaires à la compréhension du contenu principal.
Par exemple, si nous avions inclus dans cet article un encadré donnant des informations sur l'histoire de HTML5, ce serait un aparté.
Mais la balise
L'article principal va ici.
L'article continue ici.
Parce qu'il y a plusieurs utilisations pour cette balise, cela peut prêter à confusion. Si vous gardez à l'esprit qu'il s'agit de "contenu secondaire" et qu'il n'est pas toujours nécessaire qu'il s'agisse d'une barre latérale, vous aurez une meilleure idée de la façon de l'utiliser.
7.
De nombreux sites Web contiennent des informations qui doivent être affichées, mais pas de manière visible. Il s'agit peut-être des informations de copyright d'une photo. Ou les petits caractères d'un concours. Ce type d'informations est exactement ce à quoi sert la balise de détails.
Lorsque vous utilisez la balise de détails, vous créez du texte masqué qui peut facilement être affiché. Voici un exemple :
Cliquez ici pour voir les informations. Voici des informations plus détaillées dont vous n'avez pas besoin tout de suite.
Cliquez simplement sur la flèche pour obtenir les détails. Simple. Le créer est tout aussi simple. Voici le code utilisé pour l'exemple ci-dessus :
Cliquez ici pour voir les informations.
Voici des informations plus détaillées dont vous n'avez pas besoin tout de suite.
La balise définit la phrase qui sera affichée, tandis que les autres contenus sont masqués. Notez que vous pouvez utiliser d'autres balises dans la section des détails :titres, sections, etc.
Il y a aussi d'autres choses intéressantes que vous pouvez faire avec HTML, même si vous ne connaissez pas beaucoup CSS ou JSON.
8-9. et
Ne vous inquiétez pas, la balise que vous utilisez depuis des années ne va pas disparaître. contourne la balise d'image et indique au navigateur qu'il s'agit d'une image, d'un diagramme, d'une liste de codes ou d'une autre figure autonome.
Si une figure est supprimée de la page, cela n'affectera pas le flux du contenu.
va dans la balise figure et spécifie une légende pour une image. Cela pourrait ressembler à ceci :
Voici notre logo !
Cela vous donne un moyen intégré d'ajouter une légende à vos images. Plus besoin de passer par votre CMS.
Profitez de la puissance de HTML5
Les nouveaux éléments de HTML5 ajoutent beaucoup de puissance, en particulier à des fins sémantiques. Il existe des éléments supplémentaires pour le formatage, les mesures scalaires, la progression des tâches, etc. Vous pouvez voir tous les nouveaux éléments sur W3Schools.
Mais si vous pouvez maîtriser ces neuf, vous serez sur la bonne voie pour faire bon usage de HTML5. Et si vous débutez avec le HTML, assurez-vous de consulter ces exemples de code !
Avez-vous commencé à utiliser HTML5 ? Quels nouveaux éléments trouvez-vous les plus utiles ? Partagez vos impressions dans les commentaires ci-dessous !
