Les balises structurantes
| Balise | Définition | Autofermante |
|---|---|---|
| <html> | Balise principale | non |
| <head> | En-tête de la page | non |
| <body> | Corps de la page | non |
Les balises d’entête
| Balise | Définition | Autofermante |
|---|---|---|
| <link /> | Liaison avec une feuille de style | oui |
| <meta /> | Métadonnées de la page web (charset, mots-clés, etc.) | oui |
| <script> | Code JavaScript | non |
| <style> | Styles CSS | non |
| <title> | Titre de la page | non |
Les balises de structure de textes
| Balise | Définition | Atributs utlisables* | Type | Autofermante |
|---|---|---|---|---|
| <abbr> | Abréviation ou un acronyme | class, id, title | block | non |
| <blockquote> | Citation longue | class, id | block | non |
| <cite> | Référence d’une citation (l’auteur, l’ouvrage…) | class, id | inline | non |
| <q> | Citation courte (quote) | class, id | inline | non |
| <sup> | Exposant | class, id | inline | non |
| <sub> | Indice | class, id | inline | non |
| <em> | Emphase, permet marquer un texte sur lequel on veut insister. | class, id | inline | non |
| <strong> | Indique que le texte a une importance particulière ou un certain sérieux voire un caractère urgent. | class, id | inline | non |
| <mark> | Texte marqué ou surligné à cause de sa pertinence dans le contexte | class, id | inline | non |
| <h1> | Titre de niveau 1 (head-line 1) | class, id | block | non |
| <h2> | Titre de niveau 2 (head-line 2) | class, id | block | non |
| <h3> | Titre de niveau 3 (head-line 3) | class, id | block | non |
| <h4> | Titre de niveau 4 (head-line 4) | class, id | block | non |
| <h5> | Titre de niveau 5 (head-line 5) | class, id | block | non |
| <h6> | Titre de niveau 6 (head-line 6) | class, id | block | non |
| <a> | Ancre (ou anchor en anglais) hyperlien vers un autre endroit de la même page ou vers une autre page sur le Web. | class, id, target, rel, href, title | inline** | non |
| <br /> | Crée un saut de ligne (break) lorsque celui ci est important, une adresse ou un poème par exempl. | class, id | block | oui |
| <p> | Représente un paragraphe de texte | class, id | block | non |
| <hr /> | Indique un changement thématique entre des éléments de paragraphe (par exemple, un changement de décor dans un récit, un changement de sujet au sein d’une section, des notes de bas de page…). | class, id | block | oui |
| <address> | Indique des informations de contact pour une personne, un groupe de personnes ou une organisation. | class, id | block | non |
| <pre> | Permet d’intégrer du texte préformaté (code informatique par exemple), généralement écrit avec une police à chasse fixe. | class, id | block | non |
| <time> | Cet élément permet de représenter une date, une heure, une durée. | class, id, datetime | inline | non |
Les balises de structure de listes
Les listes, sont des éléments important dans la composition d’une page. Elles permettent de définir une énumération ordonnée ou non, permettent de structurer et lier en un bloc les liens d’un menu ou peuvent permettre de composer un glossaire en liant le terme et sa définition.
| Balise | Définition | Atributs utlisables* | Type | Autofermante |
|---|---|---|---|---|
| <ul> | Défini un liste d’éléments non odronnée (unordoned list) | class, id | block | non |
| <ol> | Défini un liste d’éléments classés dans un ordre précis (ordered list) | class, id | block | non |
| <li> | Permet de présenter un élément dans une liste (list index). Il sera obligatoirement enfant d’un élément <ul> ou <ol> | class, id | block | non |
| <dl> | Élément d’une liste de description (definition list) | class, id | inline | non |
| <dt> | Titre de l’élément décrit (definition title) il sera enfant d’un élément <dl> | class, id | inline | non |
| <dd> | Définition d’un élément (definition description) au sein d’une liste de descrition. | class, id | inline | non |
Les balises de structure de tableau
Le langage HTML permet la création de tableaux de données plus ou moins complexes en deux dimensions. Les lignes y sont divisées en cellules pour former les colonnes.
| Balise | Définition | Atributs utlisables* | Type | Autofermante |
|---|---|---|---|---|
| <table> | Permet de représenter un tableau | class, id | table | non |
| <caption> | Légende (ou le titre) d’un tableau. Il doit être le première élément parmi les descendants de l’élément. | class, id | table | non |
| <thead> | Définit un ensemble de lignes qui définit l’en-tête des colonnes d’un tableau. | class, id | table | non |
| <tbody> | Permet de regrouper un ou plusieurs éléments <tr> afin de former le corps d’un tableau. | class, id | table | non |
| <tfoot> | Permet de définir un ensemble de lignes qui résument les colonnes d’un tableau. | table | non | |
| <tr> | Ligne de cellules dans un tableau. | class, id | table-row | non |
| <th> | Définit une cellule d’un tableau comme une cellule d’en-tête pour un groupe de cellule. | class, id | table-cel | non |
| <td> | Définit une cellule d’un tableau. | class, id | table-cel | non |
Les balises de structure de médias
HTML permet d’afficher différents types de médias. Les médias présents dans la page devront être de type informatif, l’aspect décoratif restant à la charge du CSS.
| Balise | Définition | Atributs utlisables* | Type | Autofermante |
|---|---|---|---|---|
| <img> | Permet de représenter une image informative dans un document | class, id, title, alt, src | inline-block | oui |
| <video> | Utilisé afin d’intégrer un contenu vidéo dans un document. Il peut contenir une ou plusieurs sources vidéo | class, id, buffered, controls, controlist, crossorigin, height, width, loop, muted, playsinline, preload, poster, src | block | non |
| <audio> | Utilisé afin d’intégrer un contenu sonore dans un document. Il peut contenir une ou plusieurs sources audio. | class, id, controls, autoplay, crossorigin, loop, muted, preload, src | block | non |
| <source> | Définit différentes ressources média pour un élément | media, sizes, src, type | block | oui |
| <figure> | Représente une figure (une image, une illustration, un diagramme, un fragment de code ou un schéma ) auquel il est fait référence dans le texte principal. Il peut être accompagné d’une légende à l’aide de | media, sizes | block | non |
| <figcaption> | Permet d’indiquer un sous-titre, une légende, associé à une figure ou à une illustration présenté dans l’élément | media, sizes | block | non |
Les balises de regroupement
Hormis <main>, toutes ses balises peuvent être utilisées plusieurs fois dans la page. Leur contenu sera attaché à l’élément dans lequel elles sont insérées. Par exemple, le premier <header> pourra contenir le titre de la page web (tétière), alors que le <header> placé dans <section> contiendra le titre spécifique de la section. idem pour les autres : le <aside> directement enfant de <body> sera considéré comme donnant des informations annexes sur la page web, alors que celui placé dans un article fournira des informations spécifiques à cet l’article.
| Balise | Définition | Atributs utlisables* | Type | Autofermante |
|---|---|---|---|---|
| <main> | contenu majoritaire du <body>. Le contenu principal de cette zone est constitué de contenu directement en relation, ou qui étend le sujet principal du document. | class, id | block | non |
| <section> | Regroupe les éléments ayant un sens ou un sujet commun. Une <section> devra obligatoirement commencer par un titre ou une balise d’entête <header> | class, id | block | non |
| <article> | représente du contenu autonome dans un document. Comme la <section> cette élément devra obligatoirement commencer par un titre ou une balise d’entête. Ce contenu est prévu pour être distribué ou réutilisé indépendamment du reste de la page. | class, id | block | non |
| <header> | Regroupe les éléments définissant une entête ou un contenu introductif d’une page, d’une section ou de n’importe quel élément parent. | class, id | block | non |
| <footer> | Regroupe les éléments définissant le pied d’une page, d’une section ou de n’importe quel élément parent. | class, id | block | non |
| <nav> | C’est une section destinée à la navigation dans un document (avec des menus, des tables des matières, des index, etc.). | class, id | block | non |
| <aside> | Représente une partie d’un document dont le contenu n’a qu’un rapport indirect (ou relatif ) avec le contenu principal du document. | class, id | block | non |
Les balises de regroupement sans valeur sémantique
Dans certains cas, aucunes des balises de regroupement ne correspond à nos besoin. Il peut être nécessaire de regrouper des éléments sans leur donner de valeur sémantique, bien-souvent à des fins graphiques,. Il existe 2 balises prévues à cet effet. L’une de type block, l’autre de type inline.
| Balise | Définition | Atributs utlisables* | Type | Autofermante |
|---|---|---|---|---|
| <div> | Conteneur générique block qui permet d’organiser le contenu sans représenter rien de particulier. | class, id | block | non |
| <span> | Conteneur générique en ligne (inline) pour les contenus phrasés. | class, id | inline | non |
Cette article vous a t'il été utile ?
( 0 )