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)
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

Les formats d’images du web

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 ou class

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 et em 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
créez une seconde page et créez des liens entre vos pages
validez vos pages (pour vérifier le code HTML produit)