Sunteți pe pagina 1din 6

LISTE DES BALISES

EN HTML5
AIDE-MMOIRE HTML&CSS

www.multiforme.eu

DEFINITION DES BALISES


BALISE

DESCRIPTION

<!-- ... -->


<!DOCTYPE>

Pour un commentaire
Linclusion du DOCTYPE dans un document HTML assure que le navigateur interprtera le HTML



selon les spcifications dont le doctype se rapporte. En HTML5 le doctype dclarer est : <!DOCTYPE html>.
<a>

Utilise pour les hyperliens. Attention : lattribut name nexiste plus pour les liens.
<abbr>

Pour une abrviation. Son attribut title ne doit tre utilis que pour lextension de labrviation et rien dautre.
<address>
Gnralement utilise dans le conteneur <footer>, cette balise est utilise la place de la balise <p>,

les informations ncessaires pour contacter la ou les personnes auteurs du document cit.
<area>

Dfinie une zone ou plusieurs zones pour une carte image. Cette balise sutilise toujours avec la balise <map>.
<article> Nouveau ! Utilise pour du contenu ayant son propre sens indpendamment du reste des autres lments de la
page, ce contenu est distribuable et rutilisable. Cela peut-tre un billet de forum, un article de journal, un gadget, un commentaire
dutilisateur... La balise <article> peut avoir son propre header et footer. Confusion possible avec la balise <section> qui regroupe des
lments de thmatique identique.
<aside> Nouveau ! Balise de structure, elle permet de regrouper des informations non essentielles



et qui chappent au flux naturel du document.
<audio> Nouveau ! Pour un fichier audio.
<b>

Utilise dans un paragraphe pour une partie de texte en gras, smantiquement faible,



on lui prfrera la balise <strong> pour donner de limportance au texte.
<base>

A dclarer quune fois par page HTML, cette balise permet de dfinir lURL par dfaut pour toutes les URL
<blockquote>
Pour une longue citation. Confusion possible avec la balise <q>.
<body>
Partie principale du document HTML.
<br>

Utilise dans un paragraphe, cette balise permet de crer un saut de ligne.
<button>

Pour un bouton. il peut tre utilis comme commande.
<canvas> Nouveau ! Pour dfinir un graphique.
<caption>
Pour le titre dun tableau.
<cite>

Utilise pour le titre dune oeuvre, dun document ou dun vnement.



Cette balise peut-tre peut-tre utilise conjointement avec la balise <q> pour citer lauteur de la citation.
MEMO

I 2

DEFINITION DES BALISES


<code>


Pour dclarer du code informatique, on peut lutiliser lintrieur de la balise <pre> pour du texte pr format. On
recommande dutiliser une class avec le nom du langage informatique cit dans cette balise.

<col>

<colgroup>
<command>

Utilise pour crer des colonnes dans un tableau.


Utilise pour crer des groupes de colonnes dans un tableau.
Nouveau ! Cette balise est utilise comme un bouton, un radiobutton, ou un checkbox. Elle ne peut tre visible qu
lintrieur de la balise <menu>, dans le cas contraire, elle ne sera pas visible et utilise comme raccourcis clavier. Attention, lattribut
title une valeur smantique diffrente pour cette balise.
<datalist> Nouveau ! Pour une liste droulante.
<dd>

Pour la description dune dfinition, sutilise avec la balise <dl>.
<del>

Utilise pour indiquer quune partie de texte est supprime, mais conserve 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.
<details> Nouveau ! Pour apporter des dtails sur Widget, il peut tre utilis pour cacher/afficher des informations
complmentaires. Il peut tre le conteneur de la balise <summary>. NOTE : Les validateurs demandent de ne pas utiliser cette balise
car encore trop peu implmente dans les navigateurs.
<dfn>

Reprsente le terme dune dfinition, on lutilise dans un paragraphe ou une liste de dfinitions. On peut utiliser cette
balise conjointement avec <abbr>. Dans la mme section, il est possible de crer un lien pointant sur cette dfinition, utilise pour la
cration dinfobulle par exemple.
<div>

Balise sans valeur smantique relle, elle sert surtout de conteneur pour une mise en forme en CSS. Cette balise doit
utilise en dernier recours, lorsquaucune autre balise ne peut convenir.
<dl>

Pour une liste de dfinitions.
<dt>

Pour dclarer une dfinition, sutilise avec la balise <dl>.
<em>

Utilise dans un paragraphe pour mettre une partie de texte en emphase.
<embed> Nouveau ! Utilise pour du contenu externe et interactif ou pour un plug-in.
<fieldset>
Pour regrouper des lments dun formulaire.
<figcaption>
Nouveau ! Utilise dans le conteneur <figure>, avant ou aprs le contenu, cette balise permet dcrire une lgende
ou une description.
<figure> Nouveau ! Utilise pour regrouper un ou plusieurs mdias ( illustrations, diagrammes, exemples de code, photos...)
attachs au document sans pour autant en suivre le flux. Les images sy trouvant nont pas obligation dtre insr dans une balise <p>
et dans le cas dune liste dimages, on peut omettre les listes puce. On utilisera la balise figcaption pour dcrire les mdias utiliss.
MEMO

I 3

DEFINITION DES BALISES


<footer> Nouveau ! Regroupe des informations de bas de page dans une section ou un article. Cette balise permet dajouter

des liens de navigation sans utilisation de la balise <nav>.


<form>
Pour un formulaire.
<h1> <h6>
Utilises pour la hirarchisation des titres.
<head>

Pour les informations den tte du document HTML.
<header> Nouveau ! Pour lentte dune section ou dune page.
<hgroup> Nouveau ! Regroupe des titres de niveau Hn dans la balise <head>
<hr>
Permet de crer une ligne de sparation.
<html>

Dclaration du document HTML. On lui rajoutera lattribut lang pour dclarer la langue utilise.
<i> Redfinie ! Utilise dans un paragraphe pour indiquer quune partie du texte est diffrent du reste. Il ne faut pas
utiliser cette balise lorsque <b>, <cite>,<dfn>,<em>,<q>,<small> ou <strong> peuvent tre utilises. Confusion possible, en HTML5, cette
balise ne sert pas uniquement mettre un texte en italique.
<iframe>

Pour crer une sous-fentre.
<img>
Pour dclarer une image.
<input>

Pour un champ de texte.
<ins>

Pour insrer un nouveau texte dans un document rvis.



On peut utiliser cette balise avec <del> qui permet dindiquer quune portion de texte nest plus valable.
<keygen> Nouveau ! Llment keygen reprsente un contrle de gnrateur de cl stocke dans keystore local.
<kbd>

Lorsque le texte est utilis pour dfinir des actions au clavier.
<label>
tiquette utilise comme titre dune commande.
<legend>
Titre du fieldset auquel il se rapporte.
<li>

Item dune liste ordonne ou puce.
<link>

Permet de lier une ressource externe la page HTML.
<map>

Utilise pour crer une carte dimage avec des zones ractives. Lattribut name est obligatoirement requis.
<mark> Nouveau ! Pour marquer du texte, par exemple surligner un rsultat de recherche.



On stylisera cette balise en CSS.
<menu>

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

Permet dajouter des mtas la page HTML.
MEMO

I 4

DEFINITION DES BALISES


<meter> Nouveau ! Pour measurement within a predefined range.
<nav>
Nouveau ! Pour regrouper des liens quils soient internes la page en cours ou pour dautres pages lies, utiliser

cette balise de faon systmatique lui ferait perdre sa valeur smantique, ainsi, dans le footer dun article, on utilisera la balise <p> pour
lister des liens puisque la balise <footer> le permet. Il est recommand, mais non obligatoire dutiliser les listes puce pour lister les liens.
<noscript>
Utilise pour indiquer un message dans le cas o JavaScript serait dsactiv.
<object>

Pour dclarer un objet.
<ol>
Utilis pour les listes ordonnes.
<optgroup>
Pour grouper des informations dans une liste droulante.
<option>
Pour dclarer un item dans une liste droulante. Peut-tre utilis comme commands.
<output> Nouveau ! Reprsente le rsultat dun calcul.
<p>

Dfinis un paragraphe contenant une ou plusieurs phrases.
<param>
Pour paramtrer un objet.
<pre>

Ecrire un texte prformat. Lutilisation de la balise <p> nest pas obligatoire.



Peut-tre lui mme le conteneur de la balise <code>.
<progress>
Nouveau ! Pour une barre de progression.
<q>

Utilise pour une citation courte provenant dune ressource externe. Si lon connait lURL de la source de la citation,
on pourra lindiquer grce lattribut cite. Dans tous les autres cas, on utilise les guillemets sans balise spcifique. On peut aussi utiliser
la balise <cite> pour citer un auteur. Confusion possible avec la balise <blockquote>.
<s> Redfinie ! Utilise pour identifier une partie de texte qui nest pas correct ou non pertinent.



Confusion possible avec la balise <del>qui permet dindiquer quun texte doit tre remplac ou supprim.
<samp>

Utilise dans un paragraphe pour crire un chantillon de code. Confusion possible avec la balise <code>.
<script>

Pour ajouter un script internet ou externe.
<section> Nouveau ! Utilise pour regrouper des lments diffrents, mais partageant la mme thmatique Cette balise est le
plus souvent utilis avec un header. Confusion possible avec la balise <article> dont tout le contenu doit avoir un sens propre. Confustion
possible avec la balise <div> qui ne sert qu mettre en style un groupe dlments.
<select>
Pour une liste droulante.
<small>

Pour mettre une partie de texte en minimisation.
<source> Nouveau ! Utilise dans les balises <video> et <audio> pour indiquer lurl et le type des mdias.
MEMO

I 5

DEFINITION DES BALISES


<span>





<strong>

<style>

pour cette balise.
<sub>

Utilise pour mettre en style une portion de texte qui se diffrencie des autres.
Cette balise ne doit pas tre utilise si une autre balise de formatage de texte convient mieux.
Utilise dans un paragraphe pour mettre un texte en gras.
Permets de dfinir un style dans le document HTML. Attention, lattribut title une valeur smantique diffrente

Dclarer un indice : Petit caractre plac en bas et droite dun autre caractre.
<summary>
Nouveau ! Gnralement utilise lintrieur du conteneur <detail>, il permet de dcrire le sommaire, la lgende
ou le titre dun lment.
<sup>

Dclarer un exposant : petit caractre plac en haut et droite dun autre caractre.
<table>

Pour un tableau.
NOTE IMPORTANTE : En HTML5, lattribut summary utilis en accessibilit nest plus valide et ne doit pas tre utilis : la balise <caption> devient indispensable.

<tbody>

Utilis pour le corps dun tableau.
<td>

Pour dclarer une cellule dans un tableau.
<textarea>
Pour le champs de saisi.
<tfoot>

Utilis pour le pied de page dun tableau.
<th>

Pour dclarer une cellule dans lentte dun tableau.
<thead>

Utilis pour lentte dun tableau.
<time> Nouveau ! Pour dclarer une date ou une heure.
<title>
Pour le titre de la page HTML en cours de lecture.
<tr>

Pour dclarer un champ dans un tableau.
<track> Nouveau ! Barre pour indiquer une portion de temps.
<ul>

Pour les listes puces.
<var>

Pour dclarer une variable.
<video> Nouveau ! Pour insrer une video.
<wbr> Nouveau ! Balise non fermante utiliser lintrieur dun mot long pour forcer un retour la ligne.

MEMO

I 6

S-ar putea să vă placă și