Principales balises en HTML

Liste des points abordés

A noter

Pour être facilement interprété par le navigateur, et plus tard par des règles de style et du code javascript, le HTML doit respecter quelques règles simples.

De nombreux sites webs aujourd'hui encore profitent du fait que le rendu des tableaux est sensiblement le même sur tout les navigateurs. Le HTML en est alourdi inutilement, est bien plus difficile à créer et à débugger, et les outils logiciels (navigateurs, moteurs de recherche etc...) ne peuvent pas en extraire de sens. Il est bien plus intéressant d'utiliser un code HTML riche et d'en contrôler l'apparence par des feuilles de style.

Définir la taille du texte

Ce paragraphe pourra être agrandi en changeant la taille de la police car sa taille de police est définie en em.

Celui-ci par contre, dont la taille est définie en px ne sera pas redimensionnable pour les utilisateurs d'Internet Explorer (et c'est parfois très génant).

Les 6 niveaux de titre (styles par défaut)

Titre de niveau 1

Titre de niveau 2

Titre de niveau 3

Titre de niveau 4

Titre de niveau 5
Titre de niveau 6

Paragraphes et citations

Les éléments de type 'bloc' (tels quel les paragraphes, titres, listes et éléments de liste, formulaires, tableaux etc...) sont affichés avec un saut de ligna avant et après.

Suivant la longueur de la citation, on utilisera soit <q> soit <blockquote>

Citation longue avec blockquote :

Un code HTML bien formé (balises correctement imbriquées, attributs entre "guillemets", éléments utilisés pour leur valeur sémantique) apporte de nombreux avantages. Le code est plus léger, la présentation est séparée et peut donc être modifiée en une seule fois pour l'ensemble du site, et les outils de navigation (lecteurs d'écrans pour malvoyants, etc) peuvent donner une vue d'ensemble du document aux utilisateurs n'ayant pas accès aux ressources graphiques ou multimédia utilisées.

<q>Citation courte</q> (selon la langue du document, les guillemets appropriés sont ajoutés si le navigateur en est capable.)

Listes

Liste à puces (ul) :

Liste numérotée (ol) :

  1. Elément de liste numérotée (ol)
  2. Il est également possible d'imbriquer des listes :
    1. De nombreux styles de numérotation sont disponibles : numeric (par défaut)
    2. upper-roman
    3. lower-roman
    4. upper-alpha
    5. lower-alpha
  3. ...

Liste de définition (dl) :

Terme à définir (dt)
Définition (dd)
Deuxième terme
Deuxième définition
On peut associer
plusieurs termes
à une même définition :
Définition pour plusieurs termes
On peut aussi associer plusieurs définitions à un même terme :
Première définition
Deuxième définition
...

Formulaires

Voici les différents contrôles disponibles dans un formulaire :

On peut inclure un paragraphe d'explication, dans une balise <p>.







Boutons radio

Les boutons radio partageant le même attribut name seront mutuellement exclusifs :



Boutons checkbox

Pour un choix de type oui/non, utiliser un input de type checkbox (et pas un <input type="radio"> car s'il n'y en a qu'un de même name, l'utilisateur ne pourra pas le décocher).


Paragraphe associé visuellement à une checkbox :

Remarquez que le <label> redirige les clics vers le champ <input> auquel il est associé.

Survolez la deuxième case à cocher pour voir le contenu de son attribut title s'afficher en infobulle. Remarquez au passage qu'il est beaucoup plus difficile de viser une case simple qu'un label.

Dans les version actuelles de HTML, il est obligatoire d'utiliser un élément label pour chaque élément input de type "text", "password", "radio" et "checkbox".

Boutons de soumission du formulaire

Il est parfois utile de mettre un bouton pour effacer le formulaire, mais je préconise de le mettre après le bouton envoyer sinon l'utilisateur risque d'appuyer dessus au lieu du bouton "envoyer"


Tableaux

Les tableaux sont à utiliser pour présenter des données tabulaires (horaires, ensemble de valeurs, etc...)

Horaires de la bibliothèque
Mardi Mercredi Jeudi Vendredi Samedi
10h - 12h 10h - 12h 10h - 12h
13h30 - 18h30 13h30 - 18h 13h30 - 18h30 13h30 - 18h30 13h30 - 17h

Document présentant les principales balises HTML, réalisé par Goulven CHAMPENOIS.