Aller au contenu principal

HTML

Le premier principe en HTML est d'utiliser des balises pour structurer et organiser le contenu d'une page web. Ces balises sont des mots-clés encerclés par des crochets angulaires, comme <html>, <head>, <body>, <h1>, <p>, etc. Ces balises indiquent au navigateur comment interpréter et afficher le contenu d'une page web.

Fondamentaux​

  • L'utilisation des balises pour structurer et organiser le contenu d'une page web,
  • L'ajout de métadonnées et de liens pour renseigner les moteurs de recherche et les autres sites web
  • L'utilisation de classes et d'attributs pour identifier et personnaliser les éléments HTML et le modifier dans le CSS.
  • la compréhension des différents types de contenu et de médias qui peuvent être inclus dans une page web, tels que du texte, des images, des vidéos, des tableaux, etc.

Semantique html5​

  • <nav> : pour définir une barre de navigation.
  • <header> : pour définir l'en-tête d'une page ou d'une section.
  • <main> : pour définir le contenu principal d'une page.
  • <article> : pour définir un contenu autonome, comme un article ou un blog.
  • <section> : pour définir une section distincte du contenu.
  • <aside>: pour définir un contenu secondaire, comme une colonne latérale ou une boîte d'information.
  • <figure>
  • <footer> : pour définir le pied de page d'une page ou d'une section.
  • <time> : pour définir une date ou un horaire.
  • <mark>: pour mettre en surbrillance du texte. - <details>: pour définir des détails qui peuvent être affichés ou masqués par l'utilisateur.

Accessibilité​

L'accessibilité en HTML5 concerne la façon dont les pages web créées en utilisant le langage HTML5 sont accessibles aux personnes ayant des handicaps ou des besoins spécifiques. Le HTML5 est une version plus récente du langage HTML, qui a été conçue pour offrir de nouvelles possibilités en termes de présentation et d'interaction.

Pour assurer l'accessibilité en HTML5, il est important de respecter les normes et les règles d'accessibilité en web design, telles que celles définies dans le WCAG (Web Content Accessibility Guidelines). Cela implique de prendre en compte les besoins des utilisateurs et de concevoir des pages qui soient facilement utilisables par tous.

Pour ce faire, il est important de :

  • Utiliser des balises et des attributs adaptés pour structurer le contenu de la page et le rendre compréhensible pour les technologies d'assistance, comme les lecteurs d'écran.
  • Fournir des alternatives pour les éléments multimédias, tels que les images et les vidéos, afin que les utilisateurs qui ne peuvent pas les voir puissent en comprendre le contenu.
  • Prévoir des mécanismes de navigation et d'interaction alternatifs, tels que des liens de contenu ou des contrôles de clavier, pour permettre aux utilisateurs qui ne peuvent pas utiliser la souris de naviguer et d'interagir avec le site.
  • Tester régulièrement le site pour vérifier qu'il répond aux critères d'accessibilité et corriger les éventuels problèmes identifiés.

Les balises / attributs​

Les balises et les attributs en HTML5 sont des éléments du langage HTML qui permettent de structurer et de présenter le contenu d'une page web. Les balises sont des mots-clés entourés de crochets qui indiquent au navigateur web comment afficher le contenu, tandis que les attributs sont des propriétés associées aux balises qui fournissent des informations supplémentaires sur la façon dont le contenu doit être présenté.

Voici quelques exemples de balises et d'attributs en HTML5 :

  • La balise <h1> a h6 est utilisée pour définir un titre principal, qui est généralement affiché en gros et en gras.

  • La balise <p> est utilisée pour définir un paragraphe de texte.

  • La balise <img> est utilisée pour insérer une image dans la page. L'attribut src permet de spécifier l'URL de l'image à afficher.

  • La balise <a> est utilisée pour créer un lien vers une autre page ou un autre emplacement dans la même page. L'attribut href permet de spécifier l'URL cible du lien.

  • La balise <html> est la balise racine d'une page web en HTML5. L'attribut lang permet de spécifier la langue dans laquelle le contenu de la page est écrit.

  • La balise <head> contient les informations sur la page, telles que le titre, les métadonnées et les liens vers les fichiers CSS et JavaScript.

  • La balise <title> est utilisée pour définir le titre de la page, qui est affiché dans l'onglet du navigateur et utilisé par les moteurs de recherche.

  • La balise <meta> est utilisée pour définir des métadonnées sur la page, telles que l'auteur, la description ou les mots-clés. L'attribut name permet de spécifier le type de métadonnée, tandis que l'attribut content permet de spécifier sa valeur.

  • La balise <body> contient le contenu de la page, qui est affiché dans la fenêtre du navigateur.

  • La balise <header> est utilisée pour définir une section en-tête de la page, qui contient généralement le titre, le logo et les liens de navigation principaux.

  • La balise <nav> est utilisée pour définir une section de navigation, qui contient les liens vers les différentes sections du site.

  • La balise <main> est utilisée pour définir la section principale de la page, qui contient le contenu principal de la page.

  • La balise <footer> est utilisée pour définir une section pied de page, qui contient généralement les informations de contact, les liens vers les réseaux sociaux et les mentions légales.

Problémes d'accessibilité récurrent​

  • Des informations importantes placées dans une image ou une infographie: une personne utilisant un lecteur d’écran n’y aura pas accès;
  • Des vidéos ou pistes audio sans sous-titres ni transcription;
  • Unmenu de navigation trop long et complexe : une personne naviguant sur votre site avec un clavier devra passer par toutes les pages avant d’accéder à celle souhaitée ;
  • Des boutons trop petits ou trop proches les uns des autres;
  • Des textes trop petits ou qui se fondent dans l’arrière-plan car les couleurs ne sont pas suffisamment en contraste ;
  • Des instructions entièrement basées sur les couleurs ou d’autres éléments visuels: par exemple, «appuyer sur le bouton rouge» posera problème aux daltoniens (4% de la population);
  • Un numéro de téléphone comme seul moyen de contact: si quelqu’un ne peut pas parler ou utiliser un téléphone traditionnel, il lui faudra un autre moyen de vous contacter.