Sémantique HTML - Texte sémantique avec XHTML

Structure les paragraphes.

<p>Je suis un paragraphe</p>

On ne peut pas imbriquer un paragraphe dans un autre. Et la précence de balise "block" n'y est pas recommandée.

Titre du plus important (H1) au moins important (H6) :

<h1>Titre de la page</h1>
<h2>Titre d'une section</h2>

<h3>Titre partie</h3>
<h4>Titre sous-partie</h4>
<!-- etc... -->

Les titres, et principalement les H1, H2 voir H3 sont important pour le référencement des contenus

Bloc de citation (citation de paragraphe entier, de texte, etc...)

La balise supporte un attribut cite, la valeur doit contenir une référence à la source (URL)

<blockquote cite="http://fr.wikipedia.org/wiki/Shining_%28film%29#Le_labyrinthe">
 <h3>Le labyrinthe</h3>

 <p>Le labyrinthe est un lieu important dans le film car c'est là que se  
passe la scène finale durant laquelle Jack meurt congelé. Il est  introduit 
dès la première visite de l'hôtel et rappelé de manière  insistante par 
les motifs de ses moquettes où joue le petit Danny.</p>
<p>La  symbolique du labyrinthe est donc très présente et se traduit 
notamment à  travers les décors.</p>
</blockquote>

La balise blockquote peut contenir des balises.

Balise de préformattage, le texte pésent dedans est redu tel que dans la source

<pre>
   Précédé de 3 espaces blancs
      A la ligne et précédé de 6 espaces
</pre>

Cetta balise est très populaire dans des documentations / blogs qui proposent des sources à copier/coller pour les développeurs, certaines libraries Javascript permettent de colorer le code de cette balise (comme dans cette page).

Balise purement sémantique déstinée à représenter une adresse.

<address>
   Lieu dit "la clos", 14350 Le Reculey

</address>

Texte mis en évidence :

<em>Texte en évidence</em>

Texte important

<strong>Texte important</strong>

Exposant et indice

<p>texte en <sub>indice</sub></p>

<p>texte en <sup>exposant</sub></p>

Affichage des abréviations et des acronymes

<p>Acronyme : <acronym title="Hyper Text Markup Language">HTML</p>
<p>Abréviation : <abbr title="Téléphone">Tél<abbr></p>

L'attribut title est très important, d'une part il ajoute une info-bulle sur le texte balisé, et il sera lu par les logiciels de reconnaisance vocale.

Attention, il n'est pas recommandé de séparer les lettres d'un acronyme par des points car les logiciels de reconnaissance vocales les lisent, il en va de même pour les abréviations.

Citation en ligne (dans une phrase)

La balise supporte un attribut cite, la valeur doit contenir une référence à la source (URL)

<p>Comme le disait Jack Torrance : 
<q lang="en" cite="http://fr.wikipedia.org/wiki/Shining_%28film%29">All work and 
no play make jack a bull boy</q></p>

Permet d'afficher dans une ligne des fragments de code :

<p>La balise <code>p</code> permet de définir un paragraphe</p>

Entoure une référence (Titre d'un livre ou d'un document de référence, nom d'une musique, album, etc...). A ne pas confondre avec la balise q qui entoure une citation textuelle.

<p>Il a également réalisé <cite>Shinning</cite> et <cite>Full metal jacket</cite></p>

http://dev.w3.org/html5/markup/cite.html#cite

Représente une variable, ou un paramètre :

Normalise la représentation des modifications dans un document. Ce sont des balises un peu particulières car elles peuvent entourer des élements block ou inline.

Cependant de par leur fonction, si elles sont utilisées comme un élément inline (correction d'un texte par exemple), elle ne doivent pas contenir d'élément inline.

Ces balises ont 2 attributs recommandés :

• cite : URI, où l'on trouve l'explication concerant la dites modification
• datetime : Date de la modification

Les données de type datetime doivent être au format ISO8601 : YYYY-MM-DD hh:mm:ss

<p>

  La balise <code>a</code> <del>a un attribut <var>target</var>, vous pouvez utiliser la 
  valeur <var>_blank</var> pour ouvrir la cible du lien dans une nouvelle fenêtre.</del>

  <ins> n'a plus d'attribut <var>target</var></ins>
</p>

Représente un extrait (d'un programme / script ).

Initialement pour représenter des saisies au clavier, est utiliser pour représenter une saisie de l'utilisateur (Saisie clavier, raccourcis, etc...)

<p>
  Pour ouvrir la fenêtre d'information vous devez faire <kbd>Ctrl + i</kbd> ou passer 
  par le menu <kbd>Fenêtre > Informations</kbd> 
</p>

Utilisée pour représenter des notes de moindre importances (Disclamer,infos légales, copyright).