Sémantique HTML5

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.

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

  
  
  <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>
  
  
  <article>
  <header>
  <h1 id="Educba-learning-bridge">Educba learning bridge</h1>
  <h3 id="Become-a-techinal-learner-with-EDUCBA">Become a techinal learner with EDUCBA</h3>
  <p>Hey the best online training institute in ASIA </p>
  </header>
  </article>
  
  

  Sortie :

  

  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 :

  
  
  <title>Navigation Element</title>
  <style>
  h1 {
  color:#Grey;
  }
  </style>
  
  
  <h1 id="Navigation-Bar-for-EduCBA">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>
  
  

  Sortie :

  

  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 :

  
  
  <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>
  
  
  <section>
  <h1 id="AWS-Tutorials-for-EduCBA">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 id="Data-Mining">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>
  
  

  Sortie :

  

  Exemple n°4 – 

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

  Code :

  
  
  <title>EduCBA mark Element</title>
  <style>
  h2 {
  color:#Grey;
  }
  </style>
  
  
  <h1 id="How-to-mark-text">How to mark text </h1>
  <p> In theory, this method transforms <mark>raw data into valuable information</mark> or insights.</p>
  
  

  Sortie :

  

  Exemple n°5 –

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

  Code :

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

  Sortie :

  

  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 :

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

  Sortie :

  

  

  7.  :
     Cet élément est utilisé pour spécifier le contenu en dehors du contenu de la page.
  8.  : Cet élément est utilisé pour spécifier l'heure ou la date.
  9.  :
     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 :

  
  
  <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>
  
  
  <article>
  <header>
  <h1 id="Educba-learning-bridge">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 id="Become-a-technicall-learner-with-EDUCBA">Become a technicall learner with EDUCBA</h3>
  <section>
  <h1 id="mark-AWS-Tutorials-for-EduCBA-mark"><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 id="mark-Data-Mining-mark"><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>
  
  

  Sortie :

  

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!