Fabriquer le web - La structure et le style


Structure et style

On sait coller ou saisir du texte brut, il va falloir le mettre en forme, lui donner une structure et un style. Le contenu et la structure vont être spécifiques à chaque document, tandis que le style sera indiqué dans un fichier séparé commun à l'ensemble du site, la feuille de style.

La structure permet de donner du sens au contenu, des repères, pour faciliter son indexation (par les moteurs de recherche) et son accessibilité (par exemple pour les outils de synthèse vocale). Le contenu et sa structure se traitent depuis l'éditeur ou en mode source html, le style et l'apparence sont traités dans le CSS.

La structure, c'est avec des balises

Essentiellement les balises paragraphe et les balises titres hn (H1 à H6)

Les paragraphes sont créés par l'éditeur avant toute saisie chaque fois que l'on appuie sur la touche Entrée.

Les titres, on les choisit en cliquant sur l'un des niveaux hiérarchiques proposé habituellement par les éditeurs wysiwyg : H1 à H6 du plus important à celui de moindre importance. Dans la pratique, il est rare d'avoir besoin dans une page web de plus de 3 niveaux hiérarchiques pour les titres. On utilisera donc les balises H1 à H3, en prenant garde de toujours commencer par un niveau supérieur.

L'interprétation de la balise Hn relève a priori du navigateur et peut varier en fonction de celui utilisé par le visiteur :  un titre H1 est affecté d'un facteur de grossissement de 200% de la taille par défaut de la police du navigateur (environ 1em), H2 = 150%, H3 = 110%, H4 = 100%, H5 = 80%, H6 = 60%.

Il ne s'agit pas d'obtenir par là un rendu agréable à l’œil, mais de structurer son texte en hiérarchisant ce qui est plus ou moins important.  Lors de la mise en page dans l'éditeur wysiwyg, il ne convient donc pas de choisir un titre en fonction de sa taille, de sa graisse ou de sa couleur : si le style d'un titre ne convient pas, il faut aller modifier ou créer sa description dans le fichier de CSS. Par exemple, comme cela:

h1{ text-align : center; text-decoration : none; font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; font-size : 14px; font-weight : bold; color : #F5c503; 

Que sont les titres hn ?

Les balises Hn (pour h1 à h6) sont utilisées pour structurer le contenu de chaque section dans une page. Selon le W3C, la balise h1 est un élément qui décrit brièvement le sujet de la section qu’il introduit. C'est un titre de section identifiable comme tel. S'il y a plusieurs sections dans la page, on peut y trouver plusieurs balises h1. Le contenu de section peut organiser une structure en sous-titres et sous-sous-titres  en respectant la hiérarchie h2, h3 etc 

Cette hiérarchie des titres offre certes un intérêt pour l'optimisation en direction des moteurs de recherche, car les textes affectés de titres de niveau élevé sont répertoriés en priorité. Mais pas seulement. Elle est essentielle au bon fonctionnement des logiciels de lecteur d'écran pour déficients visuels et aux internautes qui lisent souvent le web en se repérant aux titres importants. 


Test du style sur ce site : https://katryne.legtux.org/pages/021-astuces-css-page-de-test-html-fr.php




Index |Info | Imprimer | | PDF Permalien

Technique

Revue de presse RGPD