HTML : notions de base

Introduction

La première chose importante à savoir sur le HTML est la signification des quatre initiales :

Hyper Text Markup Language

Le HTML est un langage de description de documents (et non pas un langage de programmation !) utilisé pour la publication d'informations sur le Web (World Wide Web).

C'est à Tim Berners-Lee (alors au Cern) que l'on doit, en 1989, la naissance du “World Wide Web” : l'idée est née dans un mémo où il expliquait comment un système basé sur les liens hypertextes et des ordinateurs connectés entre-eux pouvait aider les chercheurs du Cern à mieux partager leurs informations, et à mieux y accéder.

À partir de 1990, les membres du Cern développent les trois principales technologies du Web : les adresses web (URL), l'Hypertext Transfer Protocol (HTTP) et l' Hypertext Markup Language (HTML).

C'est dans la dynamique de ces travaux que Tim Berners-Lee fonde en 1994 (lors de la conférence internationale du WWW) le World Wide Web Consortium (W3C) au Massachusetts Institute of Technology (MIT) : visant une utilisation universelle du Web, le W3C travaille sur des standards et une normalisation globale indépendante des différentes technologies du Web, dont le HTML.

C'est, dans ce contexte, pendant les années 90, que le langage HTML va naitre et évoluer très rapidement jusqu'à une version majeure en 1997 : HTML 4. Depuis 2007, évolue une nouvelle révision majeure de l'HTML : HMTL 5, dont la finalisation est proche : elle est prévue pour le dernier trimestre 2014. Dans le langage courant, HTML5 désigne souvent un ensemble de technologies Web (HTML5, CSS3 et JavaScript) permettant notamment le développement d'applications.

Principe de base

HTML est donc un langage de description qui va s'appuyer sur un système de balisage (dont la syntaxe vient du “Standard Generalized Markup Language” (SGML)), pour structurer les documents.

Des balises (tags) en paire (ouvrante et fermante)

<nomdelabalise>............ </nomdelabalise>

Avec éventuellement un attribut :

<nomdelabalise attribut="valeur"> ............ </nomdelabalise>

Avec éventuellement plusieurs attributs :

<nomdelabalise attribut1="valeur1" attribut2="valeur2"> 
     ............ 
</nomdelabalise>

Des balises orphelines (auto-fermantes)

<nomdelabalise />

Avec éventuellement un ou plusieurs attributs :

<nomdelabalise attribut1="valeur1" attribut2="valeur2" />

Notez que le / de fin n'est pas obligatoire en HTML5 mais il est recommandé pour signifier qu'il n'y a pas de seconde balise fermante.

Structure de base

Une première page minimaliste

Sans surprise, les bases d'un code HTML5 ressemblent beaucoup à celles rédigées à l'aide des précédentes versions HTML 4 et XHTML 1.x… dans un souci de rétro-compatibilité.

<!DOCTYPE html>
<html>
  <head>
      <!-- en-tête de la page --> 
      <meta charset="utf-8"/>
      <title>Ma première page en HTML5</title>
  </head>
  <body>
      <!-- corps de la page -->
      <p>Bonjour, le monde !</p>
  </body>
</html>

<!DOCTYPE html>

Une balise particulière qui a été simplifiée en HTML5 : son rôle est toujours de préciser le type de document qui va suivre, afin de permettre au navigateur de savoir quel langage de la vaste famille SGML il devra interpréter.

<html>...</html>

Le DOM (Document Object Model), recommandation du W3C, est une représentation structurée et orientée objet du document, que l'on peut modéliser par un arbre où :

chaque balise est un noeud de l'arbre ;
la racine de l'arbre est document ;
le tronc de l'arbre est la balise html.

<head>...</head>

Ces balises permettentde délimiter l'en-tête du document qui doit ou peut contenir :

la précision de l'encodage du document ;
le titre de la page ;
des méta-informations diverses ;
des liens vers des fichiers annexes (notamment de définition de styles) ;
des scripts (de librairies existantes (telles que jQuery) ou personnels) ;
…

  <head>
      <meta charset="utf-8"/>
      <title>Ma première page en HTML5</title>
      <meta name="description" content="La description de la page">
      <meta name="keywords" content="Ecrire ici les mots clés">
      <meta name="robots" content="index,follow">
      <meta name="author" content="GM">
      <link rel="shortcut icon" href="images/favicon.ico">  
      <link rel="icon" type="image/x-icon" href="images/favicon.ico">
      <link rel="icon" type="image/png" href="images/favicon.png">
      <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
      <link rel="stylesheet" type="text/css" href="css/styles.css">      
      <script type="text/javascript" src="javascript/respond.min.js"></script>
      <script type="text/javascript" src="jquery/jquery-1.8.2.min.js"></script>      
      <script type="text/javascript" src="jquery/jquery.form.js"></script>      
      <script type="text/javascript" src="js/mes_scripts.js"></script>      
  </head>

<body>...</body>

Ces balises permettent de délimiter ce que l'on appelle le corps du document autrement dit le texte qui va s'afficher à l'écran, structuré avec une grande variété de balises HTML.

De nouvelles balises structurantes avec HTML5

HTML5 apporte un lot de nouvelles balises sémantiques qui permettent de réduire l'utilisation outrancière des balises div, au profit de balises aux noms plus explicites.

D'après une étude sur les attributs class et id les plus utilisés en 2005 pour les balises div, il a été décidé d'introduire dans la spécification HTML5, les balises suivantes :

header : pour définir une section d'introduction d'un article, d'une autre section ou du document entier (en-tête de page).
footer : pour définir une section de conclusion d'un article, d'une autre section ou du document entier (pied de page).
nav : pour définir une section possédant des liens de navigation principaux vers des endroits de la page ou vers d'autres pages.
section : pour définir une section regroupant des contenus sur une même thématique.
article : pour délimiter une portion autonome de la page, à l'instar d'un article dans un journal.
aside : pour délimiter des informations complémentaires à un article ou une section, que l'on place généralement “à-côté”.

Ces nouvelles balises doivent rendre le code plus lisible, en évitant d'utiliser des attributs class et id inutiles. Par exemple :

<!-- Plutôt que d'écrire : -->
<div id="header">..................</div>
<!-- en HTML5, on écrira : -->
<header>..................</header>

WIK-ICN

Panneau latéral

ICN

2nde

1ère

HTML

CSS

p5*js / p5.play

p5js.org

Librairies

Pour se former

HTML : notions de base

Introduction

Principe de base

Des balises (tags) en paire (ouvrante et fermante)

Des balises orphelines (auto-fermantes)

Structure de base

Une première page minimaliste

<!DOCTYPE html>

<html>...</html>

<head>...</head>

<body>...</body>

De nouvelles balises structurantes avec HTML5

WIK-ICN

Outils pour utilisateurs

Outils du site

Panneau latéral

ICN

2nde

1ère

HTML

CSS

p5*js / p5.play

p5js.org

Librairies

Pour se former

HTML : notions de base

Introduction

Principe de base

Des balises (tags) en paire (ouvrante et fermante)

Des balises orphelines (auto-fermantes)

Structure de base

Une première page minimaliste

<!DOCTYPE html>

<html>...</html>

<head>...</head>

<body>...</body>

De nouvelles balises structurantes avec HTML5

Outils de la page