Sémantique HTML5-tutoriel HTML-php.cn

Sémantique HTML5

PHPz

Libérer： 2024-09-04 16:37:03

original

1198 Les gens l'ont consulté

Les éléments HTML5 Semantics ont des noms significatifs qui reflètent le type de composant. Prenons un exemple de tableau, d'en-tête, de pied de page, etc.

<à part>

Pour HTML4, les développeurs utilisent leurs propres noms d'identifiant/classe pour concevoir des éléments tels que les hauts, les en-têtes, les bas, les menus, les pieds de page, les éléments principaux, la navigation, le matériel, les objets, les topnavs, les barres latérales, etc., etc. Cependant, pour cette raison, les moteurs de recherche n'ont pas pu identifier le contenu correct de la page Web.

Exemples de sémantique HTML5

Voyons maintenant quelques exemples d'éléments sémantiques HTML5 :

Exemple n°1 –

Il fait référence à l'en-tête d'un segment d'introduction de page, comme son nom l'indique. De nombreux en-têtes peuvent être trouvés sur une seule page.

Code :

<!DOCTYPE html>
<html>
<head>
<title>Header Element for the page</title>
<style>
h1, h4 {
Color:#red;
Text-align:centre;
margin-bottom:2px;
}
p {
font-size:23px;
text-align:centre;
margin-top:2px;
}
</style>
</head>
<body>
<article>
<header>
<h1>Educba learning bridge</h1>
<h3>Become a techinal learner with EDUCBA</h3>
<p>Hey the best online training institute in ASIA </p>
</header>
</article>
</body>
</html>

Copier après la connexion

Sortie :

Sémantique HTML5

Exemple n°2 –

Une collection de liens de navigation est utilisée pour décrire le menu de navigation ou la barre de navigation.

Code :

<!DOCTYPE html>
<html>
<head>
<title>Navigation Element</title>
<style>
h1 {
color:#Grey;
}
</style>
</head>
<body>
<h1>Navigation Bar for EduCBA</h1>
<nav>
<a href="https://www.educba.com/">Home</a> |
<a href="https://www.educba.com/data-science/">Data Science</a> |
<a href="https://www.educba.com/software-development/">Software Development</a> |
<a href="https://www.educba.com/design/">Design</a> |
<a href="https://www.educba.com/finance/">Finance</a>
</nav>
</body>
</html>

Copier après la connexion

Sortie :

Sémantique HTML5

Exemple n°3 –

Une page peut être divisée en sections telles que Introduction, Contact, Détails, etc., avec un élément pour chaque section.

Code :

<!DOCTYPE html>
<html>
<head>
<title>Have a look for Section Element in EduCBA</title>
<style>
h1 {
color:#Grey;
}
p {
font-size:20px;
text-align:left;
margin-top:2px;
}
</style>
</head>
<body>
<section>
<h1>AWS Tutorials for EduCBA</h1>
<p>Amazon Web Services (AWS) is one of the world's most popular and used cloud services. 175 supported services are available in AWS. </p>
</section>
<section>
<h1>Data Mining</h1>
<p>AThrough technological development such as big data and data science companies around the world have benefited from data mining by recognize opportunities and making their organizations efficient through waste reduction, to achieve their business goals.
</p>
</section>
</body>
</html>

Copier après la connexion

Sortie :

Sémantique HTML5

Exemple n°4 –

Cet élément de marque est utilisé pour mettre en évidence le texte.

Code :

<!DOCTYPE html>
<html>
<head>
<title>EduCBA mark Element</title>
<style>
h2 {
color:#Grey;
}
</style>
</head>
<body>
<h1>How to mark text </h1>
<p> In theory, this method transforms <mark>raw data into valuable information</mark> or insights.</p>
</body>
</html>

Copier après la connexion

Sortie :

Sémantique HTML5

Exemple n°5 –

C'est un aspect d'un bloc ou d'une division de segment. Il est utilisé comme un package.

Code :

<!DOCTYPE html>
<html>
<head>
<title>div Element</title>
<style>
.edu {
color:#grey;
}
</style>
</head>
<body>
<h1>div Element for educba </h1>
<div class="EduCBA">
<h1>Data Science</h1>
<p>Data analatics computer Science nachine learning </p>
</div>
</body>
</html>

Copier après la connexion

Sortie :

Sémantique HTML5

Exemple n°6 – et

Cet élément est utilisé pour définir des détails supplémentaires qui peuvent être affichés ou masqués par l'utilisateur.
Cet élément permet de définir un en-tête visible pour un fichier élément

Programme de mise en œuvre et

Code :

<!DOCTYPE html>
<html>
<head>
<title>Details for the EduCBA Summery</title>
<style>
.GFG {
Color:#red;
font-size:60px;
Text-align:left;
margin-bottom:0px;
}
p {
font-size:25px;
text-align:left;
margin-top:3px;
}
</style>
</head>
<body>
<details>
<summary class="EDUCBA">Make your Study easily with us</summary>
<p>One of the best Data Science and web portal
where you can learn good skills of programming.
</p>
</details>
</body>
</html>

Copier après la connexion

Sortie :

Sémantique HTML5

: Cet élément est utilisé pour spécifier le contenu en dehors du contenu de la page.
: Cet élément est utilisé pour spécifier l'heure ou la date.
: Cet élément est utilisé pour spécifier le contenu principal du document.

Comment implémenter tous les éléments du code dans un seul exemple ?

Nous voyons ici comment implémenter le code des éléments dans un exemple.

Code :

<!DOCTYPE html>
<html>
<head>
<title>Header Element for the page</title>
<style>
color:red;
h1, h4 {
Color:#red;
Text-align:centre;
margin-bottom:2px;
}
p {
font-size:20px;
text-align:centre;
margin-top:2px;
}
</style>
</head>
<body style="background-color:LightCyan;">
<article>
<header>
<h1>Educba learning bridge</h1>
<nav>
<a href="https://www.educba.com/">Home</a> |
<a href="https://www.educba.com/data-science/">Data Science</a> |
<a href="https://www.educba.com/software-development/">Software Development</a> |
<a href="https://www.educba.com/design/">Design</a> |
<a href="https://www.educba.com/finance/">Finance</a>
</nav>
<details>
<h3>Become a technicall learner with EDUCBA</h3>
<section>
<h1><mark>AWS Tutorials for EduCBA</mark></h1>
<p>Amazon Web Services (AWS) is one of the world's most popular and used cloud services. 175 supported services are available in AWS. </p>
</section>
<section>
<h1><mark>Data Mining</mark></h1>
<p>Through technological development such as big data and data science companies around the world have benefited from data mining by recognize opportunities and making their organizations efficient through waste reduction, to achieve their business goals.
</p>
</section>
<p><em>EduCBA is the best online training institute in ASIA</em></p>
</details></header>
</article>
</body>
</html>

Copier après la connexion

Sortie :

Sémantique HTML5