Informatique


Les balises sémantiques

Aller à

Remédiation

Pourquoi utiliser des balises sémantiques?

Les BS 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 toujours ul, jamais ol
  8. pour les contenus, utiliser les BS de contenu.

Paragraphes et titres

Les paragraphes (<p>) englobent du texte, des images, des formulaires, etc.
Les balises de titre (<h1> à <h6>) englobent des titres, la balise <hgroup> permet de grouper plusieurs titres de niveaux différents.
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>	
	

Le texte proprement dit

<strong>: indique un texte important, elle améliore également le référencement sur ces mots ou expressions.

<i>: utiliser pour les mots qui ne sont pas les vôtres, pour les mots techniques ou étrangers.

<em>: utiliser pour l'emphase, c'est-à-dire pour insister sur le sujet principal du propos.

<small>: utiliser pour les "petites lignes" qui sont typiquement les conditions générales ou des précisions de bas de page.

<cite>: utiliser pour citer un nom d'oeuvre (livres, essais, chansons, poèmes,etc.).

<mark>: utiliser pour faire ressortir une portion du texte. Par défaut le surlignage est jaune.

Démo
<section>	
	<p>Avec strong: bienvenue dans le monde de <strong>HTML</strong>, l'HTML  est le langage de mise en page du WWW.</p>
	<p>Avec i: un bon <i>backup</i> me semble indispensable.</p>
	<p>Avec em: les <em>chats sont mignons</em>.</p>
	<p>Avec small : mes <small>conditions générales pour l'utilisation du site</small> sont importantes.</p>
	<p>Avec cite: <cite>Les Passantes</cite> de Brassens, magnifique!.</p>
	<p>Avec mark: <mark>la Joconde</mark> est au musée du Louvre.</p>
</section>

Les balises universelles <div> et <span>

<div> et <span> sont appelées des balises universelles car elles ne provoquent aucun effet de mise en page et n'ont aucun sens sémantique.
<span> est de type inline et <div> est de type block.

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