Élément HTML

En informatique, un élément HTML indique la structure d'un document HTML. Jusqu'à la version 4.01 incluse de ce format, un élément HTML est un élément SGML qui satisfait aux exigences d'une ou plusieurs définitions de type de document (DTD) de HTML. Ces éléments ont deux propriétés : les attributs et le contenu, qui sont à la fois autorisés et exigés selon la DTD HTML appropriée (par exemple, le HTML 4.01 strict DTD). Les éléments peuvent représenter des en-têtes, des paragraphes, des liens hypertextes, des listes, des médias encapsulés, et diverses autres structures.

La version 4 de HTML définit 91 éléments.

Niveau bloc et niveau texte

La plupart des éléments HTML du corps du document sont classés soit au niveau bloc, soit au niveau texte.

  • Éléments de niveau bloc (block) — par ex. titres de section, paragraphes, listes, tableaux : ce sont des structures qui contiennent d'autres blocs, des éléments de niveau texte, ou seulement du texte. En général, ils sont affichés comme des blocs et séparés des autres blocs par des espaces traduits par des tabulations.
  • Éléments de niveau texte (inline) — par ex. hyperliens, citations, images : ces éléments représentent ou décrivent du texte ou des données. Ils peuvent contenir seulement du texte ou d'autres éléments de niveau texte, et sont habituellement affichés l'un après l'autre sur une ligne à l'intérieur du bloc qui les contient.

(Voir "The global structure of an HTML document")

Éléments racines

Les éléments racines sont des conteneurs qui renferment tous les autres éléments HTML. Chaque page HTML contient des éléments racines.

<html>…</html>
Délimite un document HTML (à la place d'un document XML ou d'une classe). La langue primaire du document HTML peut être définie avec l'attribut lang (avec par ex. en pour anglais). Le seul contenu autorisé est soit un élément <head> et un élément <body>, soit un élément <head> et un élément <frameset>.
<head>…</head>
Délimite la section d'en-tête du document. Cet élément contient les informations sur la page web. L'élément <head> contient principalement les métadonnées du document comme le titre, l'encodage des caractères, etc. Il y a sept éléments d'en-tête possibles qui incluent un élément meta pour une spécification extensible des métadonnées.
<body>…</body>
Délimite le corps du document. D'après les recommandations de la version 5 (HTML 5), tout ce qui doit être visible sur la page doit se trouver à l'intérieur de cet élément.

Ces éléments racines sont organisés comme suit :

<html>
  <head>
    <!-- Cette section peut contenir n'importe quels [[#Éléments d'en-tête|éléments d'en-tête]] qui peuvent être organisé de n'importe quelle façon et apparaître autant de fois que souhaité, à l'exception de <base> et <title> qui ne peuvent apparaître qu'une seule fois chacun. Le seul élément obligatoire de l'en-tête (délimitée entre les balises <head> et </head>) est : <title>. -->
  </head>
  <body>
    <!-- Ne peut avoir comme enfants directs que des éléments de type ''%block'' en HTML strict, mais admet également des éléments de type ''%inline'' ou du texte anonyme en HTML transitionnel. -->
  </body>
</html>

Éléments d'en-tête

<title>…</title>

L'élément <title> est le seul élément obligatoire d'un document HTML. Bien qu'il soit requis pour qu'un document soit valide, la plupart des navigateurs les plus populaires ne réagiront pas à son absence. Il est placé entre les balises <head></head>. Le contenu de cet élément sera utilisé par le navigateur de l'usager pour désigner la page (par exemple sur l'onglet ou dans les favoris), ainsi que par les moteurs de recherche. L'élément <title> ne peut apparaître qu'une seule fois dans le document HTML. Il sert généralement à identifier sommairement le contenu de la page. Il ne fait pas partie du contenu du document, mais est plutôt une propriété de celui-ci. Théoriquement, il n'y a pas de limite au nombre de caractères que peut contenir <title>, par contre, les navigateurs en limitent généralement l'affichage. De même, aucune autre balise HTML n'y sera interprétée.

<base>

La balise <base> permet d'indiquer depuis quel site ou répertoire vous souhaitez partir. Pour cela il est nécessaire d'indiquer le chemin absolu vers le répertoire cible. Par exemple, si vous êtes dans le dossier www et que vous indiquez dans votre code un chemin vers le fichier index.html, sans base, vous sera dirigé vers le chemin http://votre-site.com/index.html.
Cependant si vous indiquez une base, par exemple http://votre-site.com/pages/, ce même lien va mener à http://votre_site.com/pages/index.html.
Syntaxe : <base href="votre_chemin"/>

<link>

Cet élément spécifie les liens vers d'autres documents, comme les liens previous (précédent) et next (suivant), ou des versions alternatives. Un en-tête HTML peut contenir un nombre quelconque d'éléments <link>. L'élément <link> a des attributs, mais pas de contenu. On l'utilise couramment pour créer des liens avec des feuilles de style externes, en utilisant la formulation suivante : <link rel="stylesheet" type="text/css" href="url">.

<script>…</script>

Cet élément permet d'inclure du code de script (le plus souvent en JavaScript), souvent pour rendre la page interactive. Dans le cas où le navigateur d'un visiteur ne reconnaît pas la balise, le W3C recommande de mettre le code en commentaire :

<script>
  //<!--
  Code du script
  //-->
</script>

<noscript>…</noscript>

Ces balises permettent d'insérer dans la page des éléments qui seront affichés uniquement dans le cas où le navigateur n'est pas capable d'interpréter des scripts.

<style>…</style>

Cet élément permet d'inclure des informations de style au format CSS.

<object>…</object>

Permet l'insertion d'un objet en précisant sa nature par l'attribut type. Il peut s'agir d'un Applet Java, d'une Application Flash, d'une vidéo, d'un son…

<meta>

Cet élément peut être utilisé pour spécifier l’auteur, la date de publication, la date d’expiration, la description de page, les mots-clés et toute autre métadonnée qui n’est pas fournie à travers les autres éléments et attributs d’en-tête (head). En raison de leur caractère générique, les éléments meta spécifient des combinaisons clef/valeur (en)[1].

Dans un formulaire, les éléments meta peuvent spécifier les en-têtes HTTP qui doivent être envoyés avant le contenu réel quand la page HTML est servie d’un serveur web au client. Par exemple :

<meta http-equiv="foo" content="bar">

Cet exemple spécifie que la page doit être servie avec un en-tête HTTP appelé « foo » qui a une valeur « bar ».

Dans le formulaire général, un métaélément spécifie le nom (name) et les attributs de contenu (content) associés qui décrivent des aspects de la page HTML. Afin d’éviter d’éventuelles ambiguïtés, un troisième attribut optionnel scheme peut être fourni pour spécifier un cadre sémantique qui définit la signification de la clé et sa valeur. Par exemple: <meta name="foo" content="bar" scheme="DC">

Dans cet exemple, la métadonnée :

Pour plus d’information sur l’utilisation du métaélément dans HTML, voir la spécification W3C.

Bloc

Beaucoup d'éléments HTML sont conçus pour modifier la structure sémantique ou la signification d'un document. Certains sont au niveau bloc, mais la plupart sont au niveau ligne et peuvent être incluse dans le corps de texte normal.

Éléments bloc généraux

<p>…</p> : Balise de type block, elle correspond à la création d'un nouveau paragraphe.

Syntaxe :

<p>Mon texte…</p>

La balise de fermeture n'est pas nécessaire en HTML. Elle est cependant obligatoire en xHTML !

La balise <div>...</div> est une balise générique de cette catégorie qui est souvent utilisé pour réaliser la mise en forme du site sans une signification sémantique particulière.

Niveau ligne

Liens

Les liens, ou hyperliens, sont l'un des éléments les plus basiques et importants.

Le code pour insérer un lien est simple :

<a href="Votre lien">Ceci est un lien</a>

La balise ouvrante est <a href="">, la balise fermante est </a>. Entre les guillemets, il faut indiquer l'URL complète du lien sauf dans un certain cas que nous verrons après. L'URL complète, cela veut dire que vous insérez ce qui s'affiche dans la barre d'adresse lorsque vous naviguez sur la page en question. Peu importe le site vers lequel vous voulez porter un lien, cette technique fonctionnera toujours.

Exemple d'URL : http://fr.wikipedia.org/wiki/Hypertext_Markup_Language

Ce qui nous donne, en code:

<a href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language">L’article de Wikipédia sur le html</a>

L'option target permet d'indiquer si la cible est ouverte dans la même fenêtre ou dans une nouvelle fenêtre du navigateur[2]. Exemple :

<a href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language" target="_blank">L'article dans une nouvelle fenêtre</a>

Images et objets

<img>

Utilisation :

<img src="votre_image.jpg">

La balise image est associée à une URL source via l'attribut "src". Autrement dit, vous insérez le chemin d'accès à l'image entre les "" pour définir l'image à insérer.

On peut modifier d'autres propriétés de l'image avec les attributs suivants:

 width="150"
Règle la largeur de l'image sur 150 pixels.
height="150"
Règle la hauteur de l'image sur 150 pixels.
title="Message"
Insère un message qui sera affiché lorsque l'on laisse la souris sur l'image.

Une balise pixel est une image électronique, en principe de la taille d’un pixel (1x1) et invisible pour les visiteurs du site. Celle-ci peut être associée aux cookies sur le disque dur des visiteurs, et permettre par exemple de savoir par la suite si tel ou tel élément a été ouvert, notamment lors de la réception d'un courriel.

<span>

Balise générique de niveau texte qui n'a pas de signification particulière.

Le code suivant :

La voiture <span style="color:red">rouge</span>.

affichera : La voiture rouge.

Elle est généralement utilisée pour décorer une phrase ou un groupe de mots. Elle va de pair avec la balise <div>…</div> qui elle est de type block.

Jeu de cadres

Le système des cadres regroupe quatre balises HTML :

<frameset>

Standard HTML 4.0 obsolète en HTML 5.

Conteneur de cadres d'un document. Un document HTML contient soit un élément body, soit un élément frameset[3]. Ce dernier définit alors l'étendue de la fenêtre d'affichage où vont apparaître les cadres (éléments frame) qu'il contient. Chaque cadre contient un document HTML à part entière. Leur mise en page est définie par des listes séparées par des virgules, des attributs HTML rows et cols.

Les jeux de cadre permettent de partager des données en employant un élément OBJECT dans l'élément HEAD d'un document frameset[4]

<frame>

Standard HTML 4.0 obsolète en HTML 5.

Définit un seul cadre ou une région du frameset. Un document séparé peut être affiché avec l'attribut frame nommé src.

Il est aussi possible de prendre un frame pour cible d'autres documents HTML. Pour cela, il suffit d'assigner un nom au frame via l'attribut "name", il sera alors considéré par les "authors" comme la cible ("target") de liens définis par d'autres documents. L'attribut TARGET peut être placé pour des éléments qui créent des liens (A, LINK), des image maps (AREA), et des forms (FORM)[5].

<noframes>

Standard HTML 4.0 obsolète en HTML 5.

L'élément noframes permet de définir un contenu HTML alternatif pour les agents utilisateurs qui n'implémentent pas la technologie des cadres.

Exemple

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>A simple frameset document</title>
</head>
<frameset cols="20%, 80%">
  <frameset rows="100, 200">
      <frame src="contents_of_frame1.html">
      <frame src="contents_of_frame2.gif">
  </frameset>
  <frame src="contents_of_frame3.html">
  <noframes>
      <p>This frameset document contains:</p>
      <ul>
         <li><a href="contents_of_frame1.html">Some neat contents</a></li>
         <li><img src="contents_of_frame2.gif" alt="A neat image"></li>
         <li><a href="contents_of_frame3.html">Some other neat contents</a></li>
      </ul>
  </noframes>
</frameset>
</html>

<iframe>

Standard HTML 4.0 autorisé en HTML 5.

Introduite en 1997 par Microsoft Internet Explorer, la balise iframe signifie inline frame (cadre en ligne). Elle affiche un autre document HTML dans une frame. Mais contrairement à l'élément object, elle peut être la cible de liens définis par d'autres éléments, et peut être sélectionnée par l'agent utilisateur pour imprimer, afficher la source, etc.

Le contenu de l’élément est utilisé comme texte alternatif pour les navigateurs qui ne prennent pas en charge les iframes.

Exemple :

<!DOCTYPE html>
<html>
  <head>
    <title>Document avec une iframe</title>
  </head>
  <body>
    <iframe src="http://www.w3schools.com">Impossible d'afficher l'iframe</iframe> 
  </body>
</html>

Les sites Facebook et Twitter utilisent des iframes pour afficher directement les contenus de sites web tiers. Google AdSense quant à lui s'en sert pour que ses bannières publicitaires apparaissent sur d'autres sites.

Voir aussi

Notes et références
  1. (en) « The global structure of an HTML document », sur W3C (consulté le )
  2. (en) Adam Roberts, « Target (HTML attribute) - SitePoint », sur sitepoint.com, (consulté le ).
  3. http://www.w3.org/TR/html401/present/frames.html
  4. Sharing data among frames
  5. http://www.w3.org/TR/html401/present/frames.html#h-16.3

Liens externes
  • Portail d’Internet
  • Portail de la programmation informatique
Cet article est issu de Wikipedia. Le texte est sous licence Creative Commons - Attribution - Partage dans les Mêmes. Des conditions supplémentaires peuvent s'appliquer aux fichiers multimédias.