Les principales balises (titre principal placé dans l'élément <h1>)

Les balises de type bloc (sous-titre placé dans l'élément <h2>

Un sous-titre de niveau 3

Un paragraphe (élément <p>).

Un second paragraphe séparé du premier par une marge (par defaut).

Le second contenu d'un élément (par exemple un paragraphe) est placé entre les balises ouvrante <p> et la balise fermante </p> de cet élément.

Pour écrire les caractères < (inférieur à), > (supérieur à) et & (esperluette) il faut utiliser des entités HTML.

    Ce texte est pré-formaté.
    L'élément <pre> respecte les caractères spéciaux de la source comme les sauts de ligne,
    les tabulations et
    les espaces [    ].
    Par défaut, l'élément <pre> affiche son contenu avec une police à chasse fixe (monospace).
    L'élément <pre> est généralement utilisé pour écrire du code.
    
    <!-- Un commentaire un HTML -->
L'élément <div> est générique sans aucun sens particulier, il est utilisé pour structurer le document.
Un second élément <div> n'est pas séparé du précédant par une marge (par défaut)

Les listes (un autre sous-titre de niveau 3)

  1. 1. Une
  2. 2. liste
  3. 3. ordonnée
Terme 1
Definition 1
Terme 2
Definition 2

Les balises de type inline (un autre sous-titre de niveau 2)

une portion de texte importante placée dans l'élément <strong>.

une portion de texte emphasée placée dans l'élément <em>.

Un hyperlien vers 3W Academy (élément <a>)

Il existe différents type d'hyperliens :

Un lien avec l'attribut="_blank" s'ouvre dans un nouvel onglet: 3W Academy.

Une image 3W Academy dans un paragraphe (observer l'alignement vertical). L'attribut alt est obligatoire.

Une image dans un lien dans un lien

Un paragraphe contenant un saut
de ligne

Une abbréviation avec l'élément <abbr>: le code d'une page web est écrit en HTML avec l'élément title.

Une définition avec l'élément <dfn>

Utilisation de l'élément <sub> pour écrire des indices, par exemple dans une formule chimique: 4 NH3 + 5 O2 ==> 4 NO + 6H2O

Utilisation de l'élément <ins> pour écrire des exposants, par exemple dans une formule mathématique: 32 = 9 ou un indicateur ordinal: le 3ème arrondissment de Paris.

Utilisation une portion texte inséréeune portion de texte supprimée

L'élément <mark> représente un texte mis en surbrillance à cause de sa pertinance dans le contexte, par exemple lors d'une recherche de mot clé dans le contenu d'un site web. Il ne doit pas être utilisé à des fins de coloration syntaxique.

Un exemple de code informatique (ici) du Javascript) dans un élément <code> et un élément <pre>: 

            for (let i = 0; i < 5; i++) {
                console.log(i);
            }

Ce texte est contenu dans un élément <span>. Cet élément n'a pas de sens particulier, il est systématiquement utilisé avec du stule CSS.

Bonnes pratique (un autre sous-titre de niveau 2)

Les titres nous permettent de structurer notre texte et de faciliter la lecture. Ils sont également importants pour optimiser le référencement naturel de la page web.

Il ne faut pas sauter des niveaux de titre : on commence toujours par un titre de niveau 1, puis un titre de niveau 2, puis un titre de niveau 3 et ainsi de suite

Sauter un niveau de titre intermédiaire constitue une mauvaise pratique : par exemple un titre de niveau 1, suivi d'un titre de niveau 3.

Toujours placer les éléments de type inline dans un élément de type bloc (et jamais l'inverse)

License (un autre sous-titre de niveau 2)

Ce matériel pédagogique est la propriété de la 3W Academy. Cet exercice a été réalisé par Ewan GIRODON et Girodon EWAN