Nouveaux éléments HTML5

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

,

,

,

,

,,

,

, < ;section> et . Ces balises/éléments HTML 5 permettent des interfaces beaucoup plus conviviales, avec des taux de performances plus élevés, des résultats efficaces et plus faciles à coder et à mettre en œuvre, et cela aide à improviser la mise en page dans son ensemble.

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 :

<title>Article Element</title>


<article>
<h2 id="EDUCBA">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>

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 :

<title>Figure Element</title>


<p> EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.
</p>
<figure>
<img  src="/static/imghwm/default1.png" data-src="educba.png" class="lazy" alt="Nouveaux éléments HTML5" >
</figure>

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 :

<title>Figure Caption Element</title>


<p> EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.
</p>
<figure>
<img  src="/static/imghwm/default1.png" data-src="educba.png" class="lazy" alt="Nouveaux éléments HTML5" >
<figcaption>EDUCBA (Corporate Bridge Consultancy Pvt Ltd)</figcaption>
</figure>

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.

Exemple :

<title>Header Element</title>


<article>
<header>
<h1 id="Header-One">Header One</h1>
<h2 id="Header-Two">Header Two</h2>
<h3 id="Header-Three">Header Three</h3>
</header>
<p>The content of the document goes here...</p>
</article>

Sortie :

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.

Exemple :

<title>Footer Element</title>


<footer>
<p>Copyright © 2019 www.educba.com</p>
<p>Contact: <a href="mailto:%5Bemail%C2%A0protected%5D">[email protected]</a>
</p></footer>

Sortie :

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 :

<title>Main Element</title>


<header>
<p>Header information>
</p></header>
<main>
<p>Main Information</p>
<article>
<h2 id="EDUCBA">EDUCBA</h2>
<p>EDUCBA is a leading global provider of skill based education...</p>
</article>
</main>
<footer>
<p>Footer Information>
</p></footer>

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 :

<title>Mark Element</title>


<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>

Sortie :

Le code ci-dessus affiche le résultat comme indiqué dans l'image ci-dessous,

8.

Le

L’élément est utilisé pour spécifier les liens de navigation sur la page. Ces liens fournissent des connexions vers d'autres pages d'un document.

Exemple :

<title>Nav Element</title>


<header>
<nav>
<a href="#">HTML</a> |
<a href="#">CSS</a> |
<a href="#">JAVA</a> |
<a href="#">PHP</a> |
<a href="#">PYTHON</a>
</nav>
</header>

Sortie :

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 :

<title>Section Element</title>


<article>
<h2 id="Main-Article"> Main Article </h2>
<p>Content of the main header will be displayed here...</p>
<section>
<h2 id="Section-One">Section One</h2>
<p>Content of the first section will be displayed...</p>
</section>
<section>
<h2 id="Section-Two">Section Two</h2>
<p>Content of the second section will be displayed...</p>
</section>
</article>

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:

<title>Summary Element</title>


<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>

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!