Mise en forme générale

Le traitement de texte respecte les espaces, tabulations et sauts de lignes à l'endroit où l'auteur les a placés.
HTML remplace plusieurs espaces et/ou tabulations consécutifs par un seul espace.
Il va à la ligne seulement lorsque la longueur de celle-ci dépasse le bord droit de la fenêtre d'affichage.

On distingue deux types de balises

les balises de type bloc (block en anglais)

Elles sont précédées et suivies d'un espace séparateur.
Les balises de type "bloc" peuvent contenir du texte, des balises de type "en ligne", ou d'autres balises de type "bloc".

Principales balises de type "bloc" :

<body>, <head>, <style> ,<div> <hr />, <p> <h1> , <h2> , <h3> , <h4> , <h5> , <h6>
<ul>, <li> <form>,<fieldset> <table>, <tbody> , <tfoot> , <th> , <thead> , <tr>, <td>

 

les balises de type en ligne (inline en anglais)

elles s'insèrent dans le texte courant, sans espace séparateur.
Les balises de type "en ligne" ne peuvent contenir que du texte ou d'autres balises de type "en ligne", mais elles ne peuvent pas contenir de balises de type "bloc".

Principales balises de type "en ligne" :

<a> , <b> , <em> , <i>, <strong> <br /> <input /> , <label>
<button>, <img /> <span> <select> ,<option>

 

Les titres

HTML prévoit six niveaux de titres, de <h1> à <h6>. En voici des exemples :

Titre de niveau 1

Titre de niveau 2

Titre de niveau 3

Titre de niveau 4

Titre de niveau 5
Titre de niveau 6

Les listes

Elles sont de deux types mais, grâce aux CSS, on peut se contenter d'utiliser la liste non numérotée ( <ul> ou Unordered List) et modifier ses caractéristiques à volonté.
Ces listes servent de plus en plus pour afficher des menus, des boutons... en modifiant leur style.
Reportez-vous au tuto CSS pour en savoir plus.

Je laisse volontairement dans l'oubli certaines balises de listes dont l'usage est de moins en moins fréquent (les dispositions prédéfinies peuvent être affinées par les styles CSS).

Quelques exemples :

Liste simple (un niveau) Liste à trois niveaux Liste modifiée avec CSS
images au lieu de puces
  • élément
  • élément
  • élément
  • niveau 1
    • niveau 2
      • niveau 3
  • niveau 1
    • niveau 2
      • niveau 3

Liste modifiée avec CSS, pas de puces, changements d'aspect...

 

Les séparateurs

Saut de ligne : <br />

Cette balise effectue un saut de ligne (sans insertion de ligne vide supplémentaire et sans changer de paragraphe).
Cette balise est fermée en interne par "espace" + " /".

La balise <hr /> : ligne horizontale

Elle sépare de façon plus visuelle les diverses parties de votre page en employant une ligne horizontale dont on peut faire varier la hauteur, la largeur et l'aspect graphique.

Les commentaires

Les commentaires sont indispensables quelque soit le langage.
En HTML, ils se notent grâce aux balises : <!-- (ouverture) et --> (fermeture)

ATTENTION : La balise de fermeture est obligatoire (sinon tout le reste du code est ignoré par le navigateur.