Les balises HTML de base
Les balises HTML
Le langage de programmation HTML.
Les balises HTML permettent le codage de la structure de vos pages et articles. Elles se présentent la plupart du temps sous cette forme :
<balise ouvrante>Texte </balise fermante>
-
La page HTML minimale :
- <!DOCTYPE html>
- <html>
- <head>
- <title>Premier essai</title>
- </head>
- <body> Bonjour le monde.
- </body>
- </html>
La définition de type de document
Il existe plusieurs versions du HTML.
- HTML 4.01
- XHTML 1.0
- XHTML 1.1
- HTML 5
La version actuelle est la version 5
Pour savoir si vous respectez bien les règles d’une certaine version, il faut dire la version que vous utilisez ! C’est à cela que sert la première ligne.
Le DOCTYPE
Cette première balise donc est la « déclaration de type de document » (appelée couramment doctype). Il est indispensable. Dans le cas présent (HTML5) il s’écrit (toujours) comme cela :
<!DOCTYPE html>
Sans un DOCTYPE, vous ne pourrez pas faire passer votre page par un validateur de code HTML.
Vous avez sûrement remarqué qu’il n’y a pas de / final. En effet, le DOCTYPE n’est pas une balise. Il a un statut bien particulier.
La balise <html>
Un document HTML est entièrement compris dans une balise <html>.
Même si le navigateur s’y attend, vous êtes poli et vous lui dites que vous commencez votre document HTML.
Puis tout aussi poliment, que vous le terminez.
Ainsi la balise <html> sera toujours la toute première après le DOCTYPE, et la balise </html> la toute dernière.
À l’intérieur on trouve deux parties principales : un en-tête et un corps, placé respectivement dans les balises <head> et <body>. L’en-tête est constitué de déclarations générales concernant la page HTML, destinées au navigateur, aux moteurs de recherche etc. Le corps contient le document lui-même : ce qui sera affiché par le navigateur dans la fenêtre de rendu. Cette partie ne contient aucun élément obligatoire.
La balise <head>
La balise <head> délimite l’en-tête de la page dont on vient de parler. On y trouve des informations qui ne seront pas affichées directement dans la zone de rendu du navigateur.
Par exemple :
- Le titre de la page,
- Un lien vers la feuille de style,
- Une description et des mots clés,
- Etc…
La balise <title>
L’en-tête contient un élément obligatoire : <title> qui indique le titre de la page. C’est le titre qui s’affiche ensuite en haut de la fenêtre du navigateur.
Essayez de mettre un titre pertinent et différent pour chaque page, qui permette d’identifier le site et la page en elle-même. Par exemple, « Sommaire » est un très mauvais choix. Quand votre page se retrouvera dans les favoris de quelqu’un, cette personne sera incapable de savoir de quelle page il s’agit rien qu’en regardant le nom. Préférez des choses du style « Accueil » ou « Mon site« .
La balise <body>
Tout le corps de notre document est dans la partie <body>. Elle comprend :
- Le texte,
- Les liens,
- La référence des images
- Et d’une manière générale, tout ce qu’un auteur peut vouloir mettre dans un document HTML.
Les commentaires
Les commentaires sont du texte écrit dans le code HTML qui n’est pas visible dans le rendu de la page. Ils jouent habituellement le rôle de notes pour expliquer ce qui a été fait dans la page, ou bien tout simplement pour indiquer des modifications à faire ultérieurement. Ils sont biens sûr facultatifs, mais ils peuvent vous être utiles !
Un commentaire commence par les caractères :
<!-- et se termine par les caractères -->
Pratiquement n’importe quelle chaîne de caractères peut être placée à l’intérieur d’un commentaire :
- Du texte,
- Des balises,
- Mais pas une suite de deux traits d’union adjacents (–).
Les balises de structure
L’éditeur de WordPress ajoute des balises un peu n’importe comment. Certaines lignes de code écrite par WordPress sont parfois inutiles ou sont en double et mêmes parfois sont gênantes au gré des mises à jour. Que ces mises à jour soient faites par vous (quand vous corrigez ou quand vous transformez vos textes) ou par WorPress.
Logo WordPress.
Afin de commencer à apprendre les premières balises utiles en html, en voici quelques-unes qui devraient vous aider dans vos premiers pas. Voilà donc une petite liste de balises avec leurs effets. Que vous utilisiez le langage html directement ou que vous utilisiez WordPress pour construire votre site Web.
La balise <p>...</p>
Cette balise permet de définir un paragraphe. À la suite d’un paragraphe, retour à la ligne et saute une ligne.
Exemple :
<p> Mon premier paragraphe </p>
<p> Mon deuxième paragraphe </p>
ce qui donne :
Mon premier paragraphe
Mon deuxième paragraphe
La balise <br/>
Cette balise permet d’aller à la ligne. Elle n’est faite que d’une seule balise. On peut également utiliser le caractère de saut de ligne  
Exemple :
Mon texte<br/>
Ce qui donne :
Mon texte
Etc…
La balise <center> … </center>
Cette balise permet de centrer un texte horizontalement.
Exemple :
<center> La suite </center>
Ce qui donne :
La suite
La balise <strong> … </strong>
Cette balise permet d’afficher un texte en caractères gras
Exemple :
<strong> mon texte en gras </strong>
Ce qui donne :
Mon texte en gras
La balise <i> … </i>
Cette balise permet de mettre le texte en italique
Exemple :
<i>Mon texte</i>
Ce qui donne :
Mon texte
La balise <u> … </u>
Cette balise permet de souligner un texte
Exemple :
<u> Mon texte souligné </u>
Ce qui donne :
Mon texte souligné
La balise <s> … </s>
Cette balise permet de barrer un text.
Exemple :
<s> Mon texte barré </s>
Ce qui donne :
Mon texte barré
La balise <q> … </q>
Cette balise permet de faire une citation courte entre guillemets.
Exemple :
<q> citation courte </q>
Ce qui donne :
« Citation courte »
La balise <blockquote> … </blockquote>
Cette balise donne une marge à gauche.
Exemple :
<blockquote> Citation longue avec marge à gauche</blockquote>
Ce qui donne :
Citation longue avec marge à gauche, Citation longue avec marge à gauche, Citation longue avec marge à gauche, Citation longue avec marge à gauche.
La balise<hr/>
Cette balise permet de tracer un trait de séparation
Exemple :
Mon texte<hr/>
Ce qui donne :
Mon texte
_____________________________________________________________
Les balises de titres <h…> … </h…>
<h1>1er niveau</h1>
<h2>2ème niveau</h2>
<h3>3ème niveau</h3>
<h4>Etc…(jusqu’à 6)</h4>
Exemple :
<h1>1er niveau</h1>
<h2>2ème niveau</h2>
<h3>3ème niveau</h3>
<h4>4ème niveau</h4>
<h5>5ème niveau</h5>
<h6>6ème niveau</h6>
Ce qui donne :
1er niveau
2ème niveau
3ème niveau
4ème niveau
5ème niveau
6ème niveau
Les balises de puces
Puces non numérotées <ul> puis <li>… </li> et enfin </ul>
Exemple :
<ul> début de la liste
<li> Un élément de la liste </li>
<li>un second élément de la liste</li>
<li>un troisième élément de la liste</li>
<li>etc…</li>
<ul/> fin de la liste
Ce qui donne :
- Un élément de la liste
- un second élément de la liste
- un troisième élément de la liste
- etc…
Puces numérotées <ul> puis <li>et </li> et enfin </ul>
Exemple :
<ol> début de la liste
<li> Un élément de la liste </li>
<li>Un second élément de la liste</li>
<li>Un troisième élément de la liste</li>
<li>etc…</li>
<ol/> fin de la liste
Ce qui donne :
- Un élément de la liste
- Un second élément de la liste
- Un troisième élément de la liste
- etc…
Voilà donc quelques balises de l’html5 (dernière version de html).
Vous pouvez insérer ces balises dans une page de code html mais vous pouvez également les utiliser dans la partie « texte » de l’éditeur WordPress.
Conseils
- Aérez votre code :
- Les retours à la ligne n’ont pas d’incidence sur le rendu (si ce n’est un espace). N’hésitez donc pas à revenir à la ligne régulièrement afin de structurer votre code.
- Si vous mettez plusieurs espaces, cela est interprété comme un seul espace, on peut donc jouer sur la « mise en forme » du code pour se repérer, et par exemple mettre un ou plusieurs espace en début de ligne (cela s’appelle l’indentation). En général, quand un texte est entre une balise d’ouverture et une balise de fermeture, on décale les différentes lignes de 2 ou 3 espaces par rapport à ce qui précède.
- Les retours à la ligne n’ont pas d’incidence sur le rendu (si ce n’est un espace). N’hésitez donc pas à revenir à la ligne régulièrement afin de structurer votre code.
- Mettez des commentaires pour pouvoir vous repérer.
- Utilisez un éditeur de texte avec :
- gestion des indentations : il suffit d’appuyer sur la touche de tabulation pour créer un décalage, et le décalage est appliqué automatiquement aux lignes suivantes.
- « coloration syntaxique » : les caractères spéciaux et balises sont reconnus et mis en couleur, ce qui facilite la lecture du code.
Voici par exemple un commentaire permettant de se repérer facilement (l’exemple suivant se trouverait au sein d’un code, donc notamment après les balises <DOCTYPE html><html> … <body> et avant le </body> <html> final).
<!--******************** première partie ********************--> <h1> Première partie </h1> Nous nous retrouverons dans un prochain article et nous poursuivrons l'examen des balises html5.
À bientôt !
EdN.
