Présentation des nouveaux éléments HTML5
Depuis 1999, lorsque HTML 4.01 est devenu une norme, le Web et son utilisation ont considérablement changé. Le W3C a décidé de changer la syntaxe HTML fondamentale de SGML (Standard Generalized Markup Language) en XML, ainsi que des langages de balisage entièrement différents tels que Scalable Vector Graphics (SVG), XForms et MathML. Actuellement, certains composants HTML 4.01 sont obsolètes, jamais utilisés ou non utilisés comme prévu. Chaque partie des composants en HTML5 est déplacée ou recomposée. HTML5 a inclus de nouveaux éléments pour illustrer la représentation, afficher du contenu numérique, une mise en page améliorée et des fonctionnalités générales, ainsi que plusieurs nouvelles interfaces pour répondre correctement aux exigences Internet d'aujourd'hui.
Il existe plusieurs nouveaux éléments introduits dans HTML5, qui offrent certaines fonctionnalités supplémentaires pour développer un site souhaitable et interactif. Nous pouvons créer votre code rapidement et efficacement à l'aide de tels composants. En raison du manque de structure, de nombreux documents HTML bien formés sont plus difficiles à gérer qu'ils ne devraient l'être. En évaluant les échelles d'en-tête, nous devons savoir où se dirigent les ruptures de segment. L'élément div identifie les barres latérales, les pieds de page, les en-têtes, les menus de navigation et les principales parties de contenu.
Top 10 des nouveaux éléments HTML5
HTML5 fournit de nouveaux éléments pour améliorer la mise en page du document.
1.
L'élément spécifie une partie d'une page qui comprend une structure distincte dans un document, une section ou un site Web et qui est recommandée pour être largement diffusée ou utilisable. Il peut s'agir d'un groupe publiant un journal ou un rapport papier quotidien, une soumission à une newsletter en ligne, une remarque envoyée par un client ou tout autre objet sans substance.
Exemple:
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Production:
- Enregistrez le code ci-dessus dans un fichier avec l'extension .html.
- Exécutez le fichier html dans un navigateur et vous obtiendrez la sortie comme indiqué dans l'image ci-dessous.
2.
L'élément indique le contenu individuel d'une manière beaucoup plus que les catégorisations, les cartes, les images, les articles de code et bien d'autres.
Exemple:
Figure Element
EDUCBA est l'un des principaux fournisseurs mondiaux d'enseignement basé sur les compétences répondant aux besoins de plus de 500 000 membres dans plus de 40 pays.
Production:
Le code ci-dessus produira la sortie comme indiqué dans l'image ci-dessous,
3.
L'élément est utilisé pour ajouter une description pour l'image.
Exemple:
Figure Caption Element
EDUCBA est l'un des principaux fournisseurs mondiaux d'enseignement basé sur les compétences répondant aux besoins de plus de 500 000 membres dans plus de 40 pays.
EDUCBA (Corporate Bridge Consultancy Pvt Ltd)
Production:
Le code ci-dessus affiche le résultat comme indiqué dans l'image ci-dessous,
4.
L'élément est utilisé pour spécifier l'en-tête d'un document ou d'une section de la page. Vous pouvez définir plusieurs en-têtes dans un même document.
Exemple:
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Le contenu du document va ici …
Production:
Le code ci-dessus affiche le résultat comme indiqué dans l'image ci-dessous,
5.
L'élément est utilisé pour spécifier les informations telles que les informations sur l'auteur, les informations sur les droits d'auteur, les contacts, les liens vers des documents connexes, le plan du site et bien d'autres.
Exemple:
Footer Element
Copyright © 2019 www.educba.com
Contact:
Production:
Le code ci-dessus affiche le résultat comme indiqué dans l'image ci-dessous,
6.
L'élément est utilisé pour afficher les informations principales, c'est-à-dire importantes d'un document.
Exemple:
Main Element
Informations d'en-tête
Informations principales
EDUCBA
EDUCBA est l'un des principaux fournisseurs mondiaux d'enseignement basé sur les compétences …
Informations sur le pied de page
Production:
Le code ci-dessus produira la sortie comme indiqué dans l'image ci-dessous,
sept.
L'élément est utilisé pour mettre en surbrillance ou marquer le texte avec la couleur d'arrière-plan qui attire l'utilisateur pour un texte particulier sur le document.
Exemple:
Mark Element
EDUCBA est l'un des principaux fournisseurs mondiaux d'enseignement basé sur les compétences répondant aux besoins de plus de 500 000 membres dans plus de 40 pays.
Production:
Le code ci-dessus affiche le résultat comme indiqué dans l'image ci-dessous,
8.
L'élément est utilisé pour spécifier les liens de navigation sur la page. Ces liens fournissent des connexions à d'autres pages d'un document.
Exemple:
Nav Element
HTML |
CSS |
JAVA |
PHP |
PYTHON
Production:
Le code ci-dessus produira la sortie comme indiqué dans l'image ci-dessous,
9.
L'élément est utilisé pour définir la section autonome ou la région spécifique dans le document.
Exemple:
Section Element
Main Article
Section Element
Main Article
Section Element
Main Article
Le contenu de l'en-tête principal sera affiché ici …
Section un
Le contenu de la première section sera affiché …
Section deux
Le contenu de la deuxième section sera affiché …
Production:
Le code ci-dessus affiche le résultat comme indiqué dans l'image ci-dessous,
dix.
La balise est une sous-partie de la balise qui fournit le texte qui peut être affiché ou masqué lorsque l'utilisateur clique sur l'en-tête.
Exemple:
Summary Element
EDUCBA - Corporate Bridge Consultancy Pvt Ltd
Il est l'un des principaux fournisseurs mondiaux d'éducation basée sur les compétences répondant aux besoins de plus de 500 000 membres dans plus de 40 pays.
Production:
Lorsque vous exécutez le code ci-dessus, il affichera le résultat comme indiqué ci-dessous,
Comme indiqué dans l'image, cliquez sur l'en-tête, il affichera le texte caché comme indiqué dans l'image ci-dessous,
Conclusion
Jusqu'à présent, nous avons vu comment les nouveaux éléments HTML5 sont utiles pour diverses tâches dans la création du site Web. Ces nouveaux éléments lisent le document de manière plus précise et conforme aux normes et développent des applications Web plus complexes et plus efficaces. Les nouveaux éléments HTML5 offrent des fonctionnalités supplémentaires supplémentaires pour générer des sites Web interactifs.
Articles recommandés
Ceci est un guide des nouveaux éléments Html5. Ici, nous discutons des 10 meilleurs nouveaux éléments de Html5 pour améliorer la mise en page du document. Vous pouvez également consulter les articles suivants pour en savoir plus -
- Correction des couleurs dans After Effects
- Top 6 des versions de HTML
- Html5 vs Html4
- XHTML vs HTML5
- Qu'est-ce que Bridge?
- Tags HTML5 | Top 4 des balises de HTML5