structurer sa page…

Pour structurer l'ensemble de votre corpus textuel (construction du squelette de la page), vous allez méthodiquement convoquer les éléments HTML suivants⁥:<section>, <article>, <h1> à <h6>, <p>.

1^.1 - …avec l'élément <section> pour créer une section générique d'un document regroupant un même sujet. Une section peut commencer par un titre de niveau <h2> et se poursuit avec de nombreux paragraphes <p>. Elle peut se multiplier dans la page.

côté html

côté navigateur

1^.2 - …avec l'élément <article> pour créer une section de contenu indépendante. Un article peut commencer par un titre de niveau <h2> et se poursuit avec de nombreux paragraphes <p>. <article> peut se multiplier dans la page.

côté html

côté navigateur

1^.3 - …avec les éléments <h1> à <h6> pour hiérarchiser les six niveaux de titre d'une section, d'un article. Le titre de niveau<h1> est le plus important et <h6> est le moins important.

côté html

côté navigateur

Consultez le tableau indiquant les valeurs, par défaut, des tailles de police en px, en em et accessoirement en pt pour ces six niveaux de titre.

1^.4 - …avec l'élément <p> pour créer un paragraphe. Les paragraphes sont généralement représentés comme des blocs et séparés par un espace horizontal (saut de ligne) et⁥/⁥ou une indentation (retrait) de la première ligne.

Préconisation⁥: répartir le contenu entre différents paragraphes permet d'améliorer l'accessibilité d'une page pour les personnes en situation de handicap visuel. Les lecteurs d'écran et autres outils d'assistance fournissent des raccourcis qui permettent aux utilisateurs d'accéder rapidement au paragraphe suivant ou précédent et ainsi de naviguer plus rapidement sur la page, comme le permettent les blancs pour la navigation visuelle des autres utilisateurs.

côté html

côté navigateur

Remarque⁥: par défaut, tous les éléments de <section>, <article>, <h1> à <h6> et <p> créent une boîte de niveau bloc dans la mise en page, commençant sur une nouvelle ligne et prenant toute la largeur disponible dans leur bloc conteneur.

mettre en valeur…

Pour mettre en évidence, singulariser certains mots, expressions, citations, commentaires… de votre corpus textuel, vous allez ponctuellement convoquer les éléments HTML suivants⁥:<strong>, <em>, <mark>, <small>, <sup>, <sub>.

2^.1 - …avec l'élément HTML <strong> pour marquer un texte sur lequel on veut insister par sa mise en forme en gras. Cet élément se traduit généralement par l'affichage du texte avec une graisse élevée (entre 700 et 900).
Par rigueur de nomenclature, il est à privilégier à l'élément <b> pour une raison de sémantique liée aux règles de l'accessibilité.

côté html

côté navigateur

2^.2 - …avec l'élément HTML <em> (pour emphase) pour marquer un texte sur lequel on veut insister par sa mise en forme en italique.
Par rigueur de nomenclature, il est à privilégier à l'élément <i> pour une raison de sémantique liée aux règles de l'accessibilité.

côté html

côté navigateur

2^.3 - …avec l'élément HTML <mark> pour mettre en évidence un mot en le surlignant (d'une couleur yellow, par défaut). Pour changer cette couleur, vous pouvez modifier cette valeur par défaut dans la feuille de style CSS associée grâce à la propriété background-color.

côté html

côté navigateur

2^.4 - …avec l'élément HTML <small> pour mettre en forme les commentaires annexes, les droits d'auteur et les textes juridiques en petits caractères⁥:

côté html

côté navigateur

2^.5 - …avec l'élément HTML <sup> pour afficher du texte en exposant en le positionnant plus haut et généralement plus petit par rapport au corps du texte courant⁥:

côté html

côté navigateur

Astuce⁥: l'utilisation de cet élément peut avoir tendance à modifier l'interlignage du paragraphe parent. Dans la CSS, réduire son line-height est une bonne tentative pour corriger cela, mais il est parfois plus stable d'utiliser vertical-align:baseline; complété de position:relative; et de top:-0.5em; (avec une valeur négative). ^{exemple à manipuler}

2^.6 - …avec l'élément HTML <sub> pour afficher du texte en indice sous la ligne de base et généralement plus petit par rapport au corps du texte courant⁥:

côté html

côté navigateur

Astuce⁥: l'utilisation de cet élément peut avoir tendance à modifier l'interlignage du paragraphe parent. Dans la CSS, réduire son line-height est une bonne tentative pour corriger cela, mais il est parfois plus stable d'utiliser vertical-align:baseline; complété de position:relative; et de top:0.5em; (avec une valeur positive). ^{exemple à manipuler}

2^.7 - …avec l'élément HTML <u> (pour underline) pour souligner un mot qui est stylistiquement différent du reste du texte. Une faute d’orthographe, un mot qui doit être souligné par les règles d'une langue (par exemple, en chinois, les noms propres sont soulignés), etc.⁥:

côté html

côté navigateur

Recommandation⁥! N’utilisez pas l’élément <u> pour signifier un texte souligné. Pour cela utilisez la propriété CSS text-decoration avec la valeur underline.

citer… en fonction du type de contenu

Pour mettre en citation, indiquer le titre d'une œuvre ou mettre entre guillemets, vous allez alternativement convoquer les éléments HTML suivants⁥:<blockquote>, <cite>, <q>.

3^.1 - …avec l'élément <blockquote> (pour bloc de citation) pour mettre en exergue une section de contenu qui est citée d'un autre document ou d'une autre source. Son contenu est souvent affiché avec des marges plus larges pour le différencier du contenu environnant. C'est d'ailleurs un élément de type bloc, qui occupe souvent toute la largeur de la page par défaut et provoque des retours à la ligne dans le flux naturel du document. Pour rythmer le contenu, on peut également utiliser des éléments de paragraphe <p> dans ce type de bloc.

côté html

côté navigateur

Par convention, il est souvent proposé de positionner un filet vertical légèrement épais, en amorce du bloc de citation (pour le détacher du corpus textuel) en convoquant les propriétés CSS et leurs valeurs respectives⁥: padding-left:1em; et border-left:3px solid red;. Exemple ci-dessus.

3^.2 - …avec l'élément <cite> pour baliser le titre d'une œuvre créative, d'une référence souvent convoqué dans le corpus textuel mais aussi dans les notes de bas de page. Il peut d'ailleurs être utilisé à l'intérieur d'un élément <blockquote> pour donner une référence à la source de la citation sous la forme du nom de l'œuvre d'où elle provient.

côté html

côté navigateur

3^.3 - …avec l'élément <q> pour circonscrire une petite citation en convoquant les guillemets ouvrants et fermants. Cet élément est destiné à la citation courte située au fil du texte.
N'oubliez pas de convoquer l'espace insécable   après <q> et avant </q>.

Important⁥: la mise en forme des guillemets, français ou anglo-saxons, dépendra de la façon dont l'élément <html> sera renseigné pour le choix de la langue utilisée⁥: <html lang="fr"> pour les guillemets français et <html lang="en"> pour les guillemets anglo-saxons. Magique⁥!

côté html

côté navigateur

convier l'espace insécable et fine insécable

Dans les documents imprimés, et avec l’aide du logiciel Adobe Indesign, on peut insérer une espace insécable ( option+commande+x / windows ctrl+alt+x) ou une espace fine insécable ( option+commande+maj+m / windows ctrl+alt+maj+m).

Dans les documents HTML, la syntaxe pour insérer et matérialiser l’espace insécable est l’entité⁥:   (pour non breakable space). Celle-ci a les mêmes caractéristiques visuelles que l’espace régulière, avec l’avantage de garder sur une même ligne les caractères étant de chaque côté.

côté html

côté navigateur

La syntaxe pour insérer et matérialiser une espace fine insécable, est l’entité⁥:   et si toutefois vous désirez convoquer une espace fine, saisissez l'entité⁥:  .

Le tableau, ci-dessous, fait le point sur l'usage des différents types d'espace à convoquer avant et après les signes de la ponctuation française. L'espace justifiante correspond à la saisie d'une espace en sollicitant la barre espace :

marquer un retour à la ligne

Pour réaliser un saut de ligne dans un texte, lorsqu'il a une importance, vous allez convoquer l'élément <br> (pour break, line break)⁥:

côté html

côté navigateur

Attention⁥: <br> ne doit pas être utilisé de façon abusive afin d'augmenter l'interlignage entre les lignes d'un texte. Pour cela, dans les styles, on utilisera la propriété CSS line-height sur l'élément HTML <p>.

créer une liste ordonnée ou non ordonnée

Pour réaliser une liste d'éléments textuels vous avez le choix entre deux types de liste différents⁥: la liste ordonnée <ol> ou la liste non ordonnée <ul>. Ils se complètent de l'élément HTML <li>, utilisé pour représenter un élément dans une liste.

6^.1 - …avec l'élément <ol> (pour ordered list) utilisé pour représenter une liste ordonnée. Les éléments d'une telle liste sont généralement affichés avec un indicateur ordinal pouvant prendre la forme de nombres, de lettres, de chiffres romains ou de points. La modification de cette numérotation s'opère avec une feuille de style CSS associée en convoquant la propriété list-style-type. voir exemple

côté html

côté navigateur

6^.2 - …avec l'élément <ul> (pour unordered list) utilisé pour représenter une liste non ordonnée. Il est souvent représenté par une liste à puces. La mise en forme d'un indice permettant le classement s'opère avec une feuille de style CSS associée en convoquant la propriété list-style-type. voir exemple

côté html

côté navigateur

6^.3 - …avec l'élément <li> utilisé pour représenter un élément dans une liste. Il doit être contenu dans un élément parent⁥: une liste ordonnée <ol>, une liste non ordonnée <ul> ou un menu menu. Exemple⁥:

côté html

créer un lien hypertexte

L'élément HTML <a> (pour ancre ou anchor en anglais), avec son attribut href, crée un lien hypertexte vers une page web, un fichier, une adresse e-mail, un emplacement se trouvant dans la même page. Le contenu de chaque élément <a> doit indiquer la destination, relative ou absolue, du lien qui est impérativement encadré entre les guillemets "…".
Cet élément peut inclure un attribut target dont la fonction est précisée en fin de cet article.

7^.1 - …pour renvoyer vers une page web⁥: ^{url absolue}

côté html

côté navigateur

7^.2 - …pour ouvrir ou télécharger un fichier⁥: ^{url relative}

côté html

côté navigateur

7^.3 - …pour renvoyer vers une adresse mail⁥:

côté html

côté navigateur

7^.4 - …pour renvoyer vers une autre partie de la même page (ancre interne)⁥:

côté html

côté navigateur

Par défaut, lorsque l’utilisateur clique sur un lien, la redirection se produit sur la page courante du navigateur. En ajoutant un attribut au lien href, vous pouvez indiquer au navigateur d’ouvrir la page de redirection dans l’onglet courant ou dans un nouvel onglet.

L'attribut convoqué est target et les deux valeurs les plus convoquées sont⁥:
- _self⁥: est la valeur par défaut et implique que le lien s’ouvre dans le même onglet ou sur la même page.
- _blank⁥: le lien hypertexte s’ouvre dans un nouvel onglet ou une autre fenêtre.

côté html

côté navigateur

Sans convocation de l'attribut target dans votre lien href, votre redirection se fait dans la page à partir de laquelle vous avez cliqué.

les propriétés et leurs valeurs pour styliser le texte

Ces propriétés et valeurs sont à noter dans votre feuille de style CSS liée à votre document HTML. Quatorze des plus essentielles vous sont proposées ici⁥: font-family, font-size, font-weight, text-transform, text-decoration, color, text-align, line-height, letter-spacing, word-spacing, hyphens , font-variant, text-indent et text-shadow.

8^.1 - La propriété font-family et ses valeurs⁥:

Cette propriété permet de définir une liste, ordonnée par priorité, de polices à utiliser pour mettre en forme le texte de l'élément ciblé. Sa déclaration s'écrit ainsi⁥:

côté css

Les nombreuses valeurs sont séparées par des virgules, indiquant chacune une police alternative.
Le navigateur choisira la première valeur family-name pour laquelle la police correspondante est installée sur l'ordinateur ou le serveur distant. Une famille de police générique generic-name doit être incluse dans cette liste car il n'y a aucune certitude qu'une police donnée aura été installée. Cette famille de police générique permet au navigateur d'utiliser une police acceptable en recours si besoin. Les valeurs les plus couremment convoquées sont serif et sans-serif.

8^.2 - La propriété font-size, ses valeurs et unités⁥:

Cette propriété permet de définir la taille du corps typographique utilisé pour les éléments textuels. Sa déclaration s'écrit ainsi⁥:

côté css

La valeur convoque une unité qui peut s'exprimer de trois façons différentes⁥:

- L'unité px⁥: l'utilisation de cette unité est plutôt simple et permet d'obtenir un résultat statique, absolu et indépendant du système d'exploitation et du navigateur. Mais cependant, cette méthode est déconseillée car elle n'est pas accessible. Exemple⁥:

côté css

Avec l'usage de cette unité, la notion de parent ou d'héritage n'existe pas. Si tourefois vous venez à indiquer une valeur à un parent comme <body> ou <div>, les valeurs de <h1> et de <p> ne subiront aucune modification.
voir l'exemple à manipuler…

- L'unité em⁥: cette unité est relative par rapport à l'unité du parent, elle est qualifiée de dynamique. Exemple⁥:

côté css

Dans cet exemple, le parent est <body> qui a comme mesure 20px. Le <h1> aura une taille relative à la taille <body>. Ici, il mesurera 150% du font-size de <body> et sera donc plus grand de 50%. Pour <p> ce sera 90% et il sera donc 10% plus petit.
Si l'on change la taille de <body>, les tailles de <h1> et de <p> vont augmenter ou diminuer automatiquement par rapport à <body>.
voir l'exemple à manipuler…

- L'unité rem⁥: cette unité signifiant root em propose un résultat identique à l'unité em mais la taille sera relative non pas au parent le plus proche, mais à la taille racine du document, c'est-à-dire l'élément <html>. Son usage permet de définir une valeur constante, tout le long du document, égale à la taille de la police de l’élément racine <html>.
voir l'exemple à manipuler dans le navigateur en modifiant la taille par défaut des polices du navigateur⁥: Chrome > Paramètres > Apparence > Personnaliser les polices…

Supports pédagogiques supplémentaires⁥: l'exemple qui confronte em⁥/⁥rem et l'outil nekoCalc, outil de conversion px⁥/⁥em et inversement.

8^.3 - La propriété font-weight et ses valeurs⁥:

Cette propriété permet de définir la graisse utilisée pour les éléments textuels. Les niveaux de graisse disponibles dépendent de la police engagée dans la mise en page HTML. Certaines fontes n'existent qu'avec les niveaux de graisses normal et bold. D'autres convoquent une valeur numérique 100 à 950.
Voir les exemples des valeurs présentées ci-dessous…

côté css

8^.4 - La propriété text-transform et ses valeurs⁥:

Cette propriété permet de définir la façon d'utiliser les lettres capitales pour les éléments textuels. Cela permet que le texte soit écrit uniquement en majuscules, minuscules ou que chaque mot commence par une capitale.
Voir les exemples des valeurs présentées ci-dessous…

côté css

8^.5 - La propriété text-decoration et ses valeurs⁥:

Cette propriété est utilisée pour «⁥décorer⁥» le texte en ajoutant une ligne pouvant être positionnée sous, sur ou à travers le texte.
C'est une propriété raccourcie qui permet de paramétrer simultanément les propriétés suivantes⁥: text-decoration-line, text-decoration-style, text-decoration-color et text-decoration-thickness. Attention, cette propriété raccourcie peut ne pas fonctionner à la consultation sur smartphone⁥!
Voir les exemples des valeurs présentées ci-dessous…

côté css

8^.6 - La propriété color et ses valeurs⁥:

Cette propriété applique une couleur de premier plan à une police de texte et à ses éventuelles décorations (ci-dessus). Sa valeur peut s'exprimer de quatre manières différentes⁥: par un mot-clé pour une couleur nommée, par l'hexadécimal, par la fonction rgb() déclinée en rgba() avec l'alpha pour la transparence⁥:

côté css

Pour plus d'informations sur la gestion de la couleur en HTML et CSS, référez-vous à la page dédiée.

8^.7 - La propriété text-align et ses valeurs⁥:

Cette propriété définit l'alignement du texte dans un élément. Quatre valeurs principales sont couramment convoquées⁥:

côté css

8^.8 - La propriété line-height et ses valeurs⁥:

Cette propriété précise la hauteur d'une ligne de texte. Quatre valeurs sont couramment convoquées⁥:

côté css

8^.9 - La propriété letter-spacing et ses valeurs⁥:

Cette propriété précise l'interlettrage entre chaque lettre du texte. Une valeur négative est autorisée. Deux valeurs sont couramment requises⁥:

côté css

8^.10 - La propriété word-spacing et ses valeurs⁥:

Cette propriété précise l'espace intermot entre chaque mot du texte. Une valeur négative est autorisée.

côté css

8^.11 - La propriété hyphens et ses valeurs⁥:

Cette propriété indique au navigateur comment gérer la césure des mots par les traits d'union lors des sauts de ligne. Deux valeurs principales peuvent lui être attribuée⁥: auto ou manual.

Mais attention⁥! Pour être effective, cette propriété doit qualifier dans le HTML, la langue définie grâce à l'attribut lang. Les navigateurs n'appliqueront les règles que si cet attribut est présent. Dans notre cas, on écrira dans l'élément <html>, ceci (sous la qualification du doctype)⁥: <html lang="fr">.

côté css

Dans le dernier cas, vous pouvez spécifier la césure (ou coupure de ligne) de manière conditionnelle avec le caractère ­ qui suggère une césure dans un mot.
Pour une mise en application des trois valeurs none, auto ou manual, consultez l'exemple ci-joint…

8^.12 - La propriété font-variant et ses valeurs⁥:

Cette propriété permet de définir toutes les variations typographiques pour une police de caractères. Pour la démonstration, nous retiendrons que les petites capitales et les ligatures
Voir les exemples des deux valeurs présentées ci-dessous…

côté css

Point de vigilance⁥: dans le cas d'usage des ligatures, il est impératif de convoquer une typographie qui comporte dans ses glyphes ces particularismes. Google Fonts propose la police de caractères Fira sans.

8^.13 - La propriété text-indent et ses valeurs⁥:

Cette propriété détermine la valeur de l'alinéa, retrait de la première ligne de texte. Une valeur négative est autorisée.
Voir les exemples des valeurs présentées ci-dessous…

côté css

8^.14 - La propriété text-shadow et ses valeurs⁥:

Cette propriété permet de créer une ombre portée sous le texte. Chaque ombre est décrite par une certaine combinaison de décalages X et Y de l'élément, de rayon de flou et de couleur.
Voir les exemples des valeurs présentées ci-dessous…

Ombre simple⁥:

côté css

Ombres multiples, les différentes ombres sont séparées par une virgule⁥:

côté css