Table des matières

Les bases de HTML

Introduction

Qu'est ce que le HTML ?

Le HTML (HyperText Markup Language) est un format de présentation de données permettant de créer des pages web pouvant être lues dans les navigateurs (ex : Chrome, Firefox, Internet Explorer, …). L'ensemble de ses pages web constitueront votre site.

Qu'est ce qu'une balise HTML ?

Une balise HTML est un élément que l'on va ajouter au texte de départ pour dire au navigateur de quelle manière l'afficher. Cette balise ne sera pas affichée telle quelle par le navigateur mais sera interprétée par celui-ci. Une balise est toujours délimitées par les signes < et >.

Exemple de balise : <html>


Une balise peut être constituer d'attributs. Les attributs sont des informations complémentaires qui caractérisent la balise. Un attribut se présente sous la forme nomattribut="valeur".

Exemple de balise avec attribut : <html lang="fr">

ici la balise est html avec un attribut lang ayant pour valeur fr.

Chaque balise doit être fermée de cette façon </html>, mais il existe des exceptions, les balises simples.

Les balises simples

Ce sont des balises qui sont dites « vides », c'est à dire qu'elles ne vont pas contenir d'autre balise.

Exemple : <img src="/url/de/image" />

Quelques balises courtes :
<br />, <hr />, <img />, <input />, <meta />, <link />, <base />

Les balises imbriquées

Il est possible d'imbriquer des balises HTML, par contre il est très important de respecter la hiérarchie. C'est à dire que la première balise ouverte soit la dernière fermée.

Exemple : <p><strong>Ceci est en gras</strong> et ceci est normal</p>


Structure d'un document HTML

Avant de commencer le développement d'une page, il est important d'en connaître la structure.
Voici le modèle de base possédant la structure minimale obligatoire.

<!DOCTYPE html>
<html>
<head>
	<title>Titre de la page</title>
	<meta http-equiv="content-type" content="text/html ; charset=utf-8" />
</head>
<body>
 
< !-- Ici votre site - - >
 
</body>
</html>

La première ligne de cet exemple s'appelle le DOCTYPE. C'est la balise la plus importante de votre page. Elle permet de conserver la compatibilité du rendu de votre page sur les différents navigateurs. Il en existe plusieurs, ici c'est le modèle de DOCTYPE pour les documents HTML5.

Ensuite vient la balise <html>. Elle encadre l'ensemble des autres balises.
La balise <html> contient deux grandes balises :

<head> qui contient l'en-tête de la page, cette partie ne s'affiche pas à l'écran et indique aux navigateurs les spécificités de la page en cours.
<body> qui contiendra le corps de votre document. C'est à dire ce qui s'affichera à l'écran de votre visiteur.

Petite précision importante, les balises <html>,<body> et <head> sont uniques. C'est à dire que le code source de votre page ne doit en contenir qu'une. Si votre page possède deux balises <body>, vous aurez des surprises à l'affichage.

Le DOCTYPE en détail

Le DOCTYPE sert à déclarer quelle norme s'applique à notre page.
Il indique aux navigateurs de quelle manière interpréter telle balise ou telle propriété CSS. En cas d'absence de DOCTYPE ou simplement en cas d'erreur de frappe, le navigateur passera en mode « Quirk » (ou en français non conforme).
En mode Quirk le navigateur est seul maître à bord est fait ce qu'il veut, cela impactera l'affichage de votre page. L'image ci-contre montre quelques différences entre le mode « QUIRK » de Internet Explorer et le mode « normal ».Le DOCTYPE se choisi en fonction de vos besoins. La liste des principaux DOCTYPE est disponible sur cette page.

Les commentaires

Les commentaires permettent de laisser des informations ou des descriptions et sont utilisables à n'importe quel endroit de votre document. Ces commentaires ne seront pas affichés à l'écran mais seront présent dans le code source de votre page. Il est donc important de ne pas y mettre des informations confidentielles.

Ils sont délimités par < !– et –> et peuvent être multi-lignes.


Par soucis de compatibilités entre les navigateurs, il est fortement conseillé de se limité à 2 traits d'unions

Exemples : 

<!-- Voici un premier commentaire sur une ligne. -->
 
<!-- Voici un deuxième commentaire.
     Celui-ci est multilignes. -->
 
<!------------------ Cette méthode est déconseillée ! ----------------->

Le <head> en détails.

La balise <title>

Cette balise permet d'indiquer le nom de votre page. C'est une des balises les plus importantes de votre document. C'est son contenu qui sera affiché en titre des résultats de la recherche dans les moteurs de recherche.

Exemple : 

<title>Cours HTML – Les bases</title>

Conseils SEO : Chacune de vos pages de votre site devront posséder un titre unique, toujours en rapport avec le contenu de la page et contenant les mots clés importants présents dans votre contenu.

Les balises META

A quoi servent-elles ?

Les balises META sont obligatoirement placées au niveau de la balise <head>. Elles permettent d'apporter aux navigateurs (et aux moteurs de recherche, même si cela à un impact minime) des informations sur la page en cours d'affichage comme son auteur, la date de création, son jeu de caractères (encodage), etc.
Il y a deux grandes familles de balises META :


Conseils SEO : Depuis quelques années, GoogleBot (Robot indexant les pages web pour Google) prend de moins en moins en compte le contenu des balises META. Un grand nombre de celles-ci sont donc désuètes. GoogleBot se focalise, notamment pour les pages en HTML5, sur les micro-données. Mais, et oui il y a un mais, GoogleBot, pour mesurer la pertinence de la page fera une comparaison rapide avec certaines balises META et le contenu de votre document.


La balise <meta content-type >

Cette balise est obligatoire pour passer la validation W3C (certification de l'organisme éditeur des normes Web). Elle permet d'indiquer aux navigateurs le type MIME de la page et son encodage (évite que les lettres accentuées soient remplacées par des ? Ou d'autres caractères bizarres.

Exemple : 

<meta http-equiv="content-type" content="text/html; charset=utf-8">

Les balises d'informations

La liste des balises META d'information est très longue, certaines ne servent que d'en des cas particulier. Par exemple pour les informations affichées lors d'un partage sur les réseaux sociaux.
Le nom de l'auteur : S'il y en a plusieurs, les séparés par des virgules. 

<meta name="author" content="Cédric MONTUY" />


L'éditeur du site : Renseigne le nom et prénom de l'éditeur du site. S'il y en a plusieurs, les séparés par des virgules. Dans le cas d'une société, il faut indiquer la raison sociale. 

<meta name="publisher" content="CHG-WEB" />


Adresse mail de l'auteur : A éviter, cette balise est repérée par des robots spammeurs. 

<meta name="reply-to" content="miel@chg-web.com" />


Adresse mail de la personne à contacter : A éviter, cette balise est repérée par des robots spammeurs. 

<meta name="contact" content="miel@chg-web.com" />


Nom de la personne à contacter : A éviter, cette balise est repérée par des robots spammeurs. 

<meta name="contactname" content="montuy337513" />


Nom de la société détentrice : Indique le nom de la société détentrice du site web. 

<meta name="contactorganization" content="CHG-WEB" />


Indiquer l'adresse : 

<meta name="contactstreetaddress1" content="LD Capel Blanc" />
<meta name="contactstreetaddress2" content="maison de gauche" />
<meta name="contactzip" content="46170" />
<meta name="contactcity" content="Castelnau-Montratier" />
<meta name="contactstate" content="France" />


Description de la page : Courte description du contenu de la page. Cette description sera affichée dans les résultats de certains moteurs de recherche.

Conseils SEO : Ne pas dépasser les 200 caractères. 


<meta name="description" content="Tutoriel sur le langage HTML" />


Mots-clés : Contient la liste des mots-clés que vous avez choisi pour votre page web. Ces mots-clés pourront être utilisés par les moteurs de recherche pour « catégoriser » votre site ou pour lui attribuer à votre page un niveau de crédibilité (GoogleBot par exemple) .

Conseils SEO : Cette liste de mots-clés ne doit pas dépasser les 500 caractères. 


<meta name="keywords" content="tutoriel html, cours html, balise meta, html, informatique, html pour debutant" />


URL principale du site : 

<meta name="identifier-url" content="http://www1.zonewebmaster.eu" />


Sujet du site : Précise le sujet du site en quelques mots. 

<meta name="subject" content="Création, hébergement et gestion  de sites web ou d'applications" />


Réseau de publication : Définit le type de réseau de publication.

Valeurs Description
global Visible sur l'internet
local Visible uniquement sur un poste local
iu Visible sur un intranet


Par défaut, cette valeur est à global 

<meta name="distribution" content="global" />


Type de public : indique le type de public visé par le site. Utilisé par les systèmes d'autorisation parentale par exemple.

Valeurs Description
general Tout public
mature Réservé aux adultes
restricted Accès restreint
14years Accès interdit en-dessous de 14 ans


Par défaut, cette valeur est à general 

<meta name="rating" content="general" />


Langue du site : 

<meta name="langue" content="fr" />


Copyright : Précise le ou les copyrights auxquels la page est soumise 

<meta name="copyright" content="© 2016 – CHG-WEB tous droits réservés." />


Générateur : Si plusieurs logiciels sont utilisés, les séparés par des virgules. Balises a évité car des robots s'en servent pour repérer les sites vulnérables ou les sites potentiellement spammables. 

<meta name="generator" content="Xoops, Notepad++" />


Dates de votre page : Indique la création de la page sous la forme JJMMAAAA 

<meta name="date-creation-ddmmyyyy" content="20102014" />


Indique la date de révision (ou modification) sous la forme JJMMAAAA 

<meta name="date-revision-ddmmyyyy" content="25102014" />


Indique la date d'expiration (date au format anglais), si la page n'expire pas, mettre never à la place de la date. Si la page est expirée, le navigateur affichera la page précédente. La valeur pas défaut est never. 

<meta name="expires" content="21 december 2016" />


Type de page : Précise le langage de scripts utilisé dans la page par son type MIME. 

<meta http-equiv="content-script-type" content="text/javascript" />


Robots : Indique aux robots indexeurs si la page doit être indexée ou non. Plusieurs valeurs sont possibles, séparées par une virgule.
Par défaut la valeur est all.

Valeurs Description
index Autorise les robots à indexer la page
noindex Interdit aux robots d'indexer la page
follow Autorise les robots à suivre les liens de la page
nofollow Interdit aux robots de suivre les liens de la page
all Correspond à 'index, follow'
none Correspond à 'noindex,nofollow'
noarchive Interdit aux moteurs de recherche de proposer une version de cache de la page 


<meta name="robots" content="index, nofollow, noarchive" />


Revisitez nous : Précise aux robots le nombre de jour (ou de mois) d'intervalle à respecter avant leur prochaine visite sur le site pour relever les nouveautés. A l'heure actuelle, cette balise META n'est absolument pas prise en compte par les robots indexeur. 

<meta name="revisit-after" content="7 days" />


Rafraichissement de la page : Précise aux navigateurs de rafraîchir la page toutes les x secondes. Si en plus une URL est renseigné, la navigateur redirigera le visiteur au bout de x secondes vers la page indiquée. 

<meta http-equiv="refresh" content="60" />
<meta http-equiv="refresh" content="60 ; url=http://www.chg-web.com/index.php" />


Il existe plein d'autre balises META, certaines sont spécifiques a certaines utilisations comme les métadonnées (DublinCore), d'autres spécifiques à un navigateur ou d'autres carrément obsolète.

Conseils SEO : Il n'est pas nécessaire de mettre des dizaines de balises META dans votre <head>. Plus votre document contient des caractères (ou des médias), plus votre page sera longue à charger, moins les robots des moteurs de recherche considéreront votre page. Il faut donc trouver un juste milieu, selon votre site, le contenu de votre page et les balises META à utiliser.


Les styles CSS

Les feuilles de style en cascade ou CSS (Cascading Style Sheets) s'utilise pour mettre en page votre code HTML. Il existe deux manières d'insérer des styles dans votre page.
Soit directement dans votre page (méthode styles internes) 

<style type="text/css">
    body{
	background-color : #fff ;
     }
</style>


Soit dans un fichier spécifique (méthode style externe), méthode à privilégier pour un site en production. 

<link rel="stylesheet" type="text/css" href="/chemin/du/fichier.css" />


Le CSS n'étant pas le sujet du jour, d'autres cours seront disponibles sur ce sujet passionnant.

Les scripts

Les scripts sont des petits programmes en JavaScript ou en VBScript exécutés « côté client 1) » qui augmentent l'ergonomie de vos pages.
Comme pour les feuilles de style en cascade, nous pouvons incorporer les scripts des deux même manières.
Soit en interne (méthode script interne) : 

<script type="text/javascript">
function maFonction(){
/* du code ici */
}
</script>


Soit en externe (méthode script externe) : 

<script type="text/javascript" src="/chemin/du/fichier/javascript.js"></script>


Le choix entre les deux méthodes dépendent si le script doit être exécuté sur toute les pages ou seulement sur une seule. Pour éviter la répétition fastidieuse de code et pour éviter les oublis en cas de modifications ultérieures, on privilégiera la méthode externe. Dans les autres cas, on utilisera bien sûr la méthode interne. Cette réflexion est valable aussi pour les feuilles de style.

Conseils SEO: Il est préconisé, pour accélérer la vitesse de chargement de votre page, de mettre l'ensemble des scripts JS en fin de page juste avant </body>. Et oui, le temps de chargement de votre page influence la notation de votre site auprès des moteurs de recherche.


Le <body> dans le détail

La balise <body> est le corps de votre document. C'est à cet endroit que vous allez mettre tout le texte et toutes les images qui apparaîtront lorsqu'un visiteur consultera votre page ?

Les types de balises

Il existe différents type de balises : Les types « block », les types « inline » et les types « none ». Le type de la balise influence l'affichage des différents éléments de votre page.

Type « block »

Les éléments de type « block » sont généralement ceux que l'on utilise pour la mise en page.
La balise de type « block » occupe toute la largeur disponible. Lorsque 2 éléments « blocks » se suivent sur une page, ils sont positionnés (par défaut) l'un sous l'autre.
Voici quelques éléments de type « block »

<div> : Balise multi-usage. Cette balise est souvent utilisée pour positionner un contenu dans la page.
<h1>…<h6> : Hiérarchie de titre.
<p> : Paragraphe.
<ul>,<ol>,<dl> : listes (non ordonnée, ordonnée ou avec définition).
<li>,<dt>,<dd> : éléments de liste, définition, et titre de définition.
<table> : Tableau.
<blockquote> : paragraphe indenté (décalé à droite).
<pre> : Bloc de code préformaté.
<form> : Formulaire de saisie.


Type « inline »


Les éléments de type « inline » sont essentiellement utilisés pour attribuer un style à une portion de texte. N'occupe que la largeur indispensable à l'affichage du contenu et ne provoque pas de retour à la ligne. Lorsque 2 éléments en-ligne se suivent sur une page, ils sont positionnés (par défaut) l'un à côté de l'autre (si la largeur de page le permet).
Voici quelques éléments de type « inline »

<span> : balise multi-usage, très pratique pour appliquer un style CSS à une portion de texte.
<a> : ancre, permet de créer un lien sortant ou permet de spécifier un point précis de la page vers lequel on veut créer un lien.
<strong> : utlisé pour marquer l'importance particulière d'une portion de texte. Tous les navigateurs actuels afficheront cette portion de code en gras.
<em> : utilisé pour accentuer l'importance d'une portion de texte (de façon moins forte que <strong>). Tous les navigateurs actuels afficheront cette portion de code en italique.
<img /> : place une image.
<br /> : Saut de ligne. Ceci est un car particulier d'éléments « inline », il provoque un saut de ligne.
<input /> : Champs de saisie dans un formulaire.
<abbr> : signale une abbréviation.


Type « none »

Ce type de balise ne s'affiche pas à l'écran. Elles sont présentes pour apporter des informations invisibles pour l'internaute (par exemple la balise <meta>.

Emboîter les balises

Quésako 2) ? Emboîter les balises sera une pratique courante dans la réalisation de vos pages. Il existe des règles qu'il vous faut suivre.

Les règles

Vous devez déjà avoir à l'esprit la règle d'imbrication vue plus haut.
La règle générale est celle-ci :
Un « block » peut contenir des « inline » et d'autres « block ». De l'autre côté, les « inline » ne peuvent contenir que d'autres balises « inline »
Voici un exemple d'emboîtement autorisé : 

<p>
Phrase avec un <strong> mot </strong> important.
</p>


Et voici un emboîtement interdit: 

<strong>
  <p>Première phrase</p>
  <p>Deuxième phrase</p>
</strong>


Interdit ne veut pas dire que cela ne fonctionne pas, mais il n'est pas conforme aux conventions concernant les emboîtements d'éléments et ne doit pas être utilisé dans vos pages.

Les cas particuliers

Comme toutes règles, il existe des cas particuliers pour les contredire.
Éléments de type « block »

<address> : Cette balise ne peut contenir que des éléments de type « inline ».
<body> : Ne peut être parent direct d'éléments « inline ».
<blockquote> : Cette balise ne peut être parente que d'éléments de type « block ».
<dl> : Ne peut être parent direct que des balises <dt> et/ou <dd>
<dt> : Ne peut pas contenir d'éléments de type « block »
<fieldset> : Cette balise doit contenir en premier une balise <legend>
<form> : Ne peut être parent direct que d'éléments de type « block ». Cette balise ne peut pas contenir d'autres balise <form>
<h1>,<h2>, … <h6> : Ne peut contenir que des éléments « inline »
<hr /> : Ne peut pas contenir d'éléments
<noscript> : Ne peut contenir que des éléments de type « block »
<ol>, <ul> : Ces balises ne peuvent contenir que des balises <li>.
<p> : Cette balise ne peut contenir que des éléments de type « inline ».
<pre> : Cette balise ne peut contenir que des éléments de type « inline », sauf les balises <img />, <object>,<applet> et <sub>
<table> : Ne peut contenir que des balises <tr>, <caption>, <thead>, <tfoot>, <tbody>, <col>, <colgroup>


Éléments de type « inline »

<a> : Ne peut contenir d'autres balises <a>
<br /> : ne peut pas contenir d'autres éléments.
<img /> : Ne peut pas contenir d'autres éléments. Ne peut pas être contenu dans un élément <pre>.
<input /> : Ne peut pas contenir d'éléments. Ne peut pas être contenu dans une balise <button>.
<label> : ne peut pas contenir d'autre balise <label>. Ne peut pas être contenu dans une balise <button>.
<select> : Peut être parent direct des balises <optgroup> ou <option>. Ne peut pas être contenu dans une balise <button>.
<textarea> : Ne peut contenir que du texte simple et des entités. Ne peut pas être contenu dans une balise <button>.


Les balises les plus courantes.


Les titres

Il existe différents niveaux de titre, du H1 à H6 et ont chacun leur importance.

Exemple : <h1>Titre de ma page</h1>


Il est important de respecter la hiérarchie des différents niveaux de titres, sachant que l'éléments le plus haut est le <h1>. En effet, un titre <h2> ne se retrouvera jamais au dessus d'une balise <h1> dans un document.

Conseils SEO : La balise <h1> étant la plus importante, il convient également de ne le faire apparaître qu'une seule fois dans votre document.


Allez plus loin : Le rendu du titre se fera à l'aide du CSS.


Les paragraphes


En HTML, vous devez préciser où commence un paragraphe et où il se termine. Ceci est le rôle de la balise <p>. 

<p>Voici un premier paragraphe.</p>
<p>Voici un second paragraphe.</p>


La mise en forme


Mise en gras : <strong>
Mise en italique : <em>


pour le souligné, le texte barré, l'exposant, l'indice, la police, la taille du texte ou la couleur, il est conseillé d'utiliser la balise <span> et les propriétés CSS.
Exemple : 

<span style="color : red;">Ce texte est en rouge.</span>


Les images et les zones réactives

Pour afficher une image, on utilise la balise <img />. Elle admet différents attributs, dont les plus importants sont src et alt.
L'attribut src permet de renseigner le chemin (l'URL) de l'image. Cette URL peut être absolue ou relatif.
L'attribut alt affiche un texte alternatif à la place de l'image dans le cas où, pour une raison ou une autre, celle-ci ne peut être chargée.
Les différents formats d'images supportés par cette balise sont : le GIF, le JPG, le PNG ou le BMP.

Exemple : <img src="addresse/de/l/image" alt="Description de l'image" />


Conseils SEO : L'attribut alt permet au moteur de recherche de référencer l'image et les déficients visuels à savoir ce que l'image représente. Le format BMP est à éviter, car trop lourde donc augmente le temps de chargement de votre page.


Le HTML permet de créer des zones réactives sur les images, afin de définir plusieurs liens différents sur une seule et même image, ou de ne rendre qu'une seule partie de l'image cliquable. On appelle l'ensemble de ces zones une carte, ou map.
Les balises qui permettent de faire ces zones réactives sont <map> et <area> étroitement liées avec la balise <img />. L'attribut de la balise <img/> qui va contenir le nom de la « map » dont elle fait référence est usemap. Le nom de cette map est précédé du signe #.
Exemple : 

<img src="adresse/image" alt="Description de l'image" usemap="#nomDeLaMap" />


La balise qui va contenir l'ensemble de nos zones réactives pour cette image est la balise <map>, qui doit obligatoirement avoir l'attribut name renseigné et qui aura pour valeur le nom de la map, le même renseigné dans l'attribut usemap de l'image. 

<map name="nomDeLaMap">
    <area ...>
    <area ...>
</map>


Les différents attributs de la balise <area> sont :

coords : qui va contenir les différentes coordonnées de notre zone.
href : qui va défenir l'adresse de destination du lien.
shape : qui va renseigner le type de zone que l'on souhaite afficher (rectangle, rect, circle, circ, polygon, poly).


On peut évidemment avoir autant de zones que l'on veut sur une map, et on peut également combiner les différents types de zones sur une seule et même image. Attention toutefois à ne pas faire se chevaucher les zones. En cas de chevauchement, c'est la zone définie la première qui s'affichera au-dessus.

Les liens hypertextes

Un lien hypertexte est un élément HTML permettant d'envoyer le visiteur vers une nouvelle page. On distingue deux types de liens, les liens externes et les liens internes.
Les liens externes sont des liens hypertexte qui renvoie vers une autre page de votre site ou sur le page d'un site tiers.
Pour les liens internes c'est un peu plus compliqué.
Il existe les ancres, ce lien pointe vers un endroit de la page en cours.

Exemple : 

<a href="#motCle">Texte de mon ancre</a>
<h2 id="motCle">Texte vers lequel l'ancre est renvoyé</h2>


Nous pouvons aussi pointer vers une ancre présente sur une autre page.
Exemple : 

<a href="http://www.chg-web.com/index.php#motCle">Texte de mon ancre</a>


Vous pouvez permettre à vos visiteurs d'écrire sur votre adresse e-mail avec la syntaxe « mailto : »
Exemple : 

<a href="mailto:miel@chg-web.com">Contacter par mail</a>


Les listes

Elles servent, comme leur nom l'indique, à créer une liste d'items, plus précisément à les énumérer, comme dans le cas d'un sommaire par exemple.

On distingue 5 types de listes différentes, chacun prévu pour un usage bien précis :


Exemple de liste non ordonnées 

<p>Ma liste de courses : </p>
<ul>
<li>Champignons</li>
<li>Avocat</li>
<li>Dentifrice</li>
<li>Céréales</li>
</ul>


Résultat :

Ma liste de courses :


Exemple de liste ordonnées

<p>Top 3 des lettres grecs : </p>
<ol>
<li>Alpha</li>
<li>Beta</li>
<li>Gamma</li>
</ol>


Résultat :

Top 3 des lettres grecs :

  1. Alpha
  2. Beta
  3. Gamma

Exemple de listes de définitions 

<dl>
    <dt>Orteils</dt>
    <dd>Définition de orteils</dd>
    <dt>Doigts</dt>
    <dd>Définition de doigts</dd>
</dl>


Résultat :

Orteils
Définition de orteils
Doigts
Définition de doigts

Les deux autres types de liste sont rarement utilisées.
Il est possibles d'imbriquer les listes pour obtenir une présentation claire et détaillée d'un menu.
Nous pouvons utiliser les listes pour effectuer des menus déroulants.

Les tableaux

Les tableaux sont une suite de lignes et de colonnes qui forment un ensemble de cellules.
Autre utilisation des tableaux sont la mise en page de documents. Cette méthode est à éviter mais, à néanmoins, le mérite d'être simple à mettre en œuvre.
Le tableau est délimité par la balise <table>. Le contenu d'un tableau HTML est généré horizontalement. C'est à dire qu'il n'est pas créé colonne par colonne mais ligne par ligne.
Pour créer un tableau, nous commençons par créer les lignes grâce aux balises <tr>. Puis dans ces lignes nous insérons les colonnes grâce aux balises <td>.

Exemple : 

<table>
<tr>
<td>Colonne 1</td><td>Colonne 2</td><td>Colonne 3</td>
</tr>
</table>


Attention à bien avoir le même nombre de <td> pour chaque ligne, sinon le navigateur risque de mal interpréter le tableau. Nous pouvons insérer un titre dans un tableau avec la balise <caption> 


<table>
<caption>Titre du tableau</caption>
<tr>
<td>Colonne 1</td><td>Colonne 2</td><td>Colonne 3</td>
</tr>
</table>


Si vous pouvez éviter l'utilisation d'un tableau, pensez à utiliser d'autres méthodes plus adaptées.

Notes de version

Auteurs et sources

Autres liens rapides pouvant vous intéresser

C
E
H
L

1)
Côté client : s'exécute sur le navigateur du visiteur et est entièrement indépendant du serveur.
2)
Qu'est-ce que c'est en langue occitane.