Informatique


Les balises structurantes du document

Aller à

Remédiation

Les balises sont sémantiques

Les balises sont utilisées par les moteurs de recherche, ceux-ci classent les pages dans les BD en fonction de l'organisation sémantique du code.
Toutes les balises du codes sont susceptibles d'être utilisées pour le référencement (sauf <span> et <div>).
Toutefois, il faudra travailler en respectant les priorités suivantes:
  1. Commencer le document par doctype pour indiquer que vous codez en HTML standardisé
  2. Respecter la structure générale d'un document html (html, head, body)
  3. Structurer chaque page au moyen des balises structurantes (header, nav, section, article, aside et footer)
  4. utiliser les balises Hx pour les titres, et éventuellement hgroup
  5. utiliser p pour les paragraphes
  6. pour les tableaux, utiliser caption pour le titre et th pour les en-têtes des colonnes
  7. pour les listes, utiliser ul et ol

Les titres <h1> à <h6> et <hgroup>

Les balises de titre (<h1> à <h6>) englobent des titres, la balise <hgroup> permet de grouper plusieurs titres de niveaux différents.
les effets de la balise <Hx>
  • retour à la ligne
  • espace avant
  • espace après
  • augmentation de la taille des caractères (de <h1> à <h6>)
  • mise en gras

Les paragraphes

Les paragraphes (<p>) englobent du texte, des images, des formulaires, etc.

les effets de la balise <p>
  • retour à la ligne
  • espace avant
  • espace après
Démo
	<section>
	<div>
	<h1>My very beau site</h1>
		<h3>Introduction</h3>
			<p>Qu'il est beau mon beau site...</p>
			<p>Pour être beau, il est beau...</p>
	</div>	
	</section>	
	

Les listes

Il existe deux listes, <ul> pour les listes non ordonnées et <ol> pour les listes ordonnées.
les listes peuvent être imbriquées.

Démo
<section>	
<ul>
	<li>Pierre</li>
	<li>Paul</li>
	<li>Jacques le Majeur</li>
	<li>Jacques le Mineur</li>
	<li>Thomas</li>
	<li>Judas</li>
</ul>
</section>
Démo
<section>	
<ol>
	<li>Préparation des légumes
		<ul>
			<li>Eplucher les carottes</li>
			<li>Emincer l'oignon</li>
			<li>Couper grossièrement le basilic</li>
		</ul>
	</li>
	<li>Préparer la sauce
		<ul>
			<li>Faire fondre le beurre </li>
			<li>Faire revenir l'oignon émincé</li>
			<li>Verser une boîte de tomate pelée</li>
		</ul>
	</li>
	<li>Ajouter le basilic et server</li>
</ol>
</section>
les effets des balise <ul> et <ol>:
  • retour à la ligne
  • espace avant
  • espace après
les effets des balise <li>:
  • retour à la ligne
  • présence d'une puce

La balise universelle <div>

<div> est appelée balise universelle car elle n'a aucun sens sémantique.

Les divisions (div) s'utilisent lorsque l'on désire un container qui sémantiquement ne signifie pas "paragraphe" ou "titre".