Publicité

HTML5 est le le plus récent et le plus grand Qu'est-ce que HTML5 et comment cela change-t-il ma façon de naviguer? [MakeUseOf explique]Au cours des dernières années, vous avez peut-être entendu le terme HTML5 de temps en temps. Que vous connaissiez ou non le développement Web, le concept peut être quelque peu nébuleux et déroutant. Évidemment,... Lire la suite version du langage de balisage le plus utilisé sur le Web. Il y a de gros changements par rapport à la dernière version de la langue, et si vous ne les utilisez pas, vous manquez des fonctionnalités vraiment cool.

Nous n'avons pas la possibilité de couvrir chaque nouvel élément de la cinquième version de HTML, mais ces neuf éléments sont parmi les plus importants. Pour plus d'informations sur les nouveaux éléments et API en HTML5, assurez-vous de consultez W3Schools.

Une introduction aux éléments sémantiques

Comme une grande partie d'Internet, HTML5 s'est déplacé pour se concentrer sur la sémantique. Maintenant, au lieu que les balises soient simplement utilisées pour le formatage, elles sont également utilisées pour indiquer aux navigateurs

et moteurs de recherche Top 7 des moteurs de recherche sémantique comme alternative à Google Lire la suite le sens de ce qu'ils entourent.

Par exemple,

indique simplement à un navigateur qu'il contient un paragraphe.

, dont nous allons discuter brièvement, indique à un navigateur qu'il contient le contenu principal de la page.

Le Web sémantique continue de se développer et nous ne faisons que commencer à gratter la surface de ce qu'il peut faire. HTML5 contribue à apporter balisage sémantique Qu'est-ce que le balisage sémantique et comment cela va changer Internet pour toujours [La technologie expliquée] Lire la suite à une plus grande partie d'Internet, et cela ne peut être bon que pour l'avenir du traitement sémantique.

1.

le

la balise définit «un contenu indépendant et autonome». L'exemple le plus simple est bien sûr un article. Pour cet article en particulier, nous devrions ouvrir la balise avant l'introduction et la fermer 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 sur la cuisine contiennent des histoires personnelles sur la façon dont une recette a vu le jour ou pourquoi elle est importante pour l'écrivain. 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 article ou fil de discussion peut être considéré comme autonome et chacun peut être marqué avec son propre

étiquette. 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ée à

est

. Cela définit un «regroupement thématique de contenu, généralement avec un titre». Alors

sera à l'intérieur

… droite?

Pas nécessairement. W3 souligne que cela dépend de la structure de votre site. Vous pouvez avoir du 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 vous avez 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 convient à votre page. N'oubliez pas qu'une section est simplement un «regroupement thématique de contenu» et 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 de titre - H1, H2, etc. Ils n'ont pas à le faire, mais en général, si vous utilisez une balise de titre, il y a fort à parier que vous incluez du contenu d'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 coordonnées, etc.» Vous pouvez le considérer comme un truc de «ménage».

La documentation indique également que vous pouvez avoir plusieurs sections de pied de page sur votre page. C’est probablement une bonne idée de conserver toutes ces informations dans un seul endroit.

5.

Cette balise contient les liens de navigation pour une page donnée. Notez que seule la section de navigation obtient cette balise, pas tous les liens de votre page. C'est pour les barres de navigation et les outils similaires.

C'est une balise vraiment simple - c'est tout ce qu'il y a à faire. Utilisez-le pour définir la section de navigation et ne le réutilisez pas sur votre page.

6.

L'un des nouveaux éléments les plus intéressants de HTML5 est le côté. W3 lui donne la définition quelque peu inutile de «certains contenus en dehors du contenu dans lequel ils sont placés».

En bref, un côté est tout ce qui est lié (mais distinct) 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 une barre latérale dans cet article donnant des informations sur l'histoire de HTML5, ce serait un aparté.

Mais le

 L'article principal va ici.  L'article continue ici.

Étant donné qu'il existe plusieurs utilisations pour cette balise, cela peut être déroutant. Si vous gardez à l'esprit qu'il s'agit d'un "contenu secondaire" et qu'il n'a pas toujours besoin d'être 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 en évidence. Peut-être que ce sont les informations de copyright pour une photo. Ou les petits caractères d'un concours. Ce type d'informations est exactement à quoi sert la balise details.

Lorsque vous utilisez la balise de détails, vous créez un 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. Facile. La création 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. 

le

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: en-têtes, sections, etc.

Il existe d'autres des choses sympas que vous pouvez faire avec HTML 8 effets HTML sympas que n'importe qui peut ajouter à son site WebVous n'avez pas besoin de connaître CSS ou PHP pour créer un site sophistiqué. Utilisez ces astuces HTML sympas pour générer des effets impressionnants. Lire la suite , même si vous ne connaissez pas beaucoup CSS ou JSON.

8-9.

et

Ne vous inquiétez pas, le le tag que vous utilisez depuis des années ne disparaîtra pas.

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 un chiffre est supprimé de la page, cela n'affectera pas le flux du contenu.

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 en 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. Tu peux voir tous les nouveaux éléments à W3Schools.

Mais si vous pouvez maîtriser ces neuf, vous serez en bonne voie de faire bon usage de HTML5. Et si vous débutez avec HTML, assurez-vous de vérifier ces exemples de code 17 exemples de code HTML simples que vous pouvez apprendre en 10 minutesVous souhaitez créer une page Web de base? Apprenez ces exemples HTML et essayez-les dans un éditeur de texte pour voir à quoi ils ressemblent dans votre navigateur. Lire la suite !

Avez-vous commencé à utiliser HTML5? Quels nouveaux éléments trouvez-vous les plus utiles? Partagez votre opinion dans les commentaires ci-dessous!