Connaitre les bases du HTML est indispensable lorsqu’on est webmaster; même si on utilise un CMS avec un éditeur de texte. Cela permet de comprendre son code (dans l’ensemble) et de pouvoir rectifier les erreurs de bases. Dans cet article vous toruverez donc les balises HTML les plus utilisées et des exemples d’utilisation.

Les balises de mise en forme de base

La majorité du temps, pour mettre en forme vos texte, quelques balises suffiront:

Paragraphe:

<p> ... </p>

Saut de ligne: (Attention => c’est une balise auto-fermante)

...<br />

Texte en gras: (Attention => A une signification/importance en terme de SEO)

<strong> ...</strong>

Texte en italique: (Attention => A une signification/importance en terme de SEO)

<em> ... </em>

Titre principale: (Attention => une seule balise H1 par page)

<h1> ... </h1>

Sous titres: (selon les niveaux de titre et la structure du contenu)

<h2> ... </h2> à <h6> ... </h6>

Une zone: (Attention => A utiliser que si c’est indispensable)

<div> ... </div>

Toute la mise en forme “visuelle” doit être faite EXCLUSIVEMENT dans le CSS. Il ne faut pas mettre de “style inline” dans votre code HTML (ce qui est le cas lorsqu’on change le style via un éditeur dans un CMS):

<p style="text-align: left; font-size: 22px; text-decoration: underline; color: #FF0000;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac ornare massa. Ut semper lobortis dolor sed egestas. Praesent ligula elit, ultrices vel tincidunt vel, luctus a metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> 	

Toute cette mise en forme visuelle (style) doit IMPERATIVEMENT être dans votre feuille de style CSS ! (ce qui n’est pas le cas sur une très grande majorité des sites et blog existants). Cela vous pénalise en terme de SEO et de temps de chargement des pages => Il faut avoir un code propre et optimisé.

Code HTML

<h2>Les bases du HTML</h2>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit
<strong>HTML</strong>. Mauris
ac ornare massa. Ut semper lobo
<em>Les bases</em>.<br />
Praesent ligula elit, ultrices
vel tincidunt vel, luctus metus.
Class aptent taciti sociosqu ad 
litora torquent conubia nostra</p>

Résultat

Les bases du HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit HTML. Mauris ac ornare massa. Ut semper lobo Les bases.
Praesent ligula elit, ultrices vel tincidunt vel, luctus metus. Class aptent taciti sociosqu ad litora torquent conubia nostra


La balise image

La balise image est une balise auto-fermante, qui doit contenir des attributs obligatoirement; et qui peut également contenur des attributs “optionnels”:

Les attributs indispensables:
src="…" => source de l’image: lien relatif ou absolu de l’image
alt="…" => description alternative de l’image (important pour le SEO)
width="…" => largeur de l’image (important pour le temps de chargement du site)
height="…" => hauteur de l’image (important pour le temps de chargement du site)

Les attributs optionnels
title="…" => Titre de l’image (s’affiche au passage de la souris)
class="…" => Pour la personnalisation via le CSS
id="…" => Pour la personnalisation via le CSS

Ici aussi, l’attribut “style=…” ne doit pas être utilisé dans la balise, mais UNIQUEMENT dans la feuille de style CSS.

Code HTML

<img src="http://www.deepintheweb.com/wp-content/uploads/HTML.jpg"
alt="Code HTML"
width="300px"
height="200px"
title="Apprendre le HTML" /> 

Résultat
Code HTML

La balise de lien hypertexte

La balise de lien hypertexte contient plusieurs attritubs:

href="…" => Destination du lien (relatif ou absolu)
title="…" => Titre du lien (s’affiche au passage de la souris)
target="…" => Pour le type d’ouverture du lien

Les différentes “target” possibles sont:
_blank: ouvre le lien dans un autre onglet
_self / _top / _parent (pour des utilisations spécifiques).

Code HTML

<a href="http://www.w3schools.com/html/"
title="W3Schools HTML5"
target="_blank">
W3Schools HTML5
</a>

Résultat

W3Schools HTML5

Vous pouvez également regarder les tutos vidéos Apprendre le HTML pour les nuls