Liste des balises HTML5

Indiablex

Bonjour !
Souvent, on code un site, et on se dit "mince, elle fait quoi dejà cette balise ? " ou "c'est quelle balise pour faire telle chose ?".
 
C'est pour cela que je vous propose un petit récapitulatif des balises utilisées en HTML5 ainsi que de leurs fontions.
Un exemple concret est présent quand on clique sur les balises.
( liste trouvée sur <a href="http://41mag.fr/liste-des-balises-html5" rel="external nofollow">http://41mag.fr/liste-des-balises-html5</a>)
 


<a href="http://41mag.fr/liste-des-balises-html5/balise-html5-commentaire" rel="external nofollow"><!– … –></a> 
Définit un commentaire <a href="http://41mag.fr/liste-des-balises-html5/balise-doctype-html5" rel="external nofollow"><!DOCTYPE></a> 
Définit le type du document <a href="http://41mag.fr/liste-des-balises-html5/balise-a-html5-lien" rel="external nofollow"><a></a> 
Définit un lien <a href="http://41mag.fr/liste-des-balises-html5/balise-abbr-html5" rel="external nofollow"><abbr></a> 
Définit une abréviation <a href="http://41mag.fr/liste-des-balises-html5/balise-address-html5" rel="external nofollow"><address></a> 
Définit une adresse <a href="http://41mag.fr/liste-des-balises-html5/balise-area-html5" rel="external nofollow"><area></a> 
Définit une zone à l’intérieur d’une image <a href="http://41mag.fr/liste-des-balises-html5/balise-article-html5" rel="external nofollow"><article></a> 
Définit un article <a href="http://41mag.fr/liste-des-balises-html5/balise-aside-html5" rel="external nofollow"><aside></a> 
Définit une partie latérale au contenu <a href="http://41mag.fr/liste-des-balises-html5/balise-audio-html5" rel="external nofollow"><audio></a> 
Définit un fichier audio <a href="http://41mag.fr/liste-des-balises-html5/balise-b-html5" rel="external nofollow"></a> 
Texte en gras <a href="http://41mag.fr/liste-des-balises-html5/balise-base-html5" rel="external nofollow"><base></a> 
Définit une URL de base pour tous les liens de la page <a href="http://41mag.fr/liste-des-balises-html5/balise-do-html5" rel="external nofollow"><bdo></a> 
Définit la direction du texte <a href="http://41mag.fr/liste-des-balises-html5/balise-blockquote-html5" rel="external nofollow"><blockquote></a> 
Définit une longue citation <a href="http://41mag.fr/liste-des-balises-html5/balise-body-html5" rel="external nofollow"><body></a> 
Définit le corps de la page <a href="http://41mag.fr/liste-des-balises-html5/balise-br-html5" rel="external nofollow"> </a> 
Saut de ligne <a href="http://41mag.fr/liste-des-balises-html5/balise-button-html5" rel="external nofollow"><button></a> 
Définit un bouton cliquable <a href="http://41mag.fr/liste-des-balises-html5/balise-canvas-html5" rel="external nofollow"><canvas></a> 
Définit un graphique <a href="http://41mag.fr/liste-des-balises-html5/balise-caption-html5" rel="external nofollow"><caption></a> 
Légende du tableau <a href="http://41mag.fr/liste-des-balises-html5/balise-cite-html5" rel="external nofollow"><cite></a> 
Définit une citation <a href="http://41mag.fr/liste-des-balises-html5/balise-code-html5" rel="external nofollow"><code></a> 
Mise en forme d’un texte en code informatique <a href="http://41mag.fr/liste-des-balises-html5/balise-col-html5" rel="external nofollow"><col></a> 
Définit une colonne d’un tableau <a href="http://41mag.fr/liste-des-balises-html5/balise-colgroup-html5" rel="external nofollow"><colgroup></a> 
Définit un groupe de colonne pour un tableau <a href="http://41mag.fr/liste-des-balises-html5/balise-command-html5" rel="external nofollow"><command></a> 
Définit un bouton de commande <a href="http://41mag.fr/liste-des-balises-html5/balise-datalist-html5" rel="external nofollow"><datalist</a> 
Définit une liste d’options <a href="http://41mag.fr/liste-des-balises-html5/balise-dd-html5" rel="external nofollow"><dd></a> 
Définition d’un terme <a href="http://41mag.fr/liste-des-balises-html5/balise-del-html5" rel="external nofollow"><del></a> 
Définit un texte supprimé <a href="http://41mag.fr/liste-des-balises-html5/balise-details-html5" rel="external nofollow"><details></a> 
Définit les détails d’un élément <a href="http://41mag.fr/liste-des-balises-html5/balise-dfn-html5" rel="external nofollow"><dfn></a> 
Définition <a href="http://41mag.fr/liste-des-balises-html5/balise-div-html5" rel="external nofollow"><div></a> 
Définit un calque ou une section <a href="http://41mag.fr/liste-des-balises-html5/balise-dl-html5" rel="external nofollow"><dl></a> 
Liste de définition <a href="http://41mag.fr/liste-des-balises-html5/balise-dt-html5" rel="external nofollow"><dt></a> 
Définition d’un terme <a href="http://41mag.fr/liste-des-balises-html5/balise-em-html5" rel="external nofollow"></a> 
Mise en exergue d’un texte – italique <a href="http://41mag.fr/liste-des-balises-html5/balise-embed-html5" rel="external nofollow"><embed></a> 
Définit un contenu extérieur (audio, vidéo …) <a href="http://41mag.fr/liste-des-balises-html5/balise-fieldset-html5" rel="external nofollow"><fieldset></a> 
Regroupe plusieurs éléments d’un formulaire <a href="http://41mag.fr/liste-des-balises-html5/balise-figcaption-html5" rel="external nofollow"><figcaption></a> 
Légende d’un groupe d’élément multimédia <a href="http://41mag.fr/liste-des-balises-html5/balise-figure-html5" rel="external nofollow"><figure></a> 
Définit un groupe d’élément multimédia <a href="http://41mag.fr/liste-des-balises-html5/balise-footer-html5" rel="external nofollow"><footer></a> 
Définit le bas d’un section ou d’une page <a href="http://41mag.fr/liste-des-balises-html5/balise-form-html5" rel="external nofollow"><form></a> 
Définit un formulaire <a href="http://41mag.fr/liste-des-balises-html5/balise-h1-a-h6-html5" rel="external nofollow"><h1> to <h6></a> 
Définit un titre par degré importance de 1 à 6 <a href="http://41mag.fr/liste-des-balises-html5/balise-head-html5" rel="external nofollow"><head></a> 
Définit l’en-tête d’un document <a href="http://41mag.fr/liste-des-balises-html5/balise-header-html5" rel="external nofollow"><header></a> 
Définit le haut d’une section ou d’une page <a href="http://41mag.fr/liste-des-balises-html5/balise-hgroup-html5" rel="external nofollow"><hgroup></a> 
Regroupe les informations du haut d’une page ou section <a href="http://41mag.fr/liste-des-balises-html5/balise-hr-html5" rel="external nofollow"><hr></a> 
Barre horizontale <a href="http://41mag.fr/liste-des-balises-html5/balise-html-html5" rel="external nofollow"><html></a> 
Définit un document html <a href="http://41mag.fr/liste-des-balises-html5/balise-i-html5" rel="external nofollow"></a> 
Texte en italique <a href="http://41mag.fr/liste-des-balises-html5/balise-iframe-html5" rel="external nofollow"><iframe></a> 
Introduit un page html dans une frame <a href="http://41mag.fr/liste-des-balises-html5/balise-img-html5" rel="external nofollow"><img></a> 
Définit une image <a href="http://41mag.fr/liste-des-balises-html5/balise-input-html5" rel="external nofollow"><input></a> 
Définit un champ <a href="http://41mag.fr/liste-des-balises-html5/balise-ins-html5" rel="external nofollow"><ins></a> 
Définit un texte insérer <a href="http://41mag.fr/liste-des-balises-html5/balise-keygen-html5" rel="external nofollow"><keygen></a> 
Générateur de clé pour un formulaire <a href="http://41mag.fr/liste-des-balises-html5/balise-kbd-html5" rel="external nofollow"><kbd></a> 
Raccourcis ou touche du clavier <a href="http://41mag.fr/liste-des-balises-html5/balise-label-html5" rel="external nofollow"><label></a> 
Légende d’un groupe d’élément de formulaire <a href="http://41mag.fr/liste-des-balises-html5/balise-legend-html5" rel="external nofollow"><legend></a> 
Titre d’un groupe d’élément d’un formulaire <a href="http://41mag.fr/liste-des-balises-html5/balise-li-html5" rel="external nofollow"><li></a> 
Élément d’une liste <a href="http://41mag.fr/liste-des-balises-html5/balise-link-html5" rel="external nofollow"><link></a> 
Définit les relations entre les documents <a href="http://41mag.fr/liste-des-balises-html5/balise-map-html5" rel="external nofollow"><map></a> 
Définit une carte <a href="http://41mag.fr/liste-des-balises-html5/balise-mark-html5" rel="external nofollow"></a> 
Mise en valeur d’un mot ou d’un texte – Texte marqué <a href="http://41mag.fr/liste-des-balises-html5/balise-math-html5" rel="external nofollow"><math></a> 
Définit une formule mathématique <a href="http://41mag.fr/liste-des-balises-html5/balise-menu-html5" rel="external nofollow"><menu></a> 
Définit un menu en liste <a href="http://41mag.fr/liste-des-balises-html5/balise-meta-html5" rel="external nofollow"><meta></a> 
Définit des informations relatives au document <a href="http://41mag.fr/liste-des-balises-html5/balise-meter-html5" rel="external nofollow"><meter></a> 
Définit une unité de mesure <a href="http://41mag.fr/liste-des-balises-html5/balise-nav-html5" rel="external nofollow"><nav></a> 
Définit un groupe de liens de navigation <a href="http://41mag.fr/liste-des-balises-html5/balise-noscript-html5" rel="external nofollow"><noscript></a> 
Définit une alternative au script non supporté <a href="http://41mag.fr/liste-des-balises-html5/balise-object-html5" rel="external nofollow"><object></a> 
Définit un objet du contenu extérieur multimédia <a href="http://41mag.fr/liste-des-balises-html5/balise-ol-html5" rel="external nofollow"><ol></a> 
Définit une liste ordonné <a href="http://41mag.fr/liste-des-balises-html5/balise-optgroup-html5" rel="external nofollow"><optgroup></a> 
Regroupe d’une liste d »option dans un formulaire <a href="http://41mag.fr/liste-des-balises-html5/balise-option-html5" rel="external nofollow"><option></a> 
Option d’une liste dans un formulaire <a href="http://41mag.fr/liste-des-balises-html5/balise-output-html5" rel="external nofollow"><output></a> 
Définit un type de sortie <a href="http://41mag.fr/liste-des-balises-html5/balise-p-html5-paragraph" rel="external nofollow"></a> 
Définit un paragraphe <a href="http://41mag.fr/liste-des-balises-html5/balise-param-html5" rel="external nofollow"><param></a> 
Définit les paramètres d’un objet <a href="http://41mag.fr/liste-des-balises-html5/balise-pre-html5" rel="external nofollow"><pre></a> 
Texte pré-formaté <a href="http://41mag.fr/liste-des-balises-html5/balise-progress-html5" rel="external nofollow"><progress></a> 
Définit une progression <a href="http://41mag.fr/liste-des-balises-html5/balise-q-html5" rel="external nofollow"><q></a> 
Définit une courte citation <a href="http://41mag.fr/liste-des-balises-html5/balise-rp-html5" rel="external nofollow"><rp></a> 
Annotation ruby si le script n’est pas supporté <a href="http://41mag.fr/liste-des-balises-html5/balise-rt-html5" rel="external nofollow"><rt></a> 
Annotation ruby d’explication <a href="http://41mag.fr/liste-des-balises-html5/balise-ruby-html5" rel="external nofollow"><ruby></a> 
Définit une annotation en ruby <a href="http://41mag.fr/liste-des-balises-html5/balise-samp-html5" rel="external nofollow"><samp></a> 
Définit un échantillon de code <a href="http://41mag.fr/liste-des-balises-html5/balise-script-html5" rel="external nofollow"><script></a> 
Définit un script <a href="http://41mag.fr/liste-des-balises-html5/balise-section-html5" rel="external nofollow"><section></a> 
Définit une section <a href="http://41mag.fr/liste-des-balises-html5/balise-select-html5" rel="external nofollow"><select></a> 
Définit une liste sélectionnable <a href="http://41mag.fr/liste-des-balises-html5/balise-small-html5" rel="external nofollow"></a> 
Minimise l’importance d’un texte <a href="http://41mag.fr/liste-des-balises-html5/balise-source-html5" rel="external nofollow"><source></a> 
Définit la source d’un contenu multimédia <a href="http://41mag.fr/liste-des-balises-html5/balise-span-html5" rel="external nofollow"></a> 
Définit une section de type inline <a href="http://41mag.fr/liste-des-balises-html5/balise-strong-html5" rel="external nofollow"></a> 
Mise en exergue d’un texte – Texte en Gras <a href="http://41mag.fr/liste-des-balises-html5/balise-style-html5" rel="external nofollow"><style></a> 
Définit un style CSS <a href="http://41mag.fr/liste-des-balises-html5/balise-sub-html5" rel="external nofollow"></a> 
Mise en indice d’un texte <a href="http://41mag.fr/liste-des-balises-html5/balise-summary-html5" rel="external nofollow"><summary></a> 
Définit l’en-tête des détails d’un document ou section <a href="http://41mag.fr/liste-des-balises-html5/balise-sup-html5" rel="external nofollow"></a> 
Mise en exposant d’un texte <a href="http://41mag.fr/liste-des-balises-html5/balise-svg-html5" rel="external nofollow"><svg></a> 
Définit une image vectorielle <a href="http://41mag.fr/liste-des-balises-html5/balise-table-html5" rel="external nofollow"><table></a> 
Définit un tableau <a href="http://41mag.fr/liste-des-balises-html5/balise-tbody-html5" rel="external nofollow"><tbody></a> 
Définit le corps d’un tableau <a href="http://41mag.fr/liste-des-balises-html5/balise-td-html5" rel="external nofollow"><td></a> 
Définit une cellule d’un tableau <a href="http://41mag.fr/liste-des-balises-html5/balise-textarea-html5" rel="external nofollow"><textarea></a> 
Définit une zone de texte <a href="http://41mag.fr/liste-des-balises-html5/balise-tfoot-html5" rel="external nofollow"><tfoot></a> 
Définit le bas d’un tableau <a href="http://41mag.fr/liste-des-balises-html5/balise-th-html5" rel="external nofollow"><th></a> 
Définit une cellule d’en-tête d’un tableau <a href="http://41mag.fr/liste-des-balises-html5/balise-thead-html5" rel="external nofollow"><thead></a> 
Définit le haut d’un tableau <a href="http://41mag.fr/liste-des-balises-html5/balise-time-html5" rel="external nofollow"><time></a> 
Définit une unité de temps <a href="http://41mag.fr/liste-des-balises-html5/balise-title-html5" rel="external nofollow"><title></a> 
Définit le titre d’un document <a href="http://41mag.fr/liste-des-balises-html5/balise-tr-html5" rel="external nofollow"><tr></a> 
Définit une ligne de tableau <a href="http://41mag.fr/liste-des-balises-html5/balise-track-html5" rel="external nofollow"><track></a> 
Définit une unité de temps pour les éléments <audio> et <video>. <a href="http://41mag.fr/liste-des-balises-html5/balise-ul-html5" rel="external nofollow"><ul></a> 
Définit une liste non-ordonné <a href="http://41mag.fr/liste-des-balises-html5/balise-var-html5" rel="external nofollow"><var></a> 
Définit une variable <a href="http://41mag.fr/liste-des-balises-html5/balise-video-html5" rel="external nofollow"><video></a> 
Définit une vidéo <a href="http://41mag.fr/liste-des-balises-html5/balise-wbr-html5" rel="external nofollow"></a> 
Définit un possible retour à la ligne

Anaeria

C'est bien peut être pratique.
Mais pour moi il manque des infos essentielles pour pouvoir coder : les attributs possibles avec leurs paramétrage et l'implémentation des balises (auto-fermantes ou non).

Azad

Bon tutoriel, mais il faudrait mettre un peu plus de description et de mise en forme, mais merci quand même ! 
Bon boulot, +1 rep.

mars073

un site que je conseil aussi: <a href="http://www.w3schools.com/tags/" rel="external nofollow">http://www.w3schools.com/tags/</a> il référence toutes les balises, leurs attributs et donne des exemples (avec des interactions possible) et même moi qui suis une quiche en anglais je comprends xDmais merci du partage quand même

PretreElfe

La mise en forme est a revoir,
je me rappel au temps que j'étais débutant dans le codage je trouvais ça super utile ... Maintenant je comprends que ça ne m'a jamais servit à rien.
Pour ceux souhaitant commencer à s'aventurer dans le codage voir cette liste ne vous aidera PAS, regarder les codes sources, pratiquez, regardez des codes sources [boucle infinie] c'est la clés de la réussite.
A la limite allez voir des tutoriels sur internet mais pour le html : Aucune utilité il y a pas besoin de tutoriel pour coder le html

Azad

Je suis d'accord pour le fait que certaines balises ne sont pas utiles, néanmoins pour ce qui est des tutoriels là mon avis diverge : ils sont vitaux pour apprendre. 
On peut apprendre sur le tas en décortiquant certaines page web, mais c'est extrêmement compliqué de comprendre tout les méandres des différents langages de programmation même dans un cas comme l'HTML. 
Qu'entends-tu par la "La mise en forme est en revoir" ? A revoir, non ?

PretreElfe

<blockquote class="ipsQuote" data-cite="Azad" data-ipsquote="" data-ipsquote-contentclass="forums_Topic" data-ipsquote-contentcommentid="12287" data-ipsquote-contentid="1101" data-ipsquote-contenttype="forums" data-ipsquote-timestamp="1414101503" data-ipsquote-username="Azad"><div>
<div>

Qu'entends-tu par la "La mise en forme est en revoir" ? A revoir, non ?
</div>
</div></blockquote>
Faute de frappe 
 
Personnellement pour le HTML et CSS les tutoriels ont été complétement inutile et n'ont fait que freiner mon apprentissage, selon moi le meilleur moyen est de pratiquer et de regarder des exemples. (Bon après il faut faire différence entre : Tutoriel et apprentissage !
Quand je dis tutoriel c'est par exemple les tutoriels sur siteduzero sur le html que je trouve inutile MAIS je trouve utile de savoir les balises (car sinon comment savoir ce que c'est ?) )
 
Personnellement pour apprendre je m'amuser à faire des inspecter éléments et modifier à mon goût une page pour ensuite reprendre le code et le refaire sur sublime text 2 (ou pour la plupart d'entre-vous : notepad +)
 
Je ne dis pas que les tutoriels sont inutile juste que tout le monde ne peut pas comprendre avec des tutoriels (pour ma part) donc je propose une autre solution d'apprentissage qui est assez régulière et beaucoup plus sympathique que de lire des textes et des textes pour en arriver à un résultat qui pour la plupart du temps nous déplaira et dans un futur proche nous devrons relire d'autres tutoriels pour mieux comprendre.

Azad

Chacun a sa manière d'apprentissage, néanmoins certains préfèrent comprendre le fonctionnement du langage par la théorie et en faisant des petits bouts de codes par petits bouts de code tout au long du tutoriel plutôt que d'apprendre en copiant des pages en déduisant leur utilité. 
Il n'y a pas de vérité générale sur l'apprentissage, simplement la majorité a besoin d'explications plus fournies que de déduction, en aucun cas ce sujet n'a pas pour vocation d'apprendre à tout le monde : il sert juste d'annuaire pour les balises présentent dans l'HTML5.

Eloha

C'est assez récent je crois mais elles sont très utiles, ce sont ces deux balises :
<ul><li>background-clip
</li><li>mask-image</li>
</ul> 
Elles permettent d'ajouter une certaine texture, ou même une image de fond au texte. Pour réaliser cette effet par exemple :
 
<img alt="demo.jpg" src="<base_url>/applications/sslimageproxy/interface/image.php?url=http://netdna.webdesignerdepot.com/uploads7/3-simple-tricks-for-adding-texture-to-your-text-with-css-and-svg/demo/demo.jpg"/>
 
Et ça s'en créer l'image d'abord sur Photoshop. 
 
Un tutoriel par ici peu vous aider : <a href="http://www.webdesignerdepot.com/2014/12/3-tricks-for-adding-texture-to-your-text-with-css-and-svg/" rel="external nofollow">http://www.webdesignerdepot.com/2014/12/3-tricks-for-adding-texture-to-your-text-with-css-and-svg/</a>:)

Pirkoa

Il est vrai qu'un listing des nouveautés apportées par HTML5 ainsi que la compatibilité de ces dernières avec les différents navigateurs aurait été mieux, mais merci a toi !

Azad

Tout à fait. 
HTML5 apporte un lot considérable de nouveautés, ça serait sympa d'en parler.

NodeBB

Liste des balises HTML5