Balises

Il existe deux type de balise en HTML : les balises en paire, et les balises orphelines. 

Les balises en paire sont les plus répandues, et s'écrivent de la façon suivante :

<balise attribut="valeur"> Contenu </balise>

Elles se composent d'une balise ouvrante et d'une balise fermante. Les informations de la balise sont donc appliquées à l'ensemble du contenu. Il en existe énormément, tel que les balises de paragraphe <p>, les balises de lien <a>, de liste <ul>, de formulaire <form>...

Il existe également des balises dites "orphelines", qui ne sont composé que d'une unique balise.

<balise attribut="valeur" />

Ce type de balise s'utilise lorsque l'on veut insérer un unique élément à un endroit précis de la page. Les deux plus communes sont <img/> pour les images, et <br/> pour les retour chariot. Dans les deux cas, nous n'avons pas besoin de contenu, il n'est donc pas nécessaire de délimiter le début et la fin de la balise. 

/!\ Le « slash » ( / ) à la fin de la balise n'est pas obligatoire, mais je vous recommande fortement de le mettre pour ne pas confondre vos balises orphelines avec une balise ouvrante.

Block et Inline

Toutes les balises (encore une fois à quelques exceptions près) appartiennent à l'une des deux catégories ci-dessus. Prenons pour exemple deux balises très communes : <p> (paragraphe) et <a> (lien)

<p>Un premier paragraphe <a>avec un lien</a>.</p><p>Suivit d'un deuxième paragraphe sans lien.</p>

Concrètement, qu'est-ce qu'il se passe ? Dans mon HTML, tout est écrit en une seule ligne, il n'y a aucun retour chariot. Pourtant, deux paragraphes bien distinct apparaissent sur la page.

Ceci est dû au fait que <p> est une balise de type block. Le nom est assez explicite, il suffit d'imaginer que tout ce qu'il se trouve dans cette balise est à l'intérieur d'un bloc. Lorsque l'on crée une deuxième balise de type block (un deuxième paragraphe par exemple), celle-ci ce place par défaut sous la première.

Au contraire des balises block, les balises de type inline comme <a>  sont simplement "en ligne", c'est à dire, alignées. On ne peut pas leur définir de taille, elles s'adaptent automatiquement à leur contenu.

Les balises de formatage de texte (<strong>, <em>...) sont généralement de type inline.

DIV et SPAN

Comme vu précédemment, nous avons à notre disposition des balise de type block et de type inline. Mais nous avons certaines fois besoin d'utilise un simple block, et non un paragraphe, ou tout autre balise de type block. Il en va de même si nous voulons donner un effet spécifique à un texte, sans passer par les des balises déjà existantes. Pour cela, il existe deux balises universelles : 

• <div> (de type block), 

• <span> (de type inline).

Ces deux balises n'ont que peu d'utilité ainsi, c'est pourquoi elles sont sont toujours utilisées avec des attributs, au contraire de d'autre balises génériques qui n'en ont pas forcément besoin.

Introduction au HTML Les attributs