HTML Balises
On distingue deux catégories de balises : block ou inline, selon qu’elles définissent une zone autonome ou pas.
- Les balises block ne s’imbriquent pas, sauf dans le cas des balises structurantes. Chaque balise block crée un saut de ligne.
- Les balises inline (ou en ligne) ne créent pas de bloc autonome. Elles permettent en général de mettre en relief certaines parties de texte, ou renseigner sur le contenu.
Les paragraphes#
(block)
C’est la balise <p>
.
<p>Paragraphe</p>
- l’espacement des paragraphes se règle en CSS, inutile de saisir des paragraphes vides (ou pire des
<br>
) - peut contenir une ou plusieurs lignes de texte
Les titres#
(block)
Ce sont les balises <h1>
à <h6>
.
<h1>Titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
...
<h6>Titre de niveau 6</h6>
- la balise
h1
représente un titre de niveau 1: le titre de la page par exemple - on dispose de 5 autres balises pour désigner les niveaux de sous titres
- ils organisent le contenu de la page de manière logique
- attention : ce n’est pas le numéro du titre dans la page
Les listes à puces#
(block)
La balise <ul>
désigne une liste à puce non numérotée et la balise <ol>
désigne une liste à puce numérotée.
<ul>
<li>Puce</li>
</ul>
ou
<ol>
<li>Puce</li>
</ol>
- chaque liste est associée à la balise en ligne
<li>
qui désigne un élément de la liste - chaque
<li>
est matérialisé par une puce ou un numéro - l’aspect des puces est modifiable en CSS
- on peut imbriquer les niveaux de liste, ex:
<ol>
<li>élément 1</li>
<li>élément 2
<ul>
<li>élément 2.1</li>
<li>élément 2.2</li>
</ul>
</li>
<li>élément 3</li>
</ol>
nous donne :
- élément 1
- élément 2
- élément 2.1
- élément 2.2
- élément 3
Rappel: les <li>
obligatoirement dans <ul>
/<ol>
, et <ul>
/<ol>
ne contient uniquement que des <li>
Les liens hypertextes#
(inline)
C’est la balise <a>
.
<a href="UrlDeDestination" title="InfoSurLeLien">Texte Du Lien</a>
- l’attribut obligatoire
href
désigne la destination du lien (son URL) - une URL peut être :
- Absolue:
href="http://www.google.fr"
(commence par le protocole) - Relative:
href="page2.html"
(pas de protocole = par rapport à la page en cours dans l’arborescence des fichiers)
- Absolue:
- l’apparence des liens est modifiable en CSS
Les images sémantiques#
(inline)
C’est la balise <img>
.
<img src="UrlDeLImage" alt="TexteAlternatif">
- c’est un élément inline (donc pas de bloc autonome)
- pas de tag fermant
- deux attributs obligatoires
src
définit l’adresse de l’image à afficher (absolue ou relative)alt
désigne le texte alternatif de l’image. Ce que l’image apporte comme informations (obligatoire pour une question d’accessibilité)
- pour les images décoratives (sans sens particulier), utiliser CSS
L’accentuation#
(inline)
La balise <strong>
pour une forte accentuation.
<strong>Texte important</strong>
- signifie : texte fortement accentué. Attirer l’attention du lecteur sur le contenu d’un élément
- le texte est par défaut représenté en gras
- l’usage de
<b>
est toléré
La balise <em>
pour une accentuation.
<em>Texte accentué</em>
- signifie : texte accentué. Met en emphase certaines portions de textes
- utilisé aussi pour les mots en langue étrangère
- le texte est par défaut représenté en italique
- l’usage de
<i>
est toléré
Les balises structurantes#
(block)
La balise <div>
structure la page :
- cet élément n’a pas de sémantique particulière
- utile principalement pour la mise en forme en CSS
- souvent accompagné de l’attribut
id
ouclass
Il existe également des éléments structurants sémantiques :
<header>
définit un bloc d’entête (de site, d’article…)<footer>
définit un pied de page (de site, d’article…)<section>
définit une partie de site<article>
définit la zone de contenu textuel d’un site (qui peut être sorti de son contexte en restant compréhensible)<nav>
définit un bloc de navigation<aside>
définit un bloc d’informations complémentaires, annexes
Les tableaux#
(block)
L’utilisation de tableau en HTML se fait de la sorte: tout d’abord, utilisation de la balise <table>
pour créer le tableau. Ensuite, ajoutons une ligne avec la balise <tr>
. Chaque cellule est ensuite ajoutée à l’aide de <td>
. Voici donc le code pour un tableau d’une ligne comprenant 3 cellules :
<table>
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
<td>Cellule 3</td>
</tr>
</table>
- toutes les balises de tableau sont de types block, et donc leur taille est modifiable en CSS
- la balise
<th>
est équivalente à<td>
mais pour des entêtes de cellule
Les autres balises#
<audio>
permet d’insérer du son<video>
permet d’insérer une video-
<canvas>
définit un contexte graphique de dessin via JavaScript -
<dl>
/<dt>
/<dd>
pour une liste de définition <figure>
/<figcaption>
pour une figure accompagnée d’une légende (par exemple une image)<blockquote>
pour une citation<code>
pour afficher un bloc de code<map>
et<area>
pour créer une image-map<object>
pour insérer un objet complexe (plugin, applet…)-
<iframe>
pour intégrer une page HTML dans une autre -
<span>
est la balise neutre, sans sémantique. Peut être utile pour la mise en forme CSS <abbr>
pour une abréviation<time>
pour une date/heure<sub>
et<sup>
pour indice et exposant
Exercice 2 - Utilisation des balises#
Nous allons mettre en application les différentes balises block et inline dans notre page HTML, en ajoutant :
-
dans la partie
<head>
du site :- le titre de la page (affiché dans l’onglet du navigateur)
-
dans la partie
<body>
- pour l’entête :
- un titre de page et un paragraphe juste en dessous
- pour le contenu :
- une série de 3 sous-titres avec leurs paragraphes associés
- dans le premier paragraphe, avant le texte, ajoutez une image
- utilisez des balises
strong
etem
pour mettre l’accent sur certaines portions de texte - faites un ou deux liens au fil du texte
- pour le pied de page :
- un paragraphe avec votre nom, prénom
- pour l’entête :
-
créez une seconde page et créez des liens entre vos pages
-
validez vos pages (pour vérifier le code HTML produit)