HTML sémantique, le sens et le style

Les pages web sont des documents texte structurés à l’aide d’un langage de balisage. Le HTML sémantique (pour Hypertext Markup Language) est le langage de balisage le plus courant de nos jours. Il permet d’entourer les différents éléments de contenu pour leur donner un sens sémantique.

Qu’entend-on par sémantique??

Pour mieux répondre aux requêtes des internautes, les moteurs de recherche analysent le contenu des pages web du point de vue de leur signification. C’est la raison pour laquelle on parle de HTML sémantique. Tout ce qui concerne l’apparence des pages est relégué aux feuilles de style CSS.

Responsabilité du développeur web

Les développeurs web doivent rendre compte de la structure des pages et de la signification de chacun des éléments qui s’y trouvent. Nous allons voir les balises sémantiques de HTML, mais, d’abord, voyons la structure de base des pages HTML.

Balises de base des pages HTML

Les balises <DOCTYPE>, <html>, <head> et <body> déterminent la structure de base des pages HTML.

Balises de base des pages HTML

Balise <DOCTYPE >

La balise < DOCTYPE > s’insère en début de page. Elle sert à définir le type du document afin qu’il soit correctement interprété par le navigateur. La balise <DOCTYPE > doit toujours se situer avant la balise <html >.

Balise <html>

La balise <html>marque le début et la fin des pages HTML.

Balise <head>

La balise <head> sert à fournir des informations au navigateur. Aucune ligne de la balise <head> n’est affichée dans le corps du document. Les balises suivantes peuvent être incluses dans la balise <head> :

  • <title> permet de donner un titre à la page. Ce titre se retrouve dans la barre de titre du navigateur.
  • <base> spécifie l’URL de base ou l’URL cible pour toutes les URL relatives du document.
  • <link> pointe à des ressources externes, notamment, à des feuilles de style CSS.
  • <meta> sert à placer des métadonnées dans les pages HTML. Elle s’adresse aux navigateurs web, aux moteurs de recherche?et aux outils d’indexation.
  • <script> est utilisé pour intégrer des scripts exécutables, généralement du code JavaScript.

Balise <body>

La balise <body> définit le corps du document, c’est-à-dire, les informations destinées à être affichées au chargement de la page.

Balises sémantiques de HTML

En général, une page HTML est constituée d’un en-tête, d’un menu de navigation, de différentes sections au centre de la page, de l’information supplémentaire sur le côté et d’un pied de page. HTML propose les balises suivantes pour mettre en œuvre ce marquage sémantique :

  • <header> : en-tête de la page.
  • <nav> : menu de navigation.
  • <main> : contenu principal, avec diverses sous-sections de contenu représentées à l’aide des éléments <section> et <article>.
  • <aside> : ?informations supplémentaires; souvent mise à l’intérieur de l’élément <main>.
  • <footer> : pied de page.

Les balises sémantiques apportent du sens à la page et peuvent être comprises par l’ordinateur. Contrairement à ce que l’on pourrait penser, elles n’indiquent pas où doit apparaître le contenu. C’est le rôle des feuilles de style CSS d’indiquer la position. Quand l’ordinateur «?comprend?» la structure de la page, le référencement s’en voit amélioré. Le fait de baliser les pages permet aux agents web tels que les moteurs de recherche d’évaluer l’importance des éléments de contenu.

Balise <header>

La plupart des sites web possèdent un en-tête (header en anglais). Le plus souvent , on y trouve un logo, une bannière, le slogan du site et son menu de navigation. Si unepage est découpée en plusieurs sections, chaque section peut avoir son propre en-tête. Ne pas confondre la balise <head> et la balise <header>.

Balise <nav>

La balise<nav> regroupe les principaux liens de navigation du site. Généralement, il s’agit du menu principal. Le menu se présente sous la forme d’une liste à puces à l’intérieur de la balise<nav>. L’attribut href à l’intérieur de la balise <a> permet de créer le lien. L’attribut href peut prendre une URL absolue ou une URL relative. Dans l’exemple qui suit, l’URL est relative, et elle sera ouverte dans un nouvel onglet.

Balise <header> et Balise <nav>

Balise <section>

La balise<section>sert à regrouper des contenus de même nature.

Balise <article>

La balise <article> sert à englober une portion généralement autonome de la page.

 Balise  <section> et balise <article>

Balise <aside>

La balise <aside> est conçue pour contenir des informations complémentaires. Il peut y avoir plusieurs blocs <aside> dans une même page.

Balise <footer>

La balise <footer> ou pied de page contient habituellement les liens de contact, le nom de l’auteur, les mentions légales, etc.

Balises non sémantiques

Il existe des balises non sémantiques (génériques) : <div>, <span>… Elles servent de conteneurs, mais ne donnent aucune information sur le rôle que joue leur contenu dans la page web.

Feuilles de style CSS

HTML est un langage qui a peu de rendus visuels. Le rendu visuel est relégué aux feuilles de style CSS (pour Cascading Style Sheets). La «?cascade?» en question est la combinaison de différentes sources de style appliquées à une même page, selon leur degré respectif de priorité. La priorité supérieure est accordée aux styles du développeur web.

CSS est un langage déclaratif. Les styles à appliquer sont regroupés par blocs et délimités par les accolades. Les styles à appliquer sont exprimés sous la forme de couples propriété : valeur. Chaque bloc est précédé d’un sélecteur. Le sélecteur désigne l’élément qui doit adopter ce style. Dans l’exemple qui suit, les sections doivent adopter la couleur de fond fuchsia; et les articles, la couleur bleue.

Extrait d'une feuille de style

Le style peut être embarqué entre deux balises HTML ou externe, accessible par la page en cours de consultation. Le bon usage veut que l’on externalise le style CSS, pour ne pas surcharger le HTML.

Initiation à HTML

(10)

Un commentaire? On vous écoute.

Ce site utilise Akismet pour réduire le pourriel. En savoir plus sur comment les données de vos commentaires sont utilisées.