Balises de Premier Niveau

Balises de premier niveau
Les balises de premier niveau sont les principales balises qui structurent une page HTML.
Elles sont
indispensables pour réaliser le « code minimal » d'une page web.
Balise Description
<html> Balise principale
<head> En-tête de la page
<body> Corps de la page
Balises d'en-tête
Ces balises sont toutes situées dans l'en-tête de la page web, c'est-à-dire entre <head> et
</head> :
Balise Description
<link /> Liaison avec une feuille de style
<meta /> Métadonnées de la page web (charset, mots-clés, etc.)
<script> Code JavaScript
<style> Code CSS
<title> Titre de la page
Balises de structuration du texte
Balise Description
<abbr> Abréviation
<blockquote> Citation (longue)
<cite> Citation du titre d'une œuvre ou d'un évènement
<q> Citation (courte)
<sup> Exposant
<sub> Indice
<strong> Mise en valeur forte
<em> Mise en valeur normale
<mark> Mise en valeur visuelle
<h1> Titre de niveau 1
<img /> Image
<figure> Figure (image, code, etc.)
<figcaption> Description de la figureBalise Description
<audio> Son
<video> Vidéo
<source> Format source pour les balises <audio> et <video>
<a> Lien hypertexte
<br /> Retour à la ligne
<p> Paragraphe
<hr /> Ligne de séparation horizontale
<address> Adresse de contact
<del> Texte supprimé
<ins> Texte inséré
<dfn> Définition
<kbd> Saisie clavier
<pre> Affichage formaté (pour les codes sources)
<progress> Barre de progression
<time> Date ou heure
Balises de listes
Cette section énumère toutes les balises HTML permettant de créer des listes (listes à puces,
listes
numérotées, listes de définitions…)
Balise Description
<ul> Liste à puces, non numérotée
<ol> Liste numérotée
<li> Élément de la liste à puces
<dl> Liste de définitions
<dt> Terme à définir
<dd> Définition du terme
Balises de tableau
Balise Description
<table> Tableau
<caption> Titre du tableau
<tr> Ligne de tableau
<th> Cellule d'en-tête
<td> Cellule
<thead> Section de l'en-tête du tableau
<tbody> Section du corps du tableau
<tfoot> Section du pied du tableau
Balises de formulaireBalise Description
<form> Formulaire
<fieldset> Groupe de champs
<legend> Titre d'un groupe de champs
<label> Libellé d'un champ
<input /> Champ de formulaire (texte, mot de passe, case à cocher, bouton, etc.)
<textarea> Zone de saisie multiligne
<select> Liste déroulante
<option> Élément d'une liste déroulante
<optgroup> Groupe d'éléments d'une liste déroulante
Balises sectionnantes
Ces balises permettent de construire le squelette de notre site web.
Balise Description
<header> En-tête
<nav> Liens principaux de navigation
<footer> Pied de page
<section> Section de page
<article> Article (contenu autonome)
<aside> Informations complémentaires
Balises génériques
Les balises génériques sont des balises qui n'ont pas de sens sémantique.
En effet, toutes les autres balises HTML ont un sens : <p> signifie « Paragraphe », <h2>
signifie « Sous-titre
», etc.
Parfois, on a besoin d'utiliser des balises génériques (aussi appelées balises universelles) car
aucune des
autres balises ne convient. On utilise le plus souvent des balises génériques pour construire
son design.
Il y a deux balises génériques : l'une est inline, l'autre est block.
Balise Description
<span> Balise générique de type inline
<div> Balise générique de type block
Ces balises ont un intérêt uniquement si vous leur associez un attribut class, id ou style :
• class: indique le nom de la classe CSS à utiliser.
• id: donne un nom à la balise. Ce nom doit être unique sur toute la page car il permet
d'identifier la
balise. Vous pouvez vous servir de l'ID pour de nombreuses choses, par exemple pour créer
un lien
vers une ancre, pour un style CSS de type ID, pour des manipulations en JavaScript, etc.
• style: cet attribut vous permet d'indiquer directement le code CSS à appliquer. Vous n'êtes
donc pas
obligés d'avoir une feuille de style à part, vous pouvez mettre directement les attributs CSS.
Notez
qu'il est préférable de ne pas utiliser cet attribut et de passer à la place par une feuille de style
externe,
car cela rend votre site plus facile à mettre à jour par la suite.
Ces trois attributs ne sont pas réservés aux balises génériques : vous pouvez aussi les utiliser
sans aucun
problème dans la plupart des autres balises.
 Pour un commentaire

<!DOCTYPE> L’inclusion du DOCTYPE dans un document HTML assure que le navigateur
interprétera le HTML
selon les spécifications dont le doctype se rapporte. 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.
<abbr> Pour une abréviation. Son attribut «title» ne doit être utilisé que pour
l’extension de l’abréviation et rien d’autre.
<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 personnes auteurs du document cité.
<area> Définie une zone ou plusieurs zones pour une carte image. Cette balise
s’utilise toujours avec la balise <map>.
<article> Nouveau ! Utilisée 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.
<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> Utilisée 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.
<base> A déclarer qu’une fois par page HTML, cette balise permet de définir l’URL
par défaut pour toutes les URL
<blockquote> Pour une longue citation. Confusion possible avec la balise <q>.
<body> Partie principale du document HTML.
<br> Utilisée dans un paragraphe, cette balise permet de créer un saut de
ligne.
<button> Pour un bouton. il peut être utilisé comme commande.
<canvas> Nouveau ! Pour définir un graphique.
<caption> Pour le titre d’un tableau.
<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> pour citer l’auteur de la citation.
<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 class avec le nom du langage informatique cité dans cette balise.
<col> Utilisée pour créer des colonnes dans un tableau.
<colgroup> Utilisée pour créer des groupes de colonnes dans un tableau.
<command> Nouveau ! 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.
<datalist> Nouveau ! Pour une liste déroulante.
<dd> Pour la description d’une définition, s’utilise avec la balise <dl>.
<del> Utilisée 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.
<details> Nouveau ! 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>. NOTE : Les validateurs
demandent de ne pas utiliser cette balise
car encore trop peu implémentée dans les navigateurs.
<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, utilise pour la
création d’infobulle par exemple.
<div> Balise sans valeur sémantique réelle, elle sert surtout de conteneur pour
une mise en forme en CSS. Cette balise doit
utilisée en dernier recours, lorsqu’aucune autre balise ne peut convenir.
<dl> Pour une liste de définitions.
<dt> Pour déclarer une définition, s’utilise avec la balise <dl>.
<em> Utilisée dans un paragraphe pour mettre une partie de texte en emphase.
<embed> Nouveau ! Utilisée pour du contenu externe et interactif ou pour un plug-in.
<fieldset> Pour regrouper des éléments d’un formulaire.
<figcaption> Nouveau ! Utilisée dans le conteneur <figure>, avant ou après le contenu,
cette balise permet d’écrire une légende
ou une description.
<figure> Nouveau ! 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.
<footer> Nouveau ! 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>.
<form> Pour un formulaire.
<h1> à <h6> Utilisées pour la hiérarchisation des titres.
<head> Pour les informations d’en tête du document HTML.
<header> Nouveau ! Pour l’entête d’une section ou d’une page.
<hgroup> Nouveau ! Regroupe des titres de niveau Hn dans la balise <head>
<hr> Permet de créer une ligne de séparation.
<html> Déclaration du document HTML. On lui rajoutera l’attribut lang pour
déclarer la langue utilisée.
<i> Redéfinie ! 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. Confusion possible, en HTML5, cette
balise ne sert pas uniquement à mettre un texte en italique.
<iframe> Pour créer une sous-fenêtre.
<img> Pour déclarer une image.
<input> Pour un champ de texte.
<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.
<keygen> Nouveau ! L’élément keygen représente un contrôle de générateur de clé stockée
dans «keystore local».
<kbd> Lorsque le texte est utilisé pour définir des actions au clavier.
<label> Étiquette utilisée comme titre d’une commande.
<legend> Titre du fieldset auquel il se rapporte.
<li> Item d’une liste ordonnée ou à puce.
<link> Permet de lier une ressource externe à la page HTML.
<map> Utilisée pour créer une carte d’image avec des zones réactives.
L’attribut «name» est obligatoirement requis.
<mark> Nouveau ! Pour marquer du texte, par exemple surligner un résultat de recherche.
On stylisera cette balise en CSS.
<menu> Pour une liste de commande. Confusion possible avec la balise <nav>.
<meta> Permet d’ajouter des métas à la page HTML.
<meter> Nouveau ! Pour measurement within a predefined range.

<nav> Nouveau ! Pour regrouper des liens qu’ils soient internes à la page en cours ou
pour d’autres pages liées, utiliser
cette balise de façon systématique lui ferait perdre sa valeur sémantique, ainsi, dans le footer
d’un article, on utilisera la balise <p> pour
lister des liens puisque la balise <footer> le permet. Il est recommandé, mais non obligatoire
d’utiliser les listes à puce pour lister les liens.
<noscript> Utilisée pour indiquer un message dans le cas où JavaScript serait désactivé.
<object> Pour déclarer un objet.
<ol> Utilisé pour les listes ordonnées.
<optgroup> Pour grouper des informations dans une liste déroulante.
<option> Pour déclarer un item dans une liste déroulante. Peut-être utilisé
comme «commands».
<output> Nouveau ! Représente le résultat d’un calcul.
<p> Définis un paragraphe contenant une ou plusieurs phrases.
<param> Pour paramétrer un objet.
<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>.
<progress> Nouveau ! Pour une barre de progression.
<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>.
<s> Redéfinie ! Utilisée 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é.
<samp> Utilisée 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 ! 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. 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 d’éléments.
<select> Pour une liste déroulante.
<small> Pour mettre une partie de texte en minimisation.
<source> Nouveau ! Utilisée dans les balises <video> et <audio> pour indiquer l’url et le
type des médias.
<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.
<strong> Utilisée dans un paragraphe pour mettre un texte en gras.
<style> Permets de définir un style dans le document HTML. Attention,
l’attribut title à une valeur sémantique différente
pour cette balise.
<sub> Déclarer un indice : Petit caractère placé en bas et à droite d’un autre
caractère.
<summary> Nouveau ! Généralement utilisée à l’intérieur du conteneur <detail>, il
permet de décrire le sommaire, la légende
ou le titre d’un élément.
<sup> Déclarer un exposant : petit caractère placé en haut et à droite d’un
autre caractère.
<table> Pour un tableau.
NOTE IMPORTANTE : En HTML5, l’attribut summary utilisé en accessibilité n’est plus
valide et ne doit pas être utilisé : la balise <caption> devient indispensable.
<tbody> Utilisé pour le corps d’un tableau.
<td> Pour déclarer une cellule dans un tableau.
<textarea> Pour le champs de saisi.
<tfoot> Utilisé pour le pied de page d’un tableau.
<th> Pour déclarer une cellule dans l’entête d’un tableau.
<thead> Utilisé pour l’entête d’un tableau.
<time> Nouveau ! Pour déclarer une date ou une heure.
<title> Pour le titre de la page HTML en cours de lecture.
<tr> Pour déclarer un champ dans un tableau.
<track> Nouveau ! Barre pour indiquer une portion de temps.
<ul> Pour les listes à puces.
<var> Pour déclarer une variable.
<video> Nouveau ! Pour insérer une video.
<wbr> Nouveau ! Balise non fermante à utiliser à l’intérieur d’un mot long pour forcer un
retour à la ligne.

Balises de Premier Niveau

Transféré par

Droits d'auteur :

Formats disponibles

Balises de Premier Niveau

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Balises de Premier Niveau

Transféré par

Droits d'auteur :

Formats disponibles

Balises de premier niveau

Pour un commentaire

<code> Pour déclarer du code informatique, on peut l’utiliser à l’intérieur de la

<meter> Nouveau ! Pour measurement within a predefined range.

Vous aimerez peut-être aussi