Alain Éric Gauthier

HTML

Tout ce qu’il faut savoir pour créer un document en HTML

HTML, c'est le langage de programmation qui balise les pages web. J'en fait depuis 1995. Il y a eu beaucoup de changements, mais étrangement, depuis quelques années, le HTML moderne ressemble beaucoup au HTML des années 1990...

HTML est un langage relativement simple à apprendre. J’ai réussi à guider un enfant de 10 dans la création de sa première page HTML en quelques heures.

HTML peut vous être utile même si vous n'êtes pas un designer ou un développeur web. De plus en plus de systèmes et plateforme (Wordpress, Drupal, SharePoint) vous offre la possibilité de créer des pages HTML sans coder mais si vous connaissez les bases, vous pourrez créer des mises en page plus sophistiquées et quand cela se produit, régler les problèmes d’affichages qui se produisent pendant que vous créez des pages.

Si vous voulez apprendre HTML, j’offrerai bientôt un guide qui vous permettra de créer vos premières pages en quelques heures.

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

Ma méthode

Retour

Un site web statique en quelques minutes

HTML5BP est le modèle de base que j'utilise le plus souvent pour démarrer un site. Mais je ne m'en sers pas de la manière prévue.

Pour se procurer le modèle, il faut aller ici: https://html5boilerplate.com/ Une fois le fichier téléchargé, je retire le dossier doc et les fichiers suivants :

  • .editorconfig
  • .gitattributes
  • .gitignore
  • LICENSE.txt

Ensuite, je modifie le fichier index.html pour qu'il contiennent la navigation du site et les autres éléments qui apparaîtront sur toutes les pages du site.

Évidemment, il faut aussi modifier le CSS.

Quand tout est en place, je fais une copie de index.html que je renomme template.html. Chaque nouvelle page sera une copie renommée de template.html.

Ensuite, il faut refaire la page 404. Celle-ci est particulière car le code HTML qu'elle contient est plus léger et le CSS est dans la page et non pas dans le fichier main.css.

Cette méthode fonctionne très bien pour les sites avec peu de page (moins de 30). Si le besoin est d'avoir un site avec plus de pages, il est vraiment plus utile d'utiliser un CMS.

Les éléments de HTML5BP

Retour

DOCTYPE

<!doctype html>

C’est le premier élément qui doit apparaitre au haut du document HTML. S’il n’est pas présent, le navigateur choisira un mode d’affichage différent de la norme HTML la plus récente. Le résultat est que vos pages ne s’afficheront pas comme elle le devrait.

Il existe d’autres déclarations !doctype selon les différentes normes HTML. Avant la norme HTML actuelle, plusieurs version d’HTML ont été utilisées. Chaque déclaration !doctype faire référence à chacune de ces versions.

Retour

HTML

<html class="no-js" lang="fr">

C’est la première balise à mettre dans une page. Elle encadre tout le contenu de la page.

class="no-js"

Sert à prévenir le FOUC. Par défaut, on présume que JavaScript n’est pas activé par le navigateur. Une fois que la page est chargé, le script de modernizr viendra changer cette classe pour "js". Cela permet de faire du CSS spécifique aux navigateurs avec ou sans JavaScript mais sans provoquer le FOUC.

lang="fr"

Définir la langue principale du contenu de votre page est important. Cette information est utilisée pour l’indexation de vos pages par les moteurs de recherches mais elle est aussi utilisée par le navigateur.

Tous les codes de langues sur trouve sur la page language-subtag-registry.

Retour

HEAD

<head>

</head>

C’est la deuxième balise à mettre dans une page. Tout ce qu’elle contient ne sera pas affiché sur la page, mais beaucoup d’instructions seront utilisée par le navigateur et une partie de l’information fournie sera utilisée par les moteurs de recherche lorsqu’ils indexent votre page.

Retour

META charset

<meta charset="utf-8">

Cette balise doit se trouver à l’intérieur des premiers 1024 bytes pour être interprétée correctement. De plus, une faille dans IE nécessite que cette déclaration apparaisse le plus rapidement possible dans votre document HTML. Finalement, UTF-8 est l’encodage par défaut pour tout ce qui est relativement moderne sur le web. Cet encodage permet d’afficher les caractères dans toutes les langues correctement.

Retour

TITLE

<title> … </title>

Cette balise fait exactement ce qu’elle suggère : elle donne un titre à votre document. Le texte balisé sera affiché dans l’onglet du navigateur et sera utilisé par défaut si un usager sauvegarde la page à partir de son navigateur. De plus, le texte sera indexé par les moteurs de recherche; c’est très important pour le SEO.

Retour

META descrition

<meta name="description" content="…">

Cette balise sert à inclure une description du contenu de la page. Dans certaines situations, elle sera utilisée comme résumé dans les résultats de recherche. Les conseils de Google pour les meta descriptions efficaces :

  • Chaque page doit contenir sa propre meta description : ne faites pas un texte générique qui est utilisé sur toutes les pages de votre site.
  • Utilisez des données clairement associées au contenu : pas seulement du texte, cela peut parfois être des données (auteur, prix, nombre de pages pour un livre par exemple).
  • Rédigez des descriptions de qualité : la description n’est pas visible quand vous chargez la page mais si elle est jugée bonne par Google (ou un autre moteur de recherches), elle sera affichée dans les résultats de recherche. Cela vous permet d’attirer plus de visiteurs sur vos pages affichées dans les résultats de recherches.

Retour

META viewport

<meta name="viewport" content="width=device-width, initial-scale=1">

Cette balise contrôle comment la page sera affichée sur les appareils mobiles. La valeur width="device-width" indique au navigateur d’utiliser la largeur de l’écran pour afficher la page. La valeur initial-scale="1" ajuste le zoom du navigateur à 100%.

Ces valeurs fonctionnent dans la majorité des cas mais pour en savoir plus, il faudra lire de la documentation en anglais ici et ici.

Retour

META theme-color

<meta name="theme-color" content="#...">

Bien que ceci ne soit qu’un léger détail, c’est une option disponible et elle pourrait être intéressante. Elle permet de changer la couleur de la barre de statut (la partie supérieure de l’écran des appareils mobiles) mais seulement pour Chrome sur Android.

Un bon texte d’introduction à ces concepts se trouve sur le site pour développeurs de Google.

Retour

BODY

<body>

</body>

Tout ce qui se trouve entre ces deux balises fera partie du corps de la page et à moins que ce ne soit des balises qui n’affichent rien (<style>, <script>, etc.), le contenu sera affiché dans la fenêtre du navigateur.

Retour

If IE

<!--[if IE]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser.
Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->

Ce bout de code ne s’affiche que pour les utilisateurs de IE9 et moins. Ils sont gentiment invités à mettre leur navigateur à jour. Évidemment, si le site doit supporter ces navigateurs inférieurs, il faudra enlever ou modifier cette partie de code.

Retour

SCRIPT

Les scripts nécessaires au bon fonctionnement de la page sont ajoutés à la fin pour éviter de ralentir le chargement du contenu.

modernizr

<script src="js/vendor/modernizr-3.8.0.min.js"></script>

Il s’agit d’une librairie JavaScript qui ajoute des classes à l’éléments <html> une fois que certains tests sont complétés. La librairie permet aux vieux navigateurs d’interpréter correctement les balises sémantiques plus récentes (<section>, <article>, <header>, <footer>, etc.).

Le site de modernizr offre un peu plus d’information.

jQuery

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')</script>

jQuery est une librairie JavaScript qui permet d’ajouter de l’interactivité aux pages web au moyen de JavaScript. Dans ce segment de code, il y a en fait deux liens vers jQuery : le premier se trouve sur le site de jQuery et le second chargera vers une version locale (dans les rares cas où la version sur le web ne serait pas disponible).

plugin.js

<script src="js/plugins.js"></script>

Ce fichier contient un bout de code qui évite, dans certains navigateurs, d’afficher des messages d’erreurs liés à JavaScript.

Il est possible d’ajouter des plugins jQuery ou d’autres libraires dans ce document. Ce fichier comme tel n’est pas nécessaire mais en incluant toutes les librairies additionnelles dans un seul document, on réduit le nombre de documents à charger pour chaque page, ce qui évite de rendre votre site trop lent.

main.js

<script src="js/main.js"></script>

Encore une fois, pour des fins d’organisations, ce document contient le JavaScript que vous créez vous-mêmes. Par défaut il est vide.

Google Analytics

<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID.-->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA- XXXXX-Y', 'auto'); ga('set','transport','beacon'); ga('send', 'pageview')
</script><script src="https://www.google-analytics.com/analytics.js" async></script>

Si vous utilisez Google Analytics vous devez remplacer UA-XXXX-Y par votre ID Google Analytics. N’oubliez pas de la faire pour toutes les pages de votre site.

Si vous n’utilisez pas GA, vous pouvez simplement effacer ce segment de code.

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 alternatives de format à télécharger. Il peut donc y avoir plusieurs éléments sources à l’intérieur d’un élément.

Retour

OBJECT

Cet élément représente une ressource externe qui sera traité, 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/

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/