HTML5 est une nouvelle mise à niveau de la version HTML 4.01 qui présente de nombreuses nouvelles fonctionnalités, des fonctionnalités avancées, de meilleures pages vues et de nombreuses autres améliorations pour répondre aux besoins technologiques croissants. Les éléments HTML5 les plus utilisés et les plus recherchés sont , , , , ,,
Top 10 des nouveaux éléments HTML5
HTML5 apporte de nouveaux éléments pour améliorer la mise en page du document.
1.
L' 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 dont il est recommandé qu'elle soit largement distribuée ou utilisable. Il peut s'agir d'un article de groupe, d'un journal ou d'un rapport quotidien, d'une soumission à une newsletter en ligne, d'une remarque envoyée par un client ou de tout autre objet sans substance.
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Article Element</title>
</head>
<body>
<article>
<h2>EDUCBA</h2>
<p>EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries. </p>
</article>
</body>
</html>
Copier après la connexion
Sortie :
Enregistrez le code ci-dessus dans un fichier avec une extension .html.
Exécutez le fichier html dans un navigateur et vous obtiendrez le résultat affiché dans l'image ci-dessous.
2.
La L'élément indique un contenu individuel, tel que des catégorisations, des cartes, des images, des articles de code, etc.
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Figure Element</title>
</head>
<body>
<p> EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.
</p>
<figure>
<img src="educba.png"/>
</figure>
</body>
</html>
Copier après la connexion
Sortie :
Le code ci-dessus produira le résultat comme indiqué dans l'image ci-dessous,
3.
Le L'élément ajoute une description pour l'image.
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Figure Caption Element</title>
</head>
<body>
<p> EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.
</p>
<figure>
<img src="educba.png"/>
<figcaption>EDUCBA (Corporate Bridge Consultancy Pvt Ltd)</figcaption>
</figure>
</body>
</html>
Copier après la connexion
Sortie :
Le code ci-dessus affiche le résultat comme indiqué dans l'image ci-dessous,
4.
L' L'élément spécifie l'en-tête d'un document ou d'une section de la page. Vous pouvez définir plusieurs en-têtes dans un seul document.
Le code ci-dessus affiche le résultat comme indiqué dans l'image ci-dessous,
5.
Le L'élément spécifie des 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.
Le code ci-dessus affiche le résultat comme indiqué dans l'image ci-dessous,
6.
Le L'élément est utilisé pour afficher les informations principales d'un document, c'est-à-dire les informations importantes.
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Main Element</title>
</head>
<body>
<header>
<p>Header information</>
</header>
<main>
<p>Main Information</p>
<article>
<h2>EDUCBA</h2>
<p>EDUCBA is a leading global provider of skill based education...</p>
</article>
</main>
<footer>
<p>Footer Information</>
</footer>
</body>
</html>
Copier après la connexion
Sortie :
Le code ci-dessus produira le résultat comme indiqué dans l'image ci-dessous,
7.
La L'élément met en évidence ou marque le texte avec la couleur d'arrière-plan qui attire l'utilisateur vers un texte particulier du document.
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Mark Element</title>
</head>
<body>
<article>
<p><mark>EDUCBA</mark> is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries. </p>
</article>
</body>
</html>
Copier après la connexion
Sortie :
Le code ci-dessus affiche le résultat comme indiqué dans l'image ci-dessous,
Le code ci-dessus produira le résultat comme indiqué dans l'image ci-dessous,
9.
La L'élément définit la section autonome ou la région spécifique du document.
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Section Element</title>
</head>
<body>
<article>
<h2> Main Article </h2>
<p>Content of the main header will be displayed here...</p>
<section>
<h2>Section One</h2>
<p>Content of the first section will be displayed...</p>
</section>
<section>
<h2>Section Two</h2>
<p>Content of the second section will be displayed...</p>
</section>
</article>
</body>
</html>
Copier après la connexion
Sortie :
Le code ci-dessus affiche le résultat comme indiqué dans l'image ci-dessous,
10.
The tag is a subpart of the tag which provides the text that can be displayed or hidden when the user clicks the heading.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Summary Element</title>
</head>
<body>
<details>
<summary>
EDUCBA - Corporate Bridge Consultancy Pvt Ltd
</summary>
<p>It is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</p>
</details>
</body>
</html>
Copier après la connexion
Output:
When you run the above code, it will display the result as shown below,
As shown in the image, click on the heading, and it will display the hidden text shown below the image,
Conclusion
So far, we have seen how new HTML5 elements are useful for various website creation tasks. These new elements read the document in a more accurate & standard way and develop more complex and efficient web apps. The new HTML5 elements give some additional extra features to generate interactive websites.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
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
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
