Le langage HTML et ses balises

Les bases

Le HTML est un langage qui s'appuie sur des balises.

Le document HTML doit toujours débuter par un doctype, avant même la première balise <html lang="fr">.

Il s’agit d’une déclaration permettant de renseigner le navigateur sur le type de document HTML. Le doctype n'est pas une balise HTML mais plutôt un préambule. Jusqu’à HTML 5, le doctype mentionnait l’utilisation d’un document de référence, la DTD (Document Type Definition), grammaire résumant la syntaxe HTML et ses attributs.

Dans ce document que vous lisez et comme dans tout document HTML, la première balise ouvrante est : <html> et la dernière balise fermante est : </html>

une balise <html> ne peut contenir que 2 balises filles :

La structure de notre page va donc se présenter comme ceci :
<!DOCTYPE html>
<html lang="fr">
<head>
Ici l'entête du document
</head>
<body>
Ici le contenu du document
</body>
</html>

Quelles sont les balises possibles à mettre dans le <head> ?

<title>
la seule balise OBLIGATOIRE, le titre du document
<meta>
les métas informations (description du document, auteurs, type de contenu et mots clefs pour le référencement)
<link>
relations vers des ressources externes (chemin vers des feuilles de styles par exemple ou des script JavaScript)
<style>
style CSS (Cascading Style Sheet) embarqué dans le document
<script>
Script embarqué dans le document ou lien vers le fichier externe
<base>
Base d’adresses par défaut et de cible pour tous les liens du document

Cliquez sur ce lien pour voir l'exemple d'une page HTML5 avec les balises ci-dessus utilisées !

Comme vous pouvez le constater, il n'y a que le titre du document qui est une information visible et un texte explicatif présent dans le body !

Exemples avec les balise du HEAD

<meta name>

name="author" content="Philippe Bouget"
name="description" content="Tout savoir pour créer une page HTML5"
name="keywords" content="HTML5, CSS3, Cours, informatique, initiation web"
name="generator" content="Mon Notepad++"
name="application-name" content="Guinot Web HTML5 Training"

<meta charset>

charset="UTF-8"
charset="ISO-8859-1"

<meta http-equiv>

Rafraîchissement de la page toutes les minutes
http-equiv="refresh" content="60"
Redirection vers une autre URL au bout de 5 secondes
http-equiv="refresh" content="5;url=http://www.biba.fr"
Déclaration de l’ensemble de style préféré
<style title="style1"><!-- CSS --></style>
http-equiv="default-style" content="style1"
Déclaration de l’encodage des caractères
http-equiv="content-type" content="text/html;charset=UTF-8"

<link>

Icône associée au document
rel="icon" href="icone.gif" type="image/gif" sizes="32x32"
Feuille de style pour l’affichage
rel="stylesheet" type="text/css" href="css/styles.css" media="screen"
Feuille de style pour l’impression
rel="stylesheet" type="text/css" href="css/print.css" media="print"

<style>

<style type="text/css" media="screen">
body {
background:#EFECCA;
}
p {
color:#78A419;
font-size:2em;
text-align:center;
border:3px solid #B5E655;
background:white;
padding:1em;
width:50%;
margin:2em auto;
}
</style>

<base>

Base générale des liens qui peut varier en fonction de l'installation des fichiers sur votre machine
base href="CoursHTML5"

Ce document HTML5 n'a pas de mise en forme, aucune feuille de style CSS n'y est rattachée !

Il faut garder à l'esprit qu'un document HTML est le contenu d'une page web avec une sémantique. Nous verrons ultérieurement comme réaliser une mise en forme... Mais avant, il faut connaître quelques unes des nombreuses balises pour donner du sens au contenu de votre page.

Exemple de page HTML5 mise en forme

Cliquez sur ce lien pour voir une page HTML5 mise en forme avec CSS3 très basique !

Cliquez sur ce lien pour voir une page HTML5 mise en forme avec CSS3 plus sophistiquée !