Alain Éric Gauthier

Notes et aide-mémoire à propos du HTML

Il m’arrive de passer de longs moments sans faire du HTML et parfois j’oublie certaines notions, j’ai créé cette page pour moi mais elle pourra vous être utile. J’utilise HTML5BP comme modèle de base et la documentation sur cette page est basée sur ce modèle.

Table des matières

Les éléments sémantiques

La création d’HTML5 cherchait à régler un problème que les version antérieure d’HTML ignorait : comment savoir en tant qu’humain et en tant que machine quelle est la fonction d’un bloc de texte dans un document ?

Les définitions de la norme sont parfois difficiles à comprendre et les docteurs du HTML5 ont mis au point un organigramme pour aider à faire le bon choix.

http://html5doctor.com/downloads/h5d-sectioning-flowchart.png

Ceci dit, l’organigramme se limite à un nombre restreint d’éléments. Je garde donc ma définition résumée des éléments sémantiques. Ce sont mes notes personnelles et elles sont parfois basées sur mon opinion.

Retour

ADDRESS

S’applique à des informations de contact pour la section dont il fait partie.

Retour

ARTICLE

S’applique à un bloc de contenu qui est indépendant du reste de la page et pourrait être utilisé ailleurs en dehors de son contexte actuel.

Retour

ASIDE

S’applique à un bloc de contenu qui est plus ou moins en lien avec le contenu autour de ce bloc.

Retour

DETAILS

S’applique à un bloc de contenu de divulgation à partir duquel l’utilisateur peut obtenir des informations ou des contrôles supplémentaires.

Retour

FIGCAPTION

S’applique à une légende pour un élément parent. S’insère habituellement dans un élément figure.

Retour

FIGURE

S’applique à un bloc de contenu qui complémente le texte principal (photo, code, liste, etc.) et qui pourrait être déplacé, sans nuire à la compréhension, en bas de page, fin de texte ou en annexe dans un document traditionnel.

Retour

HEADER

S’applique à l’entête d’un document ou d’une section. On s’en sert habituellement pour grouper des éléments <h1>-<h6> pour un titre et un sous-titre. L’entête peut aussi contenir d’autres informations comme l’historique de version et la date de publication.

Retour

MAIN

S’applique au bloc de contenu principal du document. Permet, dans les technologies d’assistance d’aller directement au contenu principal de la page. Il ne doit être utilisé qu’une seule fois par page/document.

Retour

MARK

S’applique à un segment de texte dans un document qui est marqué ou surligné pour son importance dans un autre contexte. S’applique habituellement pour mettre en évidence une partie d’une citation.

Retour

NAV

S’applique à la navigation pour un document. Son contenu contient des liens soit vers d’autres partie du site ou vers les différentes parties du document actuel.

Retour

SECTION

S’applique à une section générale du document. Elle pourrait contenir son propre <header> et <footer>.

Retour

SUMMARY

S’applique à un résumé de l’élément parent, semblable à une légende mais à utiliser lorsqu’il y a plus de texte que pour <caption>.

Retour

TIME

S’applique à une date pour la rendre lisible par des machines.

Les éléments multimédias

Les navigateurs modernes prennent en charge le contenu vidéo et audio sans avoir recours à des logiciels additionnels. Une bonne intégration multimédia à même une page web demande un bot lot de connaissances et de travail pour être bien fait.

Retour

VIDEO

Utilisé pour intégrer un fichier vidéo. Formats supportés par la norme : .mp4, .webm, .ogg.

Retour

AUDIO

Utilisé pour intégrer un fichier audio. Formats supportés par la norme : .mp3, .wav, .ogg.

Retour

SOURCE

Se place à l’intérieur d’un élément video ou audio pour offrir des alternatives de format à télécharger. Il peut donc y avoir plusieurs éléments sources à l’intérieur d’un élément.

Retour

TRACK

Se place à l’intérieur d’un élément <video> ou <audio> pour offrir des sous-titres à afficher pendant que l'audio ou la vidéo défile. Le fichier correspondant est au format WebVTT (.vtt)

Retour

OBJECT

Cet élément représente une ressource externe qui sera traitée, selon le cas, comme une image qui sera affichée ou un autre format qui utilisera une extension du navigateur pour être exécutée.

Retour

EMBED

Intègre un contenu externe comme une application ou un contenu interactif (habituellement pas HTML).

Retour

IFRAME

Intègre un contenu externe qui est généralement du HTML.

Les éléments textuels

Retour

A

Utilisé pour les liens internes et externes.

Retour

ABBR

Utilisé pour les abréviations et les acronymes, il remplace l’élément <acronym> des anciennes version d’HTML. Pour être utile, il doit inclure un attribut title qui définit l’abréviation ou l’acronyme.

Retour

EM

Utilisé pour mettre l’emphase sur un mot ou un groupe de mots.

Retour

STRONG

Utilisé pour indiquer l’importance d’un mot ou d’un groupe de mots

Retour

SMALL

Utilisé pour des commentaires secondaires dans le texte.

Retour

CITE

Utilisé pour baliser le titre d’une œuvre.

Retour

Q

Utilisé pour une citation courte en incise.

Retour

BLOCKQUOTE

Utilisé pour un bloc de texte qui est une citation.

Retour

CODE

Utilise pour du code informatique.

Retour

SUB

Utilisé pour mettre du texte en indice.

Retour

SUP

Utilisé pour mettre du texte en exposant.

Retour

I

Pour du texte avec une autre voix (s’utilise dans la narration).

Retour

B

Pour des mots stylistiquement décalés (jargon, acronymes, etc.).

Retour

U

Anciennement pour du texte souligné mais est maintenant utilise pour annoter du texte particulier sans spécifier le contexte, celui-ci étant implicite au texte.

Retour

SPAN

Permet de baliser n’importe quel mot ou groupe de mots pour lui donner une fonction particulière comme avertissement ou pour spécifier une langue différente du texte principal).

Retour

BR

Utilisé pour séparer des segments de texte qui font partie du contenu (poèmes, adresses).

Mes outils

Pour ce qui est des outils, j’aime que les choses soient simples. L’important n’est pas la quantité mais que les outils que j’utilisent soient appropriés pour ce que j’ai à faire.

Retour

Sublime Text

C'est l'éditeur que j'utilise pour le moment. Il se télécharge ici :

https://www.sublimetext.com/

Faute de temps, je suis loin d'utilise cet éditeur à sa pleine capacité, mais je constate que pour mes besoins, mon utilisation très sommaire m'aide à être plus efficace. La rapidité à laquelle j'arrive à coder un page avec cet outil est plus grande qu'avec un autre éditeur et il est vraiment plus facile de trouver les erreurs quand il y en a.

Retour

Liens morts

Il arrive parfois que certains liens que vous avez ajoutés à vos pages meurent (les pages sont retirés de l’internet). Lorsque le site atteint une certaine taille, c’est long et fastidieux de vérifier chacun des liens manuellement. Il existe un outil en ligne qui fait très bien le travail et ce qui n’est pas négligeable, il est gratuit.

https://www.brokenlinkcheck.com/

Retour

Sitemap

Pour les moteurs de recherche, ce document est très utile. Il donne des informations sur les pages du site qui méritent d’être indexées, à quelle fréquence elles sont susceptibles d’être modifier et qu’elle est la priorité relative de chacun des pages. Faire un fichier XML manuellement n’est vraiment pas une bonne idée. Heureusement, si vous n’avez pas de CMS, vous pouvez utiliser un service en ligne gratuit :

https://www.xml-sitemaps.com/

Retour

Lorem Ipsusm

Lorem ipsum dolor sit amet, consectetur adipiscing elit,

Si vous avez déjà vu ce texte, vous avez déjà rencontré du lorem ipsum. On l’utilise pour remplir l’espace réservé au texte dans une page web lorsqu’on veut se concentrer sur l’apparence du texte, sa mise en page et la disposition des éléments sans être distrait par la signification du texte lui-même. Le générateur que j’utilise est conçu pour créer du texte qui ne se répète jamais et qui est toujours équilibré pour ressembler à du français. Pour générer vos propres extraits et pour en savoir plus, aller sur le site ipsum.com :

https://fr.lipsum.com/

Retour

Visualisation d'un site web

Voir tous les liens entre les pages de votre site devient rapidement un difficile quand le nombre de pages et de liens devient trop grand. Pour m'aider à voir comment les pages sont liées entres-elles et prendre des décisions sur l'ajout de liens vers la nouvelles page, il m'est parfois utile de visualiser les liens entre les pages et il existe un outil très simple et très efficace pour ce faire :

http://www.visualsitemapper.com/

Mes sources

Retour

A List Apart

https://alistapart.com/

Le meilleur site web sur le web design, pas juste HTML mais ça fait aussi partie des sujets.

Une autre source liée à ce site est https://abookapart.com/. Ils y publient des livres sur des sujets précis qui sont vraiment bien faits. En cherchant un peu, il est parfois possible de trouver des livres qui sont gratuits.

Retour

Standards

J'avais l'habitude de suivre religieusement les standards du W3C et il en existe 1 pour HTML5 : https://www.w3.org/TR/html52/.

Mais le WATWG a une vision différente du standard, c'est quelque chose qui est en constante évolution mais avec une préoccupation pour la rétro compatibilité. Pour bien faire comprendre la différence entre les deux, cette norme se nomme HTML. Il n'y a pas de numéro de version. HTML est un langage pour baliser du texte et c'est un standard vivant. Il y a donc des normes et des changements continus mais l'important c'est que les changements futurs ne rendront pas les éléments du passé incompatibles.

Retour

HTML5 Doctors

Ce site était très actif pendant les débuts de la norme mise en place par Ian Hixie et le WATWG. Mais il est toujours pertinent.

http://html5doctor.com/

Retour

Free Code Camp

À partir de cette page, ce site offre des milliers de tutoriels sous forme de leçons et il est possible de coder à même la page web. Avec un compte gratuit, il est possible de sauvegarder sa progression.

https://www.freecodecamp.org/

Retour

W3 Schools

Un peu semblable au précédent, ce site organise aussi l’information sous forme de leçons organisée en séquence mais il est aussi possible de naviguer el site pour obtenir de l’information sur un élément particulier.

https://www.w3schools.com/