Le W3C a défini deux langages afin de bien séparer le fond et la forme.

Le html décrit le contenu du document: le fond, et le css décrit sa forme.

HTML5 logo and wordmark

C'est un langage qui utilise des balises entre chevrons(<balise>) pour structurer les pages web et leur donner un sens.

Une page html commence toujours par indiquer le doctype. Depuis html5 c'est très simple:

<!doctype html>

C'est quand même mieux que son ancêtre en html4:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Le document est séparé en deux grandes parties:

  • le head: qui contient des informations utiles au navigateur et aux robots qui consultent votre page.
  • le body: qui contient les informations qui seront effectivement affichées à l’écran.

Structure modèle

Voici une structure qui peut vous servir quand vous commencez une nouvelle page web.

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <title>Un document minuscule</title>
  </head>
  <body>
    <h1>Titre principal de mon document</h1>
    <!-- Ceci est un commentaire -->
    <p>
      Regarde maman, je suis en train de coder en
      <abbr title="Hyper Text Markup Language" lang="en">HTML</abbr> !
    </p>
  </body>
</html>

Les principales balises

Le langage html utilise des balises pour indiquer le sens sémantique des éléments d'une page. Ces balises ou tags permettent de construire une hiérarchie au sein du document appelée DOM(Document Object Model).

Toutes les balises sont référencées sur le site MDN, en voici quelques-unes.

balise

rôle

exemple

<h1>, <h2>, ...<h6>

Titres et sous-titres

<h1>Titre principal de mon document</h1>

<p>

Paragraphe

<p>Comme je descendais des Fleuves impassibles.</p>

<strong>

texte important(en gras par défaut)

<p>Comme je <strong>descendais</strong> des Fleuves impassibles.</p>

<em>

texte en emphase(en italiques par défaut)

<p>Comme je <em>descendais</em> des Fleuves impassibles.</p>

<a href="dest">

Lien vers la page d'URL dest

<a href="wikipedia.fr">Se rendre sur Wikipedia</a>

<img src="image.png">

Affichage de l'image d'URL image.png

<img src="photo.jpg" alt="Photo de mon chat"/>

<ul>

<li>

liste à puce

élément d'une liste

<ul>
<li>1er élément de la liste</li>
<li>2e élément de la liste</li>
<li>...</li>
</ul>
balises orphelines

Certaines balises sont orphelines, c'est à dire qu'elles ne présentent pas de balises fermantes. Par exemple la balise d'image <img />. <img src="logo.png" alt="Logo du site" />

attributs d'une balise

Les éléments src et alt d'une balise image ou encore href d'un lien sont les attributs de balises. Ils ne s'affichent pas mais apportent des informations supplémentaires au navigateur.

Seul le texte écrit entre les balises ouvrante et fermantes s'affiche à l'écran.

Règles d'écriture

Les balises ouvrantes et fermantes doivent toujours être correctement imbriquées, c'est à dire que les balises fermantes doivent êtres écrites dans l'ordre inverse des balises d'ouverture. Une bonne imbrication des balises est une des règles à respecter afin d'avoir un code valide. Source MDN

Voici un exemple de code valide :

<em>Ceci est <strong>très</strong> important</em>.

Voici un exemple de code non-valide :

<em>Ceci est <strong>très</em> important</strong>.

Quelques petits plus

  • Les commentaires sont écrits <!-- Ceci est un commentaire -->
  • On écrit en général les balises en minuscules.
  • L'indentation n'est pas obligatoire, mais elle rend le fichier plus lisible.
  • Les balises <div>, <header>, <article>, <footer> ont été créé dans la version 5 de `html afin de créer des blocs spéifiques dans la page.