Archives des tags : h1

Pas encore de description pour le tag h1. Suggérez à l'administrateur du site de d'y remédier.

Ergonomie & Accessibilité

Une solution CSS accessible pour remplacer du texte HTML par une image

Dans l’article remplacer du texte HTML par une image avec CSS, j’ai listé un certains nombre de techniques efficaces permettant d’avoir un titre de niveau `h1` (par exemple) qui disparait de l’affichage au profit d’un visuel plus «sexy». Le but étant d’améliorer l’apparence du site et le référencement dans les moteurs de recherche. Toutefois, les solutions présentées n’offrent pas toujours une expérience utilisateur satisfaisante pour tous. Les utilisateurs de lecteurs d’écran comme Jaws ou NVDA risquent de ne pas y trouver leur compte. Certaines solutions sont «accessibles» uniquement lorsque les CSS sont désactivées et il faudra penser aux cas où les images sont absentes. →

HTML & CSS

HTML 5 Outline — Quelques notes sur la structure des pages Web avec h1 et section

Après l’article Quelques notes sur la balise h1 avec HTML5 dans lequel j’ai abordé l’utilisation des niveaux d’en-tête `h1 — h6` pour savoir dans quelle mesure il est judicieux d’utiliser une ou plusieurs balises `h1` dans une même page Web, je continue sur ma lancée avec la notion d’Outline. Cette dernière fournit la liste des sections imbriquées impliquant les éléments de type Sectioning Content ou Sectioning Root. Chaque section peut être associée à un niveau d’en-tête et peut contenir autant de sections imbriquées que l’on veut. Notez que les sections dont on parle ne sont pas nécessairement l’élément `section` lui-même (même si ce dernier fait partie des éléments ayant une portée de Sectioning Content). →

HTML & CSS

Quelques notes sur la balise h1 avec HTML5

La réponse courte à la question « Combien de balises `h1` dans une page Web HTML5 ? » est : « Autant que nécessaire ! » En gros, chaque fois que vous avez une nouvelle section, vous pouvez mettre un `h1`. D’une manière générale, `h1` accompagnera `article`, `aside`, `nav` ou `section` avec brio ! (cf. Sectioning content). Allons voir ce que nous disent les spécifications HTM5 sur l’emploi des balises de titre `h1` — `h6`, notamment les exemples concernant les niveaux de titre. Ils sont assez parlant bien que parfois déroutant lorsqu’on a l’habitude du balisage utilisé jusqu’à présent. Les éléments `h1` — `h6` représentent les niveaux d’en-têtes de leurs sections respectives. Quant à l’élément `hgroup`, il regroupe un ensemble d’en-têtes composé d’au moins deux niveaux de titre, comme un titre et son sous-titre ou un titre et le slogan associé (un bon candidat pour Logo et Motto, faute de mieux). →

Google & Référencement

8 composés HTML pour le logo et la « baseline » et leur potentiel SEO

Mon petit manifeste concernant la création des balises logo et motto dans les spécifications HTML5 n’a pas encore eu l’effet escompté. En attendant que le W3C valide cette modeste proposition, les enveloppeurs Web font preuve d’imagination. Voici un florilège de composés HTML (HTML Compound) plus ou moins sémantiques pour baliser l’identité d’un site internet. Cerise sur le SEO, j’ai demandé à Didier Sampaolo de nous dire ce qu’il pense — ou ce que Google pense — des différentes solutions présentées. @dsampaolo est éditeur du site Brave New World et consultant e-business spécialisé en référencement naturel. →

Intégration web

HTML5 — Repenser le découpage des pages web et des contenus

Derrière les nouvelles balises proposées par HTML5 se cache un nouveau modèle de structuration. Jusqu’à présent, on rencontre souvent la structure suivante : un niveau de titre `h1` pour le nom du site et ça continue avec `h2` pour le titre des articles ; reste `h3` — `h6` pour structurer la prose, ce qui est suffisant ou pas. HTML5 introduit la notion de Sectioning Content (cf. le concept d’outline) de manière explicite avec les balises `section`, `nav`, `article` et `aside` ou de manière implicite a chaque utilisation d’un niveau de titre `h1`. →