Le HTML et pourquoi c’est important

Emprunté à Julien Gilbert

Le HTML et pourquoi c’est important 1

Balises et attributs ? 1

Les balises 1

Balise normale 1

Balise orpheline (auto-fermante) 1

Les attributs 2

Imbrication d’éléments 2

Les éléments HTML 2

Quelles sont les balises HTML les plus utilisées ? 3

Éléments “de bloc” 3

Éléments “en ligne” 3

HTML, CSS et JavaScript : comment les différencier ? 3

Pour finir… 3

Importance du html 4

Comment faire une page html ? 4

Comment corriger une page html ? 4

Erreurs courantes en html 5

Le HTML ou HyperText Markup Language est un langage informatique. Il a été développé en 1990 par les groupes W3C et WHARWG. Sa version la plus aboutie est à ce jour le HTML5, qui fête son dixième anniversaire en 2024.

C’est notamment le code HTML que va lire votre navigateur, une fois que vous avez cliqué sur une URL, pour afficher sur votre écran le contenu que le concepteur du site voulait que vous voyiez.

Balises et attributs ?

Les balises

Le langage HTML est relativement simple à lire. Il s’appuie sur des « balises », c’est-à-dire des indications. Les anglicistes disent : tag. Il y a des balises normales et des balises orphelines.

Balise normale

Prenons un exemple d’élément courant, comme un paragraphe :

<p> Longtemps, je me suis couché de bonne heure. </p>

<p> est la balise ouvrante

</p> est la balise fermante

Entre les deux balises il y a le contenu proprement dit (ici . Longtemps, je me suis couché de bonne heure ).

Balise orpheline (auto-fermante)

<br /> balise qui sert à aller à la ligne,

<img src="mon-image" /> balise qui sert à insérer mon-image.

On reconnaît une balise auto-fermante par la présence de : />

Les attributs

Les attributs, ce sont des indications supplémentaires.

Un élément HTML peut aussi intégrer un attribut dont la valeur servira à transmettre des informations supplémentaires aux navigateurs et robots d’exploration des moteurs de recherche. Un des plus connus est l’attribut “alt”.

Exemple :

L’attribut “alt” (pour “alternatif”) affiche un texte descriptif à la place d’une image. De cette manière, l’utilisateur peut se faire une idée de ce qu’il était censé voir à l’origine.

Les attributs ont leurs propres règles de syntaxe. Pour une balise <img> par exemple, on peut avoir :

img est la balise, elle indique qu’on va chercher une image,

src, qui veut dire ‘source’, donne l’adresse de cette image, ici : https://aciah.xyz/PC.png

alt décrit cette image.

On peut avoir aussi :

width est la largeur,

height est la hauteur

Les quatre attributs ici sont « src », « alt », « width » et « height » . À chaque fois, on observe :

le nom de l’attribut est directement suivi d’un signe égal (=) ;
la valeur de l’attribut est contenue entre des guillemets, simples (‘) ou doubles (").

Imbrication d’éléments

On peut imbriquer des éléments entre eux, par exemple mettre en gras une partie de la phrase :

<p> Longtemps, <strong>je me suis couché</strong> de bonne heure.</p>

ce qui va donner pour résultat : Longtemps, je me suis couché de bonne heure.

Il y a deux balises :

<p> et </p> pour le paragraphe,

<strong> et </strong> pour indiquer qu’il faut mettre en gras.

Les éléments HTML

Le document HTML donne à votre navigateur toutes les directives pour afficher son contenu.

Tout fichier HTML commence par <!DOCTYPE html>, puis présentera les éléments suivants :

<html></html>, qui encadre tout. On trouve cela au début et à la fin de la page html.
<head></head>, qui inclut tout ce qui ne doit pas être affiché à l’écran.
<meta charset="utf-8″>, qui définit le jeu de caractères utilisé pour la gestion des textes.
<meta name="viewport" content="width=device-width" >, qui permet à la page de s’afficher à la bonne largeur, quel que soit l’appareil utilisé ;
<title></title>, qui donne le titre de la page web.
<body></body>, est le “corps” du document, à savoir toute information que l’on souhaite fournir aux internautes (texte, images, vidéos, jeux, audio, etc.) ;

Quelles sont les balises HTML les plus utilisées ?

On peut utiliser plus de 140 balises différentes pour bâtir un fichier HTML. On peut les répartir en deux catégories : niveau bloc et niveau ligne.

Éléments “de bloc”

Les éléments de niveau bloc couvrent toute la largeur de la page. Voici les plus importants à connaître (outre ceux déjà mentionnés plus haut) :

les “headings” (à ne pas confondre avec <head>), qui sont les titres. Allant de <h1> à <h6>, elles permettent de structurer et de hiérarchiser du contenu ;
<p>, la balise paragraphe, qui indique le début d’un nouveau paragraphe ;
<li>, pour créer des listes à puces,
- <ol>, pour les listes ordonnées, numérotées, où l’ordre d’apparition est important ;
- <ul>, pour les listes non ordonnées ;
<div> ou <main>, pour créer une « section », une boite ;
<header>, pour insérer des éléments de bloc dans l’en-tête ;
<footer> pour insérer des éléments de bloc dans le pied de page.

Éléments “en ligne”

Ceux-là permettent d’entrer dans le détail pour former les contenus et les mettre en valeur. En voici quelques-uns :

<strong>, qui permet de passer un texte en caractères gras ;
<em>, pour la mise en italique ;
<a>, la fameuse balise hyperlien, pour diriger les internautes sur une page annexe, interne ou externe. On l’associe à l’attribut “href” (référence hypertexte) pour donner l’URL cible.

HTML, CSS et JavaScript : comment les différencier ?

HTML, CSS et JavaScript sont utiles pour concevoir la totalité d’une page web. Chacun de ces langages informatiques détient son propre rôle :

le HTML structure les pages et facilite la lecture notamment par les lecteurs d’écran;
le CSS (Cascading Style Sheets) donne des styles, paramétrer les couleurs, les espacements, les mises en page ;
JavaScript est utile aux contenus dynamiques : galeries de photos, popups, diaporamas, mini-jeux, animations, etc.

En somme, vous avez là les trois mousquetaires pour un site web structuré, beau et interactif !

Pour finir…

Pour aller plus loin dans la compréhension du langage HTML, n’hésitez pas à consulter les vidéos du Youtuber Micode !

Autres informations sur le html

Importance du html

La page HTML joue un rôle fondamental dans l’accessibilité web, car elle constitue la structure de base qui permet à tous les utilisateurs, en particulier ceux en situation de handicap, d’accéder aux contenus et aux fonctionnalités d’un site Internet. Il est nécessaire d’utiliser du « html sémantique ».

Sémantique signifie "qui se rapporte au sens". Écrire du code HTML sémantique c’est utiliser des éléments HTML pour structurer le contenu en fonction de la signification de chaque élément, et non de son apparence.

Inclusion de tous les utilisateurs : Une page HTML bien conçue rend le web utilisable par les personnes ayant des handicaps visuels, auditifs, moteurs ou cognitifs, mais aussi par les personnes âgées ou celles confrontées à des limitations temporaires ou contextuelles.
Utilisation du HTML sémantique : Employer les bons éléments HTML (titres, listes, boutons, formulaires structurés, etc.) permet aux lecteurs d’écran et autres technologies d’assistance de comprendre et de présenter correctement l’information. Par exemple, un bouton <button> est directement détectable et actionnable au clavier, contrairement à un simple <div> stylisé.
Navigation et compréhension facilitées : Une page structurée avec des balises sémantiques permet une navigation logique au clavier et guide les personnes avec déficience visuelle à travers les titres, sections et liens du contenu.
Accessibilité des médias et formulaires : L’intégration de textes alternatifs (alt) pour les images, de sous-titres pour les vidéos et d’annotations pour les formulaires sont essentiels pour garantir qu’aucune information ne soit inaccessible.
Bénéfices universels : En rendant les pages HTML accessibles, on améliore l’expérience pour tous (notamment sur mobile, dans des conditions de faible luminosité ou de mauvaise connexion), en plus de respecter les obligations légales et d’élargir son audience potentielle.
Meilleur référencement : Un code HTML accessible et bien structuré est aussi mieux compris par les moteurs de recherche, ce qui améliore la visibilité du site.

« La puissance du web est dans son universalité. L’accès par tout le monde, quel que soit le handicap, est un aspect essentiel. » — Tim Berners-Lee, inventeur du Web.

En résumé, une page HTML accessible est la condition préalable pour garantir que chacun puisse percevoir, comprendre, naviguer et interagir avec le web, quels que soient ses capacités ou son contexte d’utilisation.

Comment faire une page html ?

C’est plutôt facile avec Libre Office

créer votre document libre-office, en veillant bien à respecter les règles d’accessibilité.
Faire : fichier / enregistrer sous, et donner à votre document le nom : document.html

en sélectionnant bien le type de fichier : Document HTML (Writer) (.html)

Comment corriger une page html ?

Il arrive qu’une page html ait quelques défauts visuels :

texte trop collé à gauche de l’écran
image trop collée à gauche de l’écran
texte collé à l’image.

Il est possible de faire des corrections, voici comment.

1 – Aller chercher le document : LouisBraille.odt ici :
https://aciah.xyz/LouisBraille.odt

et l’enregistrer sous la forme : LouisBraille.html.

2 – Ouvrir le document LouisBraille.html. On voit qu’il y a des corrections à faire.

3 – D’abord, il est trop collé sur le côté gauche de l’écran. Nous allons créer une marge de 3 cm.

Ouvrir LouisBraille.html, clic-droit, avec un éditeur de texte
Assez haut dans le document, on voit :
<body lang="fr-FR" link="#000080" vlink="#800000" dir="ltr">
il faut ajouter quelque chose après :
<body lang="fr-FR" link="#000080" vlink="#800000" dir="ltr"><div style="margin-left:3cm">
En bas du document, on voit : </body>, il faut ajouter quelque chose avant : </div></body>
Enregistrer, puis ouvrir avec Firefox pour voir si la modification est prise en compte.

– Dans le document LouisBraille.html, du texte est collé à l’image. Nous allons mettre le texte sous l’image. Pour cela :

Ouvrir LouisBraille.html, clic-droit, avec un éditeur de texte
Repérer : <img src="LouisBraille_html_…..png" name="Image1" ………. border="0" />

il faut ajouter quelque chose juste après : <div style="clear:both;"></div>

Enregistrer, puis ouvrir avec Firefox pour voir si la modification est prise en compte.

- Dans le document LouisBraille.html, l’image est trop à gauche, nous allons la décaler.

Ouvrir LouisBraille.html, clic-droit, avec un éditeur de texte
Repérer : <img src="LouisBraille_html_…..png" name="Image1" ………. border="0" />
Et juste avant /> , il faut ajouter quelque chose, par exemple : hspace="200" comme ceci :
<img src="LouisBraille_html_…....png" name="Image1" ………. border="0" hspace="200" />

Enregistrer, puis ouvrir avec Firefox pour voir si la modification est prise en compte.
Repérage : un paragraphe commence par <p> et finit par </p>
si vous avez besoin de créer une espace entre deux paragraphes, ajoutez ceci : <p> </p>

Erreurs courantes en html

Plusieurs erreurs courantes en HTML peuvent rendre un site web inaccessible pour de nombreux utilisateurs. Voici les principales à éviter pour garantir une bonne accessibilité :

Oublier les balises alt pour les images : les images sans attribut alt ne sont pas interprétées par les lecteurs d'écran, privant les personnes malvoyantes d'informations essentielles.
Manque de contraste dans les couleurs : des contrastes trop faibles entre texte et arrière-plan rendent la lecture difficile aux personnes ayant des troubles visuels ou utilisant des écrans de moindre qualité.
Balises HTML non fermées : le non-respect de la structure HTML (balises ouvertes non fermées) peut provoquer un affichage désordonné ou la non-accessibilité de contenus aux différentes technologies d’assistance.
Utilisation incorrecte des attributs : mauvaise utilisation ou oubli d’attributs essentiels (href, src, label dans les formulaires, etc.) nuit à la navigation et à la compréhension du site, notamment par les logiciels d’aide.
Mauvaise hiérarchisation des titres (<h1>, <h2>, etc.) : l’absence ou la confusion dans la structure des titres gêne la navigation des utilisateurs de lecteurs d’écran, qui s’appuient sur cette hiérarchie pour se repérer.
Formulaires non accessibles : l’absence de liens explicites entre les champs de formulaire et leurs labels (<label for="...">) complique l’accès pour les utilisateurs de technologies d’assistance.
Contenus dynamiques non annoncés : les changements de contenus non signalés (AJAX, pop-ups sans mise à jour des éléments accessibles) ne sont pas perçus par tous les utilisateurs, créant de l’exclusion.
Navigation au clavier incomplète : un site qui ne permet pas la navigation uniquement au clavier ou qui piège le focus rend l’accès impossible pour un public ne pouvant utiliser la souris.

Il est donc essentiel de suivre les bonnes pratiques du HTML sémantique, de tester la compatibilité avec les technologies d’assistance, et d’utiliser des outils de validation pour corriger ces erreurs et rendre le site accessible au plus grand nombre.