L'article suivant vous fournira divers éléments sémantiques en HTML5. La sémantique concerne différents types de balises, dont la fonctionnalité représenterait et exécuterait la même fonction selon son nom de balise. La fonctionnalité de la balise serait facilement comprise par son nom, qui est dans un nom/format compréhensible par l'utilisateur. La plupart des éléments en HTML sont généralement des éléments sémantiques.
Avantages des éléments sémantiques en HTML5
Les avantages des éléments sémantiques sont les suivants :
Compréhension facile du code.
La maintenance peut être effectuée rapidement et de manière appropriée.
Il n'est pas nécessaire d'ajouter une description spécifiquement pour une balise.
Divers éléments sémantiques en HTML5
Entrons maintenant dans les éléments sémantiques :
1.
Cette balise nous donne une idée que les données contenues dans cette balise sont spécifiquement destinées à un contenu similaire. Cela dépend aussi des différents types d’articles que nous avons généralement. Il peut s'agir d'un blog, de forums, d'articles de chroniques dans des journaux, etc.
Code :
<html>
<body>
<article>
<h2>HTML5</h2>
<p>New Updated version of HTML</p>
</article>
<article>
<h2>Learning HTML</h2>
<p> We are learning through EDUCBA</p>
</article>
</body>
</html>
Copier après la connexion
Sortie :
2.
Cette balise consiste à fournir un contenu sectionnel des données totales. En sachant utiliser à la fois les balises d’article et de section, ces balises peuvent être utilisées à l’intérieur de chaque balise. C'est-à-dire que la balise de section peut être utilisée à l'intérieur de la balise d'article et vice versa.
Code :
<html>
<body>
<section>The section here is about:
<p><h4> Learning and practising</h4> </p>
</section>
</body>
</html>
Copier après la connexion
Sortie :
3.
Cette balise donne toutes les données d'en-tête. Toutes les données que nous souhaitons placer dans le format d'en-tête sont utilisées sous cette balise d'en-tête. Et cette balise peut être utilisée plusieurs fois dans l'ensemble du script HTML.
Code :
<html>
<body>
<header>
<h3>This is header #1</h3>
<p> First one</p>
</header>
<p> next one ...</p>
<header>
<h3>This is header #2</h3>
<p> Second one </p>
</header>
</body>
</html>
Copier après la connexion
Sortie :
4.
Ceci est la section de pied de page de notre script HTML. Généralement, nous voyons toutes les données de droits d'auteur et la petite section que nous trouvons sous toutes les offres, comme « des conditions s'appliquent » sur toutes les offres. Ces éléments sont donc définis sous la balise footer.
Code :
<html>
<body>
<p> Inside Body and above footer tag</p>
<footer>
<p> Inside footer tag.</p>
</footer>
<footer>
<p><h4> Another footer tag</h4></p>
<p><h6>Conditions Apply</h6> </p>
</footer>
</body>
</html>
Copier après la connexion
Sortie :
5.
Cette balise nous donne les éléments de navigation. L'URL dans tout script de document HTML où l'on souhaite généralement naviguer d'une page à une autre via cette balise. Toutes les données fournies sous cette balise sont disponibles sous forme d'hyperliens. Ces hyperliens peuvent être utiles pour naviguer d'une section à une autre section.
Code :
<html>
<body>
<h4> About </h4>
<nav><a href="#"> About link 1</a>
<a href="#"> About link 1</a>
</nav>
<h4> Contact </h4>
<nav>
<a href="#"> Contact Link 1</a>
<a href="#"> Contact Link 2</a>
</nav>
</body>
</html>
Copier après la connexion
Sortie :
Pendant que vous vous entraînez, cliquez sur ces liens et vérifiez comment la couleur du lien hypertexte change en cliquant.
6. <à part>
Il s'agit d'une balise qui est utilisée pour afficher les données sur les côtés de notre document HTML. Sur de nombreux sites Web, nous pouvons trouver du contenu qui existe dans une barre latérale, qui s'affiche à l'aide de cette balise side. Ce contenu doit être en adéquation avec les autres données présentes dans le document.
Code :
<html>
<body>
<p>How aside tag is used </p>
<aside>
<h4>Inside aside tag</h4>
<p>Content inside aside tag</p>
</aside>
</body>
</html>
Copier après la connexion
Sortie :
Le contenu exact ne peut pas être précisé complètement de la même manière ; il ne peut être documenté et compris clairement qu'en utilisant l'intégralité de la page HTML.
7.
Cette balise précise que nous allons joindre une image. Cette balise peut être utilisée pour spécifier une source d'image et afficher un gif ou une image.
Comme mentionné ci-dessus, c'est ainsi que nous pouvons définir la balise figure. À l’intérieur de la balise figure, nous pouvons spécifier notre commande image avec une balise source. À l’intérieur de cette balise figure, nous pouvons, à notre tour, utiliser la balise légende de la figure.
8.
Cette balise est utilisée pour donner une légende sous l'image fournie. Il peut être utilisé à l’intérieur de l’étiquette de la figure. L'utilisation de cela peut être vue dans l'exemple ci-dessous.
<html>
<body>
<figure>
<img src="">
<figcaption>This is description of the image attached.</figcaption>
</figure>
</body>
</html>
Copier après la connexion
Vous pouvez essayer d'exécuter la même chose en donnant une source d'image et vérifier comment la sortie est affichée.
9.
Cette balise précise tous les attributs et le contenu complet du site HTML. Il contient tout le contenu unique. Une chose importante à noter pour cette balise particulière est qu'elle ne peut être utilisée qu'une seule fois dans la création totale de la page. Nous constatons que d'autres balises peuvent être utilisées plus d'une fois lors de la création d'une page Web, mais cette balise principale est une balise à usage unique.
Code :
<html>
<body>
<main>
<h1>Learning HTML Semantic Tags</h1>
<article>
<h4>Studying</h4>
<p> Reading would help to understand different topics</p>
</article>
<article>
<h4>Practising</h4>
<p> With Studying , Practising is a must thing to do in learning</p>
</article>
</main>
</body>
</html>
Copier après la connexion
Sortie :
10.
This tag is for highlighting specific content or data. In other words, this tag is helpful in marking data.
Code:
<html>
<body>
<p> In this whole text which I am writing now, <mark> I want to mark this text </mark></p>
</body>
</html>
Copier après la connexion
Output:
11.
This tag contains additional details that users can hide any details on their wish. Through this tag, users can open/close any content which they need. If we want that tag to disclose its details at the start itself, then the attribute “open” can be used.
Code:
<html>
<body>
<details open="true">
<p>Is this displayed?</p>
</details>
</body>
</html>
Copier après la connexion
Output:
Now, what would be the output if we did not use the open attribute?
Code:
<html>
<body>
<details>
<p>Is this displayed?</p>
</details>
</body>
</html>
Copier après la connexion
Output 1:
Output 2:
12.
This tag is used inside the details tag. Under the details tag, we can have a summary tag that specifies the entire summary of the web page or the HTML document. An important thing to note here is that the summary tag is the first child tag that has to come under the details tag.
Code:
<html>
<body>
<details>
<summary> Have written this inside summary tag which is inside details tag</summary>
<p>This text only comes under details tag</p>
</details>
<p> This text data is written after completion of details tag</p>
</body>
</html>
Copier après la connexion
Output 1:
We had highlighted the arrow in the above output, as we get our output 2 once we expand it.
Output 2:
This tag might not be giving out any difference
13.
This tag defines date/time in such a format that users can easily understand. But a thing to note is that this tag may not give us a changed output in many of the browsers.
Code:
<html>
<body>
<p>At present time is <time>11:00</time> pm in the night.</p>
</body>
</html>
Copier après la connexion
Output:
14.
As the name already suggests, this tag is for writing any content in a box. This tag should have an open attribute for displaying the dialog box once the source code is executed.
Code:
<html>
<body>
<dialog open=true>
<p> The data written here gets displayed in a dialog box </p>
</dialog>
</body>
</html>
Copier après la connexion
Output:
15.
This tag gives the progress of a certain task in a graphical representation. We here need to have the maximum number for which the progress has to be represented. This tag mainly consists of two attributes. Max and value are the two attributes. Max represents the total count that has to be completed, and Value gives us the count percent that is finished with respect to the maximum count value.
Code:
<html>
<body>
<h1 style="color:red;">EDUCBA</h1>
Your learning progress is:
<progress value="72" max="100">
</progress>
</body>
</html>
Copier après la connexion
Output:
16.
This tag is for measurement. This can be utilized for the space taken by a query or usage of disk space also. There are a few attributes that are to be used with this tag. The attributes are max, min, and value. Based on their usage, we can definitely figure out their purpose and usage.
Code:
<html>
<body>
<h2>EDCUBA</h2>
<p>Usage of Meter tag</p>
In a 6 floors apartment, I live in 2nd floor:
<meter value="2" min="0" max="6">2 out of 6</meter>
</body>
</html>
Copier après la connexion
Output:
17.
This is a tag that has been introduced to add video files to our HTML page. Until this tag was introduced, developers used plugins to introduce video files into HTML page content. There are a few attributes that can be used along with the tag. Autoplay, Preload, Muted are some of these.
We just need a source tag to give the source from where we need to upload the video content to our page.
18.
This tag is for adding audio files to our Html page. The usage and the source tag would be the same as that of the video tag. As an exercise, try using all the semantic elements and create e HTML 5 version web page to learn better and faster.
Conclusion
In this article, we have got to see many semantic elements and their usage in HTML5. One important thing to note here is, many of these tags are supported by internet explorer versions greater than 9 and chrome versions greater than 3.
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)
