Vous n'avez pas besoin d'utiliser des balises div à chaque fois. Utilisez ces balises HTML sémantiques pour rendre votre site plus structuré et accessible.

Avant l'introduction du HTML sémantique, les développeurs utilisaient des divs pour organiser le contenu. Les éléments div n'ont aucune signification en eux-mêmes. Ils ne fournissent qu'un moyen d'appliquer des styles et d'organiser le contenu.

Le mot sémantique signifie relatif au sens. Les éléments HTML sémantiques décrivent le but de leur contenu. Ils donnent du sens au développeur, à l'utilisateur, aux moteurs de recherche et aux technologies d'assistance. Voici une liste de balises HTML sémantiques populaires que vous pouvez utiliser dans votre prochain projet.

Que sont les Div?

En HTML, l'élément div (division) est un conteneur de niveau bloc. Vous utilisez un div pour regrouper ou diviser des éléments HTML en sections sur une page Web. La syntaxe est comme indiqué ci-dessous :

<div>
div>

Avantages de l'utilisation d'éléments HTML sémantiques par rapport aux divs

instagram viewer

HTML5 a introduit des éléments HTML sémantiques pour faciliter la lecture du code. Les éléments sémantiques donnent du sens et structurent le contenu Web.

Ils rendent votre code compréhensible pour les autres développeurs. Ils permettent également aux moteurs de recherche de trouver plus facilement votre contenu et de générer du trafic vers votre site. Voici quelques éléments sémantiques que vous pouvez utiliser dans votre Projets HTML et CSS.

1.

Le La balise définit la section d'en-tête d'un document. En règle générale, il contient le logo du site, la navigation et le titre de la page. C'est la section qui apparaît en haut d'une page Web. Vous pouvez personnaliser l'en-tête en fonction de vos besoins. La syntaxe est la suivante :

<corps>
<entête>


<h1> Bonjour à tous!h1>


<p>je suis un en-têtep>


entête>
corps>

2.

Le La balise contient les liens de navigation pour le site Web. Il peut s'agir de menus, de tables des matières ou d'index. Il est généralement placé dans le étiqueter. La syntaxe est la suivante :

<entête>
<navigation>


<ul>


<li>Liens de mon siteli>


<li><unhref="#"> Maisonun>li>


<li ><unhref="#"> À propos de nous un>li>


ul>


navigation>


<h1>Ce qui précède est une partie de navigation de mon site Web.h1>
entête>

Sur le navigateur, cela ressemblera à ceci :

Vous pouvez utiliser des modèles de mise en page CSS tels que Boîte flexible CSS pour aligner le

3.

Le balise contient le contenu principal de la page Web. Il sépare le contenu de l'en-tête, de la barre latérale et du pied de page. Le principal représente le contenu dominant du section.

<corps>
<entête>


<titre> Informations sur le site Web titre>


entête>


<principal>


<p> Ce site Web est une courte démonstration du fonctionnement de la balise principale.p>


<p> Il renferme la partie du site Web avec un contenu utile.p>


principal>


<bas de page>


<h3> Ceci est un pied de page h3>


bas de page>
corps>

Il apparaît comme ceci :

4.

Utilisez le balise pour définir des sections autonomes dans un document ou un site Web. Par exemple, vous pouvez les utiliser pour structurer des articles de blog, des magazines ou des fiches produits. Le L'élément peut contenir d'autres éléments, notamment d'autres articles, sections et titres. Les éléments ci-joints doivent se rapporter au sujet de l'article.

<article>
<h1>Plus étrange que la fictionh1>
<article>


<h3>Introductionh3>


<p>Les événements et les personnes racontés dans ce livre sont fictifs.p>


article>


<article>


<h3>Chapitre unh3>


<p> La journée était lumineuse et le soleil souriait du cielp>


article>
article>

Cela ressemble à ça :

5.

Le La balise contient le contenu lié au contenu principal. Utilisez cette balise pour créer des barres latérales pour les citations, les commentaires ou les dédicaces. met en évidence les informations que le lecteur pourrait manquer. Il se démarque du reste du contenu.

html>
<html>


<style>


 corps{


 couleur de fond :#abdbe3 ;


 }


 de côté {


 largeur: 30 % ;


 rembourrage gauche: 0,5 rem ;


 marge-gauche: 1 rem ;


 fléchir: gauche ;


 box-shadow: encart 5px 0 5px -5px vert ;


 style de police: italique ;


 La couleur rouge;


 }


 de côté > p {


 marge: 0,5 rem ;


style>


<corps>


<principal>


<h1> Oiseaux tisserandsh1>


<p>Les Ploceidae sont une famille de petits passereaux. Beaucoup d'entre eux sont appelés tisserands, oiseaux tisserands, pinsons tisserands et évêques.p>


<de côté>


<p>Royaume: Animalia
 Phylum: Chordésp>


de côté>


<p>Dans les classifications les plus récentes, les Ploceidae sont un clade, excluant certains oiseaux qui ont historiquement été placés dans la famille. Certains des moineaux, mais comprend la sous-famille monotypique Amblyospizinae.p>


principal>


corps>
html>

6.

Le L'élément contient une partie de la page sans élément sémantique spécifique. Les sections peuvent avoir un titre pour introduire le contenu et inclure d'autres éléments HTML. représente les composants d'une page Web comme les chapitres d'un livre ou d'un blog.

html>
<html>


<corps>


<h1>La Bibleh1>


<section>


<h2>Introductionh2>


<p>La Bible est un recueil d'écritures religieuses sacrées dans le christianisme, le judaïsme, le samaritain. La Bible est une anthologie – une compilation de textes de diverses formes – écrit à l'origine en hébreu, en araméen et en grec koine.p>


section>


<section>


<h2>Chapitre un: Genèseh2>


<p>Le livre de la Genèse est le premier livre de la Bible hébraïque et de l'Ancien Testament chrétien. Son nom hébreu est le même que son premier mot, Bereshit. La Genèse est un récit de la création du monde, des débuts de l'histoire de l'humanité, des ancêtres d'Israël et des origines du peuple juifp>
section>


corps>
html>

Cela ressemble à ça :

7.

Le L'élément contient des illustrations autonomes telles que des images ou des diagrammes. Ces illustrations font référence au contenu de la page principale. Les figures sont accompagnées de légendes spécifiées par le élément. Le explique de quoi parle l'image. Le

,
,
et le contenu représentent une seule unité.

html>
<html>


<corps>


<principal>


<section>


<h1>Parties d'un ordinateurh1>


<p> Il y a plusieurs parties qui fonctionnent ensemble pour constituer un ordinateurp>


<chiffre>


<imagesrc="une-url.jpg"autre="souris d'ordinateur">


<légende>Ceci est une souris d'ordinateurlégende>


chiffre>


section>


principal>


corps>
html>
Cela ressemble à ça:

Vous pouvez aller plus loin et apprendre comment créer des images réactives en HTML.

Le L'élément HTML contient des informations dans la partie inférieure de la page Web. C'est le contraire de la élément. Le peut contenir des informations sur le propriétaire de la page. Cela inclut les données de copyright ou des liens vers des informations supplémentaires du site.

html>
<html>


<corps>


<principal>


<section>


<h1>Parties d'un ordinateurh1>


<chiffre>


<imagesrc="une-url.jpg"autre="souris d'ordinateur">


<légende>Ceci est une souris d'ordinateurlégende>


chiffre>


section>


principal>


<bas de page>


<p> Fabriqué par Computer Tech © 2023p>


bas de page>


corps>
html>

Le code ci-dessus ajoute un pied de page au Parties d'un ordinateur page comme indiqué dans l'image suivante.

Pourquoi utiliser des éléments HTML sémantiques?

L'utilisation d'éléments HTML sémantiques donne un contexte au code. Quiconque regarde le code peut facilement le comprendre. Les balises facilitent le style des éléments et la collaboration sur des projets.

Vous pouvez utiliser du HTML sémantique avec des bibliothèques et des frameworks frontaux. La plupart des navigateurs Web modernes préfèrent les éléments HTML sémantiques aux éléments traditionnels. Commencez à utiliser le HTML sémantique et regardez votre code paraître moderne, lisible et présentable.