Vidéo étape par étape
Structure de base d’un document HTML
Comme le disait Carl Sagan, « Si vous voulez faire une tarte aux pommes à partir de zéro, vous devez d’abord inventer l’univers », et oui, pour pouvoir comprendre les unités relatives d’Elementor, ce qu’est un élément parent ou le conteneur racine, etc., nous devons d’abord savoir comment se structure de manière basique une page web en langage HTML.
Nous voyons ici la structure minimale d’un document HTML (HyperText Markup Language), le langage HTML est composé de balises délimitées par les signes inférieur à < et supérieur à > : exemple <html>, sauf exceptions comme la première balise <!DOCTYPE html> qui est absolue, toutes les balises ont une ouverture et une fermeture, exemple <h1>En-tête</h1>, la fermeture se distingue car l’ouverture de la balise inclut </ en plus du « inférieur à » la barre oblique également appelée slash /.
- La première ligne de l’exemple est un élément absolu (il n’a pas de balise de fermeture) ; c’est une déclaration de type de document (également appelée déclaration DOCTYPE) qui identifie ce document comme un document HTML5 et permet aux navigateurs modernes de savoir qu’ils doivent interpréter le document tel qu’il est écrit conformément à la spécification HTML5.
- L’ensemble du document est contenu dans un html. Le html est appelé élément racine car il contient tous les éléments du document et ne peut être inclus dans aucun autre élément.
- À l’intérieur du html, le document est divisé en un en-tête (head) et un corps (body). Le head contient des informations descriptives sur le document lui-même, telles que son titre, les feuilles de style qu’il utilise, les scripts et d’autres types d’informations « méta ».
- Le body est le corps de la page, c’est l’élément qui contient tout ce que nous voulons voir apparaître dans la fenêtre du navigateur.
- Les éléments meta à l’intérieur de la balise head fournissent des informations sur le document lui-même. Un élément meta peut être utilisé pour fournir toutes sortes d’informations, mais dans le cas de cet exemple, il spécifie l’encodage de caractères (la collection standardisée de lettres, chiffres et symboles) utilisé dans le document.
- À l’intérieur du head se trouve également la balise title obligatoire. Selon la spécification HTML, chaque document doit contenir un titre descriptif. C’est ce titre qui s’affiche dans l’onglet du navigateur et que Google affichera dans la liste de recherche comme titre de cette page.
- À l’intérieur du bloc body, nous pouvons créer autant de sections que nous le souhaitons, la balise div, cette balise permet de regrouper plusieurs éléments de bloc (paragraphes, en-têtes, listes, etc.). Ces sections sont des conteneurs.
- C’est une autre section identique à la précédente.
Comme vous pouvez le voir dans la Figure, toutes ces balises sont comme une sorte de conteneurs, la racine ou la principale est la balise html qui contient toutes les autres, à l’intérieur de html nous avons le body, et à son tour à l’intérieur du body nous avons d’autres div. Nous pouvons donc dire que l’élément racine est html, body est enfant de html et les div sont enfants de body.
Unités de mesure d’Elementor
Lors de la conception avec Elementor, vous pouvez constater que certains éléments ont des options de taille, vous permettant de choisir PX, EM, REM, %, VW ou VH. Mais que signifient réellement ces unités de mesure et quand devriez-vous utiliser l’une ou l’autre ?
Commençons par les bases, en CSS, vous pouvez spécifier des tailles ou des longueurs d’éléments en utilisant diverses unités de mesure. Les unités de mesure que vous trouverez dans certaines options des widgets d’Elementor incluent PX, EM, REM, %, VW et VH, bien qu’il y en ait plusieurs autres disponibles en CSS. Tous les éléments d’Elementor n’offriront pas toutes ces unités. Elementor ne présente que les options qui ont le plus de sens pour l’élément donné.
L’aspect le plus important à apprendre sur les différentes unités est que certaines unités, comme PX, sont des unités absolues et d’autres sont des unités relatives.
Unités absolues
PX : les pixels (px) sont considérés comme des unités absolues, bien qu’ils soient relatifs au DPI et à la résolution du dispositif d’affichage. Mais sur le dispositif lui-même, l’unité PX est fixe et ne change pas en fonction d’un autre élément. L’utilisation de PX peut être problématique pour les sites web responsives, mais ils sont utiles pour maintenir une taille cohérente pour certains éléments. Si vous avez des éléments dont la taille ne doit pas être modifiée, alors utiliser PX est une bonne option.
Unités relatives
- EM : relatif à l’élément parent
- REM : relatif à l’élément racine (balise HTML et par défaut la taille configurée dans le navigateur)
- % : relatif à l’élément parent
- VW : relatif à la largeur de la fenêtre d’affichage
- VH : relatif à la hauteur de la fenêtre d’affichage
Contrairement à PX, les unités relatives comme %, EM et REM s’adaptent mieux au design responsive et aident également à respecter les normes d’accessibilité. Les unités relatives s’adaptent mieux sur différents dispositifs car elles peuvent s’agrandir ou se réduire en fonction de la taille d’un autre élément.
Prenons un exemple simple, dans la plupart des navigateurs, la taille de police par défaut est 16px. Les unités relatives calculent la taille à partir de cette base. Si vous modifiez cette base en définissant une taille de base pour la balise HTML via CSS, cela devient la base pour calculer les unités relatives dans le reste de la page. De même, si un utilisateur ajuste sa taille de police, cela devient la base pour calculer les unités relatives.
Alors, que signifient ces unités lorsqu’il s’agit de la valeur par défaut de 16px ?
Le nombre que vous spécifiez multipliera ce nombre par la taille par défaut.
1em = 16px (1 * 16)
2em = 32 px (2 * 16)
0.5em = 8px (.5 * 16)
1rem = 16 px
2rem = 32px
0.5rem = 8px
100 % = 16 px
200 % = 32 px
50 % = 8 px
Bien, parfait, mais que se passe-t-il si l’utilisateur modifie la taille par défaut dans son navigateur ? Parce qu’il s’agit d’unités relatives, les valeurs de taille finales seront basées sur la nouvelle taille de base. Bien que la valeur par défaut du navigateur soit généralement de 16px, si l’utilisateur la changeait à 14px, les tailles calculées finiraient par être :
1em = 14px (1 * 14)
2em = 28px (2 * 14)
0.5em = 7px (.5 * 14)
1rem = 14px
2rem = 28px
0.5rem = 7px
100 % = 14 px
200 % = 28 px
50 % = 7px
Cela donne à l’utilisateur la liberté d’ajuster la taille de police par défaut de son navigateur, tout en maintenant l’échelle relative de chaque élément que vous avez spécifié.
Quelle est la différence entre EM et REM ?
En regardant le graphique ci-dessus, il montre EM et REM avec exactement le même aspect. Alors, en quoi diffèrent-ils ?
En bref, ils diffèrent selon l’héritage. Comme mentionné, REM est basé sur l’élément racine (HTML) et par défaut, s’il n’est pas défini, celui du navigateur de l’utilisateur, qui par défaut est à 16px. Chaque élément enfant qui utilise REM utilisera la taille de la racine HTML comme point de calcul, indépendamment du fait qu’un élément parent ait ou non des tailles différentes spécifiées.
EM, en revanche, est basé sur la taille de police de l’élément parent. Si un élément parent a une taille différente de celle de l’élément racine, le calcul de EM sera basé sur l’élément parent et non sur l’élément racine. Cela signifie que les éléments imbriqués qui utilisent EM pour le dimensionnement peuvent parfois finir par avoir une taille que vous n’aviez pas anticipée. D’un autre côté, cela vous donne un contrôle plus précis si vous en avez besoin pour spécifier la taille d’une zone particulière d’une page.
Alors, qu’en est-il de %, VW et VH ? De quoi s’agit-il ?
Alors que PX, EM et REM sont principalement utilisés pour la taille de police, %, VW et VH sont principalement utilisés pour les marges, le remplissage, l’espacement et les largeurs/hauteurs.
Pour réitérer, VH signifie « viewport height » (hauteur de la fenêtre d’affichage), qui est la hauteur de l’écran visible. 100VH représenterait 100 % de la hauteur de la fenêtre d’affichage ou la hauteur complète de l’écran. Et, bien sûr, VW signifie « viewport width » (largeur de la fenêtre d’affichage), qui est la largeur de l’écran visible. 100VW représenterait 100 % de la largeur de la fenêtre d’affichage ou la largeur complète de l’écran. % reflète un pourcentage de la taille de l’élément parent, indépendamment de la taille de la fenêtre d’affichage.
Voyons quelques exemples où Elementor offre des options de %, VW et VH.
- Largeurs de colonne : si vous modifiez la mise en page d’une colonne d’Elementor, vous remarquerez qu’il n’y a qu’une seule unité de taille de largeur disponible : %. Les largeurs de colonne ne fonctionnent bien et de manière responsive que lorsqu’on utilise des pourcentages, donc aucune autre option n’est proposée.
- Marges : les marges d’une section peuvent être spécifiées en PX ou %. En général, il est préférable d’utiliser % pour garantir que les marges ne soient pas plus grandes que le contenu lors de la réduction d’échelle pour un dispositif mobile, par exemple. En utilisant un pourcentage de la largeur du dispositif, vos marges resteront proportionnelles à la taille du contenu, ce qui est presque toujours préférable.
- Remplissage : le remplissage d’une section peut être spécifié en PX, EM ou %. Comme pour les marges, il est souvent préférable d’utiliser EM ou % pour que le remplissage reste relatif à mesure que la taille de la page augmente.
- Taille de police : si vous modifiez la typographie d’un élément, comme un en-tête, vous verrez quatre options : PX, EM, REM et VH.
Avez-vous déjà créé un en-tête de grande taille et admiré à quel point il était beau sur le bureau, pour vous rendre compte qu’il était trop grand sur mobile ?
La clé pour résoudre cela de manière élégante est d’utiliser EM, REM ou VW au lieu de PX. Ce que vous choisissez dépend de votre situation particulière. En général, je choisis EM car je veux que la taille soit relative au parent de l’en-tête. Mais si vous préférez que la taille soit relative à la taille de la racine (HTML), choisissez REM à la place. Ou bien, vous pouvez le configurer pour qu’il soit relatif à la largeur de la fenêtre d’affichage (VW) si cela fonctionne mieux pour votre cas.
Notez que vous pouvez également définir des valeurs PX de taille de police spécifiques par dispositif en utilisant les icônes de dispositif pour spécifier une taille pour ordinateur de bureau, tablette et dispositif mobile. Mais cela impose toujours des limites à la réactivité et à l’accessibilité, alors gardez cela à l’esprit si vous choisissez PX.
Plus sur VW et VH
Les unités de la fenêtre d’affichage représentent un pourcentage de la fenêtre d’affichage actuelle du navigateur (taille actuelle du navigateur). Bien que similaire aux unités de pourcentage, il y a une différence. Les unités de la fenêtre d’affichage sont calculées comme un pourcentage de la taille actuelle de la fenêtre d’affichage du navigateur. Les unités de pourcentage, en revanche, sont calculées comme un pourcentage de l’élément parent, qui peut être différent de la taille de la fenêtre d’affichage.
Considérons un exemple d’une fenêtre d’affichage d’écran mobile de 480px x 800px.
1 VW = 1 % de la largeur de la fenêtre d’affichage (ou 4,8 px)
50 VW = 50 % de la largeur de la fenêtre d’affichage (ou 240 px)
1 VH = 1 % de la hauteur de la fenêtre d’affichage (ou 8px)
50 VH = 50 % de la hauteur de la fenêtre d’affichage (ou 400 px)
Si la taille de la fenêtre d’affichage change, la taille de l’élément change respectivement.
Quand devrais-je utiliser une unité plutôt qu’une autre ?
En fin de compte, il n’existe pas de réponse parfaite à cette question. En général, il est souvent préférable de choisir l’une des unités relatives plutôt que PX pour que votre page web ait la meilleure chance de rendre un design responsive. Cependant, choisissez PX si vous devez vous assurer qu’un élément ne change jamais de taille à aucun point de rupture et reste le même indépendamment du fait qu’un utilisateur ait choisi une taille par défaut différente. Les unités PX garantissent des résultats cohérents même si ce n’est pas idéal.
- EM est relatif à la taille de police de l’élément parent, donc si vous souhaitez adapter la taille de l’élément en fonction de la taille de son parent, utilisez EM.
- REM est relatif à la taille de police de la racine (HTML) et si celle-ci n’est pas définie, celle configurée dans le navigateur sera utilisée, donc si vous souhaitez adapter la taille de l’élément en fonction de la taille de la racine, quelle que soit la taille du parent, utilisez REM. Si vous avez utilisé EM et rencontrez des problèmes de taille en raison de nombreux éléments imbriqués, REM est probablement le meilleur choix.
- VW est utile pour créer des éléments de largeur complète (100 %) qui remplissent toute la largeur de la fenêtre d’affichage. Bien sûr, vous pouvez utiliser n’importe quel pourcentage de la largeur de la fenêtre d’affichage pour atteindre d’autres objectifs, comme 50 % pour la moitié de la largeur, etc.
- VH est utile pour créer des éléments de hauteur complète (100 %) qui remplissent toute la hauteur de la fenêtre d’affichage. Bien sûr, vous pouvez utiliser n’importe quel pourcentage de la hauteur de la fenêtre d’affichage pour atteindre d’autres objectifs, comme 50 % pour la moitié de la hauteur, etc.
- % est similaire à VW et VH, mais ce n’est pas une longueur relative à la largeur ou à la hauteur de la fenêtre d’affichage. Au lieu de cela, c’est un pourcentage de la largeur ou de la hauteur de l’élément parent. Les unités de pourcentage sont généralement utiles pour définir la largeur des marges, par exemple.
- Elementor facilite le choix de l’option qui convient le mieux à votre design. En fin de compte, c’est votre choix.