Liste des balises HTML5

Pour un commentaire

`<!DOCTYPE>`

L'inclusion du DOCTYPE dans un document HTML assure que le navigateur interprétera la version HTML ainsi déclarée.
En HTML5 le doctype à déclarer est : <!DOCTYPE html>.

`<a>`

Utilisée pour les hyperliens. Attention : l'attribut "name" n'existe plus pour les liens.

Sequential link types (déclaration : "rel")

"alternate"
"author"
"bookmark"
"external"
"help"
"icon"
"license"
"nofollow"
"noreferrer" est implémenté dans Webkit mais non utilisé par Safari et Chrome.
"pingback"
"prefetch"
"search"
"sidebar"
"stylesheet"
"tag" Confusion possible : Ne doit pas être utilisé dans un tagcloud.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- href
- target
- rel
- media
- hreflang
- type

`<abbr>`

Pour une abréviation. Son attribut "title" ne doit être utilisé que pour l'extension de l'abréviation et rien d'autre.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

exemple

Une nouvelle version d'<abbr title="Hypertext Markup Language">HTML</abbr> est sortie des fourneaux.

`<acronym>`

Non utilisé

`<address>`

Généralement utilisée dans le conteneur <footer>, cette balise est utilisée à la place de la balise <p>, les informations nécessaires pour contacter la ou les auteurs du document cité. Cela peut-être son nom ou un label suivi de son adresse email par-exemple ou adresse postale. Confusion possible : on utilisera la balise <p> pour donner l'adresse postale d'une entreprise sans relation avec l'auteur du document s'y rapportant.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

exemple

<address>
 Ecrit par Jacques : 
 <a href="mailto:jmartinet@domaine.com">contactez-moi</a>
</address>

`<applet>`

Non utilisé

`<area>`

Définie une zone ou plusieurs zones pour une carte image. Cette balise s'utilise toujours avec la balise <map>.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- alt
- coords
- shape
- href
- target
- rel
- media
- hreflang
- type

`<article>`

Utilisé pour du contenu ayant son propre sens indépendamment du reste des autres éléments de la page, ce contenu est distribuable et réutilisable. Cela peut-être un billet de forum, un article de journal, un gadget, un commentaire d'utilisateur... La balise <article> peut avoir son propre header et footer. Confusion possible avec la balise <section> qui regroupe des éléments de thématique identique.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

exemple

<article> 
 La conférence sur l'utilisation des standards du Web a prouvé que (...)
</article>

ou

<article>
 <p>La conférence sur l'utilisation des standards du Web a prouvé que (...)</p>
</article>

`<aside>`

Balise de structure supposant avoir un titre de type <h1>. Cette balise permet de regrouper des informations non essentielles relatives au site Web. Lorsque la balise <aside> se trouve dans un article, son contenu se réfère à l'article lui même et non au site Web (par exemple des notes de pages, un glossaire ou tout élément relatifs à l'article).
Confusion : La sidebar d'une page n'a pas pour obligation d'être dans une balise <aside>.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<audio>`

Pour lire un fichier audio.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- src
- preload
- autoplay
- mediagroup
- loop
- muted
- controls

exemple

<audio controls="controls">
 <source src="concerto_mozart.ogg" type="audio/ogg" /> 
 <source src="concerto_mozart.mp3" type="audio/mp3" />
 Votre navigateur ne supporte pas la balise audio.
</audio>

`<b>`

Utilisé dans un paragraphe pour une partie de texte en gras, sémantiquement faible, on lui préférera la balise <strong> pour donner de l'importance au texte.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<base>`

Cette balise permet de définir l'URL de base (l'utilisation de cette balise est parfois controversée).

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- href
- target

`<basefont>`

Non utilisé . (On peut tout de même encore la trouver dans l'intégration HTML4 de newsletters pour déclarer des polices.)

`<bdo>`

Utilisé pour la direction d'un texte. Attention, l'attribut "dir" à une valeur sémantique différente pour cette balise.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<bdi>`

Utilisé pour la direction d'un texte.Attention, l'attribut "dir" à une valeur sémantique différente pour cette balise.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<big>`

Non utilisé

`<blockquote>`

Pour une longue citation venant d'une source externe, l'adresse de la source peut-être indiquée dans l'attribut "cite". Dans le cas d'un forum de discussion ou d'un blog, un utilisateur peut utiliser cette balise pour citer le commentaire d'un autre utilisateur. Nous n'utiliserons pas cette balise pour un dialogue. Confusion possible avec la balise <q>.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s) :
- cite

exemple

<p>Victor Hugo nous dit :</p>
 <blockquote cite="http://www.victor-hugo.com/x.html">
 <p>L'appétit vient en mangeant et l'amour en possédant.</p>
</blockquote>

`<body>`

Partie principale du document HTML.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- onafterprint
- onbeforeprint
- onbeforeunload
- onblur
- onerror
- onfocus
- onhashchange
- onload
- onmessage
- onoffline
- ononline
- onpagehide
- onpageshow
- onpopstate
- onredo
- onresize
- onscroll
- onstorage
- onundo
- onunload

`<br>`

Utilisée dans un paragraphe, cette balise permet de créer un saut de ligne.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<button>`

Pour un bouton. il peut être utilisé comme commande.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- autofocus
- disabled
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- name
- type
- value

`<canvas>`

Pour créer un graphique avec la possibilité de l'animer avec du JavaScript.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- width
- height

exemple

<canvas id="myCanvas"></canvas>

<script type="text/javascript">
 	var canvas=document.getElementById('myCanvas');
 	var ctx=canvas.getContext('2d');
 	ctx.fillStyle='#FF0000';
 	ctx.fillRect(0,0,80,100);
</script>

`<caption>`

Pour le titre d'un tableau. Note : En HTML5, l'attribut "summary" de la balise "table' n'est plus valide et ne doit pas être utilisé.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

exemple

<table>
 <caption>Monthly savings</caption> 
 <tr>
   <th>Month</th>
     <th>Savings</th>
   </tr>
   <tr>
     <td>January</td>
     <td>$100</td>
   </tr>
</table>

`<center>`

Non utilisé

`<cite>`

Utilisée pour le titre d'une oeuvre, d'un document ou d'un évènement. Cette balise peut-être peut-être utilisée conjointement avec la balise <q>. Cette balise ne peut être utilisée pour une personne.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

exemple

<p>Mon livre préféré est <cite>Les misérables</cite> de Vitor Hugo</p>

`<code>`

Pour déclarer du code informatique. On peut l'utiliser à l'intérieur de la balise <pre> pour du texte pré formaté. On recommande d'utiliser une classe avec le nom du langage informatique cité dans cette balise. On peut ajouter un classe pour décrire le type de langage utilisé dans la balise exemple : <code class="language-javascript">. Confusion possible avec la balise <samp>.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

exemple

<code>
teardown: function() {
if ( this.removeEventListener ) { ... }
}
</code>

`<col>`

Utilisé pour créer des colonnes dans un tableau.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- span

`<colgroup>`

Utilisé pour créer des groupes de colonnes dans un tableau.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- span

`<command>`

Cette balise est utilisée comme un bouton, un radiobutton, ou un checkbox. Elle ne peut être visible qu'à l'intérieur de la balise <menu>, dans le cas contraire, elle ne sera pas visible et utilisée comme raccourcis clavier. Attention, l'attribut "title" à une valeur sémantique différente pour cette balise.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- type
- label
- icon
- disabled
- checked
- radiogroup

`<datalist>`

Pour une liste déroulante.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<dd>`

Pour la description d'une définition, s'utilise avec la balise <dl>.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<del>`

Utilisé pour indiquer qu'une partie de texte est supprimée, mais conservée pour en garder la trace, on la stylisera en CSS. On peut utiliser cette balise conjointement avec la balise <ins> pour indiquer le nouveau texte qui est à prendre en compte. Confusion possible avec la balise <s>qui indique qu'un texte n'est pas correct ou non pertinent.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- cite
- datetime

`<details>`

Pour apporter des détails sur Widget, il peut être utilisé pour cacher/afficher des informations complémentaires. Il peut être le conteneur de la balise <summary>.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- open

exemple

<details>
 <summary>Copyright 1999-2011.</summary>
 <p>Ces images sont sous copyright (...)</p>
</details>

`<dfn>`

Représente le terme d'une définition, on l'utilise dans un paragraphe ou une liste de définitions. On peut utiliser cette balise conjointement avec <abbr>. Dans la même section, il est possible de créer un lien pointant sur cette définition, utile pour la création d'infobulle par exemple.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

exemple

<p>Le <dfn>SEO</dfn> est un ensemble de techniques pour référencer un site Web</p>

`<dir>`

Non utilisé

`<div>`

Balise sans valeur sémantique réelle, elle sert de conteneur pour une mise en forme en CSS. Cette balise doit être utilisée en dernier recours, lorsqu'aucune autre balise ne peut convenir.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<dl>`

Pour une liste de définitions. Confusion possible : cette balise ne peut être utilisée pour créer des dialogues, les balises <p> restant appropriées.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<dt>`

Pour déclarer une définition, s'utilise avec la balise <dl>.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<em>`

Utilisé dans un paragraphe pour mettre une partie de texte en emphase.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<embed>`

Utilisé pour du contenu externe et interactif ou pour un plug-in.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- src
- type
- width
- height

exemple

<embed src="flash_jeux_des_souris.swf" />

`<fieldset>`

Pour regrouper des éléments d'un formulaire.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- disabled
- form
- name

`<figcaption>`

Utilisée dans le conteneur <figure>, avant ou après le contenu, cette balise permet d'écrire une légende ou une description.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

exemple

<figure>
   <figcaption>Jijy, le chat de Stéphanie</figcaption>
   <img src="jiji.jpg" width="304" height="228" />
</figure>

`<figure>`

Utilisée pour regrouper un ou plusieurs médias ( illustrations, diagrammes, exemples de code, photos...) attachés au document sans pour autant en suivre le flux. Les images s'y trouvant n'ont pas obligation d'être inséré dans une balise <p> et dans le cas d'une liste d'images, on peut omettre les listes à puce. On utilisera la balise figcaption pour décrire les médias utilisés. Confusion : cette balise ne doit être utilisée dès qu'il y a une image dans un article, on peut aussi la confondre avec la balise <aside>.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

exemple

<figure>
 <p>Stéphanie a un chat qui s'appelle Jiji</p>
 <img src="jiji.jpg" width="304" height="228" />
</figure>

`<font>`

Non utilisé

`<footer>`

Regroupe des informations de bas de page dans une section ou un article. Cette balise permet d'ajouter des liens de navigation sans utilisation de la balise <nav>.

attributs

exemple

<section>
 <article>
 <p>Voici un article....</p>
 </article>
 <footer>
 <p>L'ensemble de la section est écrit par le Directeur des ventes</p>
 </footer>
</section>

`<form>`

Pour un formulaire.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- accept-charset
- action
- autocomplete
- enctype
- method
- name
- novalidate
- target

`<frame>`

Non utilisé

`<frameset>`

Non utilisé

<h1> à <h6>

Utilisés pour la hiérarchisation des titres.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<head>`

Pour les informations d'en tête du document HTML.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<header>`

Pour l'entête d'une section et/ou d'une page, cette balise est utile pour une introduction et/ou des éléments de navigation. Cette balise peut-être utilisée dans la balise <section> et dans la balise <article>.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

exemple

<header> 
 <h1>Rapport des ventes</h1>
 <p>Le rapport sera présenté aux membres du groupe</p>
</header>

Autre exemple :

<header> 
 <h1>Rapport des ventes</h1>
 <nav>
 <ul>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
 </ul>
 </nav>
</header>

`<hgroup>`

Non utilisé - (Regroupe des titres de niveau Hn dans la balise <head> à noter : cette balise a été supprimée puis réintégrée puis re-supprimée).

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<hr>`

Permets de créer une ligne de séparation.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<html>`

Déclaration du document HTML. On lui rajoutera l'attribut lang pour déclarer la langue utilisée.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
manifest

`<i>`

Utilisée dans un paragraphe pour indiquer qu'une partie du texte est différent du reste. Il ne faut pas utiliser cette balise lorsque <b>, <cite>,<dfn>,<em>,<q>,<small> ou <strong> peuvent être utilisées. Note : Certains analyseurs de site nous disent que cette balise est obsolète, ce qui est totalement faux.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<iframe>`

Pour créer une sous-fenêtre.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- src
- srcdoc
- name
- sandbox
- seamless
- width
- height

`<img>`

Pour déclarer une image.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- alt
- src
- usemap
- ismap
- width
- height

`<input>`

Pour un champ de texte.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- accept
- >alt
- autocomplete
- autofocus
- checked
- dirname
- disabled
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height
- list
- max
- maxlength
- min
- multiple
- name
- pattern
- placeholder
- readonly
- required
- size
- src
- step
- type
- value
- width

`<ins>`

Pour insérer un nouveau texte dans un document révisé. On peut utiliser cette balise avec <del> qui permet d'indiquer qu'une portion de texte n'est plus valable.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- cite
- datetime

`<keygen>`

L'élément keygen représente un contrôle de générateur de clé stockée dans "keystore local".

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- autofocus
- challenge
- disabled
- form
- keytype
- name

`<kbd>`

Lorsque le texte est utilisé pour définir des actions au clavier.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<label>`

Étiquette utilisée comme titre d'une commande.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- form
- for

`<legend>`

Titre du fieldset auquel il se rapporte.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<li>`

Item d'une liste ordonnée ou à puce.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- reversed
- start
- type

`<link>`

Permets de lier une ressource externe à la page HTML. Attention l'attribut "title" à une valeur sémantique différente.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- href
- rel
- media
- hreflang
- type
- sizes

`<main>`

Pour déclarer "LE" contenu important d’une page HTML, cette balise ne peut donc être utilisée qu’une fois par page -> ce qui veut dire que le header principal ainsi que le footer principal sont des parties différentes. Les balises <article> , <aside> , <footer> , <header> ou <nav> ne peuvent pas contenir la balise <main>, par contre, on peut mettre ces balises à l'intérieur de <main>, là, il n'y a pas de soucis.

exemple

<!doctype html>
  <html>
      <head>
          <title>Exemple de la balise MAIN</title>
     </header>
  <body>
      <header
         <h1>Mon site Web</h1>
      </header>
      <main>
          <article>
              <section>....</section>
              <section>...</section>
           </article>
      </main>
      <footer>...</footer>
  </body>
</html>

`<map>`

Utilisée pour créer une carte d'image avec des zones réactives. L'attribut "name" est obligatoirement requis.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- name

`<mark>`

Pour marquer du texte, par exemple surligner un résultat de recherche. On stylisera cette balise en CSS.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<menu>`

Pour une liste de commande. Confusion possible avec la balise <nav>.

attributs

`<meta>`

Permets d'ajouter des métas à la page HTML.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- name
- http-equiv
- content
- charset

`<meter>`

Pour les mesures.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- value
- min
- max
- low
- high
- optimum
- form

`<nav>`

Pour regrouper des liens qu'ils soient internes à la page ou pour des pages liées. Il est recommandé, mais non obligatoire d'utiliser les listes à puce pour lister les liens.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

exemple

<nav>
   <a href="index.php">Accueil</a>
   <a href="blog.php">Le blog de l'entreprise</a>
   <a href="contact.php">Nous contacter</a>
</nav>

ou

<nav>
 <ul>
   <li><a href="index.php">Accueil</a></li>
   <li><a href="blog.php">Le blog de l'entreprise</a></li>
   <li><a href="contact.php">Nous contacter</a></li>
 </ul>
</nav>

`<noframes>`

Non utilisé

`<noscript>`

Utilisée pour indiquer un message dans le cas où JavaScript serait désactivé.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<object>`

Pour déclarer un objet.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- data
- type
- name
- usemap
- form
- width
- height

`<ol>`

Utilisé pour les listes ordonnées.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- reversed
- start
- type

`<optgroup>`

Pour grouper des informations dans une liste déroulante.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- disabled
- label

`<option>`

Pour déclarer un item dans une liste déroulante. Peut-être utilisé comme "commands".

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- disabled
- label
- selected
- value

`<output>`

Représente le résultat d'un calcul.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- for
- form
- name

`<p>`

Définis un paragraphe contenant une ou plusieurs phrases. Cette balise ne doit pas être utilisée si une autre balise est mieux indiquée.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<param>`

Pour paramétrer un objet.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- name
- value

`<pre>`

Ecrire un texte préformaté. L'utilisation de la balise <p> n'est pas obligatoire. Peut-être lui même le conteneur de la balise <code>.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

exemple

<pre>
 Le texte dans une balise "pre" est affiché avec une largeur fixe.
 Les sauts de lignes et les espaces sont respectés.
 Attention à ne pas mettre l'attribut "white-space:normal" dans la CSS, sinon, les sauts de lignes ne seront pas actifs.
</pre>

`<progress>`

Pour une barre de progression.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- value
- max
- form

`<q>`

Utilisée pour une citation courte provenant d'une ressource externe. Si l'on connait l'URL de la source de la citation, on pourra l'indiquer grâce à l'attribut "cite". Dans tous les autres cas, on utilise les guillemets sans balise spécifique. On peut aussi utiliser la balise <cite> pour citer un auteur. Confusion possible avec la balise <blockquote>.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- cite

exemple

<p>Dans la page du rapport trimestriel <cite>Augmenter vos ventes</cite>,
 on nous dit que <q cite="http://www.rapport-x/x.html>pour être efficace,
 nous devons regrouper nos compétences</q>.</p>

`<rp>`

Utilisé en annotations ruby pour définir ce qui est à montrer aux navigateurs ne supportant les éléments ruby.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<rt>`

Pour expliquer des annotations en Ruby.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<ruby>`

Utilisé pour des annotations en Ruby.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<s>`

Utilisé pour identifier une partie de texte qui n'est pas correct ou non pertinent. Confusion possible avec la balise <del>qui permet d'indiquer qu'un texte doit être remplacé ou supprimé.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<samp>`

Utilisée dans un paragraphe pour écrire un échantillon de code. Confusion possible avec la balise <code>.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<script>`

Pour ajouter un script internet ou externe.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- src
- async
- defer
- type
- charset

`<section>`

Utilisée pour regrouper des éléments différents, mais partageant la même thématique Cette balise est le plus souvent utilisé avec un header.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<select>`

Pour une liste déroulante.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- autofocus
- disabled
- form
- multiple
- name
- required
- size

`<small>`

(Attention la balise a été redéfinie, elle ne sert plus à minimiser un texte).
La balise small est utilisée comme contenu relatif mais non essentiel. On utilisera pour déclarer un copyright, des disclaimers, des mises en garde...

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<source>`

Utilisée dans les balises <video> et <audio> pour indiquer l'url et le type des médias.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- src
- type
- media

`<span>`

Utilisée pour mettre en style une portion de texte qui se différencie des autres. Cette balise ne doit pas être utilisée si une autre balise de formatage de texte convient mieux.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<strike>`

Non utilisé, la balise del remplace cette balise.

`<strong>`

Utilisé dans un paragraphe pour mettre un texte en gras.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<style>`

Permets de définir un style dans le document HTML. Attention, l'attribut title à une valeur sémantique différente pour cette balise.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- media
- type
- scoped

`<sub>`

Déclarer un indice : Petit caractère placé en bas et à droite d'un autre caractère.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<summary>`

Généralement utilisé à l'intérieur du conteneur <detail>, il permet de décrire le sommaire, la légende ou le titre d'un élément.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<sup>`

Déclarer un exposant : petit caractère placé en haut et à droite d'un autre caractère.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<table>`

Pour un tableau. Note : En HTML5, l'attribut summary utilisé en accessibilité n'est plus valide et ne doit pas être utilisé : la balise <caption> devient indispensable.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- border

`<tbody>`

Utilisé pour le corps d'un tableau.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<td>`

Pour déclarer une cellule dans un tableau.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- colspan
- rowspan
- headers

`<textarea>`

Pour a champ de saisi.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- autofocus
- cols
- dirname
- disabled
- form
- maxlength
- name
- placeholder
- readonly
- required
- rows
- wrap

`<tfoot>`

Utilisé pour le pied de page d'un tableau.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<th>`

Pour déclarer une cellule dans l'entête d'un tableau.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- colspan
- rowspan
- headers
- scope

`<thead>`

Utilisé pour l'entête d'un tableau.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<time>`

Pour déclarer une date ou une heure.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- datetime
- pubdate

`<title>`

Pour le titre de la page HTML en cours de lecture.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<tr>`

Pour déclarer un champ dans un tableau.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<track>`

Barre pour indiquer une portion de temps.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- kind
- src
- srclang
- label
- default

`<tt>`

Non utilisé

`<u>`

Non utilisé, cette balise créée une confusion avec la balise <a> au niveau des styles

`<ul>`

Pour créer une liste à puces.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<var>`

Pour déclarer une variable.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

`<video>`

Pour lire une video.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Attribut(s) spécifique(s)
- src
- poster
- preload
- autoplay
- mediagroup
- loop
- muted
- controls
- width
- height

`<wbr>`

Balise non fermante à utiliser à l'intérieur d'un mot long pour forcer un retour à la ligne.

attributs

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

exemple

<p>
 Yoochun a fait une faute d'orthographe sur le mot anti<wbr>trust, son ami Junsu l'a corrigé.
</p>

`<xmp>`

Non utilisé

Définition des balises HTML5

<!DOCTYPE>

<a>

<abbr>

<acronym>

<address>

<applet>

<area>

<article>

<aside>

<audio>

<b>

<base>

<basefont>

<bdo>

<bdi>

<big>

<blockquote>

<body>

<br>

<button>

<canvas>

<caption>

<center>

<cite>

<code>

<col>

<colgroup>

<command>

<datalist>

<dd>

<del>

<details>

<dfn>

<dir>

<div>

<dl>

<dt>

<em>

<embed>

<fieldset>

<figcaption>

<figure>

<font>

<footer>

<form>

<frame>

<frameset>

<h1> à <h6>

<head>

<header>

<hgroup>

<hr>

<html>

<i>

<iframe>

<img>

<input>

<ins>

<keygen>

<kbd>

<label>

<legend>

<li>

<link>

<main>

<map>

<mark>

<menu>

<meta>

<meter>

<nav>

<noframes>

<noscript>

<object>

<ol>

<optgroup>

<option>

<output>

`<!DOCTYPE>`

`<a>`

`<abbr>`

`<acronym>`

`<address>`

`<applet>`

`<area>`

`<article>`

`<aside>`

`<audio>`

`<b>`

`<base>`

`<basefont>`

`<bdo>`

`<bdi>`

`<big>`

`<blockquote>`

`<body>`

`<br>`

`<button>`

`<canvas>`

`<caption>`

`<center>`

`<cite>`

`<code>`

`<col>`

`<colgroup>`

`<command>`

`<datalist>`

`<dd>`

`<del>`

`<details>`

`<dfn>`

`<dir>`

`<div>`

`<dl>`

`<dt>`

`<em>`

`<embed>`

`<fieldset>`

`<figcaption>`

`<figure>`

`<font>`

`<footer>`

`<form>`

`<frame>`

`<frameset>`

`<head>`

`<header>`

`<hgroup>`

`<hr>`

`<html>`

`<i>`

`<iframe>`

`<img>`

`<input>`

`<ins>`

`<keygen>`

`<kbd>`

`<label>`

`<legend>`

`<li>`

`<link>`

`<main>`

`<map>`

`<mark>`

`<menu>`

`<meta>`

`<meter>`

`<nav>`

`<noframes>`

`<noscript>`

`<object>`

`<ol>`

`<optgroup>`

`<option>`

`<output>`

`<p>`

`<param>`

`<pre>`