HTML - syntaxe de base

Contenu textuel

En HTML, les sauts de ligne et plus d’un espace ne sont pas pris en compte.

Ce texte contient       plusieurs espaces


et plusieurs sauts de ligne. Pourtant,           il s'affiche ainsi.

Affiché

Ce texte contient plusieurs espaces et plusieurs sauts de ligne. Pourtant, il s'affiche ainsi.

Elément HTML

Les éléments HTML ainsi que leurs attributs permettent d’enrichir le texte de structure, sémantique et comportement.

html base anatomie element

Anatomie d’un élément HTML[1]

<p><mark>Ce texte</mark> est <strong>augmenté</strong> à l'aide de <em>balises</em></p>
html texte augmente par elements
1. MDN - Glossaire : HTML

Elément HTML par paire - balise ouvrante

Balise ouvrante
<p>
    Contenu
</p>

< {Nom de l’élément} >

Insensible à la casse (majuscules / minuscules)

Elément HTML par paire - contenu

Contenu

<p>
    Contenu
</p>

Peut être du texte ou d’autres éléments[1]

1. On en parle juste après

Elément HTML par paire - balise fermante

Balise fermante

<p>
    Contenu textuel
</p>

</ {Nom de l’élément} >

Insensible à la casse (majuscules / minuscules)

Elément HTML par paire - sur une ligne

Formatage sur une ligne

<p>Contenu <em>textuel</em></p>

Il est parfois plus lisible de mettre plusieurs balises sur une seule ligne.

Eléments imbriqués

Des éléments peuvent s’imbriquer

<section>
    <p>Contenu <em>textuel</em></p>
</section>
Les éléments ne doivent pas être enchevêtrés.
<p>Ceci est <em>très <strong>mal</em>!</strong></p>
<p>Ceci <em>est <strong>correct</strong>.</em></p>

Utiliser l’indentation pour faciliter la lecture des éléments imbriqués

Elément vide (Void Element)

Les élements vides [1] [2] ne peuvent pas avoir de nœuds enfants (texte ou éléments imbriqués)

<hr>
<hr/>
<hr></hr>

Bien que les 3 syntaxes soient valides, on préférera en général <hr> plutôt que <hr/> ou <hr><hr/>

1. MDN - Glossaire : Elément vide
2. Spec HTML : Elements

Attributs

Les attributs [1] ajoutent des métadonnées et comportements aux éléments

<section>
    <heading>
        <h2 id="titre_de_section" >
            Titre de section
        </h2>
    </heading>
    <p>
        Contenu <em>textuel</em>
    </p>
</section>

Anatomie d’un attribut[2] : attribut="valeur"

<hr class="red" >
<hr class = "red" >
<hr class='red' >
<hr class = 'red' >
<hr class=red >
<hr class = red >

La syntaxe plus couramment utilisée est <element attribut="valeur" >

1. MDN - Référence : Attributs HTML
2. MDN - Glossaire : Attribut

Plusieurs attributs par éléments

Les éléments peuvent porter plusieurs attributs différents

<section>
    <heading>
        <h2 id="titre_de_section" class="rouge">
            Titre de section
        </h2>
    </heading>
    <p>
        Contenu <em>textuel</em>
    </p>
</section>

Attributs universels

Certains attributs sont utilisables sur tous types d’éléments

<section class="note" >
    <heading>
        <h2 id="titre_de_section" class="rouge" >
            Titre de section
        </h2>
    </heading>
    <p class="inverse" >
        Contenu <em>textuel</em>
    </p>
</section>

Ce sont les attributs universels[1] (Global Attributes)

Quelques attributs universels rencontrés très fréquemment

  • id

  • class

  • style

1. MDN - Référence HTML : Attributs universels

Attributs spécifiques

Eléments/familles d’éléments avec des attributs qui leur sont propres.

<label for="name">Nom de famille (4 à 8 caractères):</label>
<input id="name" type="text" name="name" required minlength="4" maxlength="8" size="10" />

En plus des attributs universels, les tags suivants ont des attributs qui leur sont propres.

<label>

for, form

<input>

autocomplete, checked, disabled, form, formaction, max, min, name, pattern, placeholder, readonly, required, size, src, step, type, value, …​

Attributs sur plusieurs lignes

Les attributs peuvent être sur plusieurs lignes pour meilleure lisibilité

<label for="name">Nom de famille (4 à 8 caractères):</label>
<input
    id="name"
    type="text"
    name="name"
    required
    minlength="4"
    maxlength="8"
    size="10"
    />

  • Essayer d’ordonner les attributs dans un ordre cohérent

  • Un attribut par ligne peut sembler extrème, mais ça peut faciliter la lisibilité en cas de différence GIT

Attributs booleens

Si un attribut booléen est présent, sa valeur est vrai (true) [1]

<input required>
<input required="">
<input required="required">
Nous verrons un usage de ces attributs dans le cours sur les formulaires.
1. MDN - Référence : attributs booléens

Quand le HTML est invalide

Philosophie de résilience

  • Besoin de supporter les sites les plus anciens

  • Quelque chose doit s’afficher

Amélioration progressive

Ca fait partie de la philosophie d’Amélioration progressive. Il est possible de compléter des fonctionnalités manquantes avec des "Polyfills" écrits en Javascript.

Balise incorrecte

Si un élement n’est pas supporté, il n’est pas pris en compte (le navigateur le considère comme l’équivalent d’un élement <span> donc affiché en ligne)

Balise non connue
<!-- Balise non connue est considérées comme <span> -->
<baliseincorrecte>aaa aaa</baliseincorrecte>
<!-- Elle peut donc recevoir du style -->
<baliseincorrecte style="color:red">bbb bbb</baliseincorrecte>
Example 1. Rendu
html rendu balise incorrecte

Attribut incorrect

  • Nom incorrect : Ignoré

  • Valeur incorrecte : valeur par défaut de l’attribut

Attribut incorrect
<p><a src="https://developer.mozilla.org">Nom d'attribut incorrect</a></p>

<!-- Valeur d'attribut incorrecte : valeur par défaut (ici "text") -->
<input type="chaton" />
Example 2. Rendu
html attribut incorrect

Style incorrect

Ignoré

  • Propriété incorrecte

  • Valeur incorrecte

Style incorrect
<section style="couleur:red">Propriété incorrecte</section>
<section style="color:peupre">Valeur incorrecte</section>
Example 3. Rendu
css propriete incorrecte

Elements déséquilibrés

Eléments non équilibrés
<!-- Eléments non équilibrés -->
<p>AAA<b>BBB</p>
CCC</b>

DDD
Example 4. Rendu
html elements non equilibres

Y remédier

Échappement de certains caractères

Table 1. Caractères ASCII[1] nécessitant échappement
CaractèreNom HTMLNuméro HTMLDescription

&

&amp;

&#38;

Esperluette

<

&lt;

&#60;

Signe inférieur À

>

&gt;

&#62;

Signe supérieur À

"

&quot;

&#34;

Guillemet anglais

'

&apos;

&#39;

Apostrophe

Si <meta charset="UTF-8"> est présent dans <head>, les autres caractères ne devraient pas avoir besoin d’être échappés.

1. https://www.ascii-code.com/fr

Échapper pour citer du code

Il faut échapper < et >

<pre>
<code>
    &lt;b&gt;a&lt;/b&gt;
</code>
</pre>

Pour afficher

html echappement code

Échapper pour les attributs

Il faut parfois échapper certains caractères dans les attributs.

<img src="bibliothecaire-disque-monde.png"
     alt="Un orang outang s&apos;occupe d&apos; de la bibliothèque de l&apos;université de l&apos;invisible. Il contemple un rayon qu&apos;il vient de ranger en s&apos;exclamant &quot;Ook!&quot; d&apos;un air satisfait.">

Pour afficher

html base echapper pour attributs alt

Commentaires

Les commentaires [1] par <!-- et se terminent par -->.

Ils ne sont pas visibles dans la page, juste dans le code.

Texte visible
<!--
Commentaire
-->

Texte visible

Ne jamais noter des secrets dans des commentaires

Même si les commentaires ne sont pas visibles à l’affichage, ils sont présents dans le code source de la page. Il est possible d’inspecter le code de la page.

1. MDN - Guides : commentaires

Eléments niveau bloc et en ligne

Eléments niveau bloc (block)

Occupent une ligne complète. [1]

Ex.

  • <p>

  • <div>

  • <section>

<p>Ce paragraphe prend toute la largeur</p>
<div>Cet élement de division prend toute la largeur</div>
<section>Cette section prend toute la largeur</section>
html bloc
1. MDN - Glossaire : bloc

Eléments en ligne (inline)

Suivent le flux du texte [1]

Ne sont pas sujettes à la modification de hauteur (c’est le contenu qui décide)

Retourne à la ligne quand ca dépasse

ex.

  • Contenu de texte

  • <b>

  • <span>

  • <em>

html base elements en ligne
1. MDN - Glossaire : Eléments en ligne

Eléments communs

<h1> - <h6> Titres

Eléments de titre

Il y a six éléments de titre en HTML. Les élements de titre de h1 à h6 sont utilisés pour signifier l’importance du contenu qui les suit. Moins le nombre est élevé plus son importance est grande, ainsi, les élements h2 ont moins d’importance que les éléments h1 .

<h1>Le plus important des éléments titre</h1>
<h2>Le second plus important des éléments titre</h2>
<h3>Le troisième plus important des éléments titre</h3>
<h4>Le quatrième plus important des éléments titre</h4>
<h5>Le cinquième plus important des éléments titre</h5>
<h6>Le moins important des éléments titre</h6>
Ps bien
<h1>Un titre 1</h1>
<h1>Un 2ème titre 1</h1>

Titres et hiérarchie des titres

MDN - HTML titre de section

Un seul <h1> par page.

  • Les informations de titre peuvent être utilisées par les agents utilisateur afin de construire automatiquement la table des matières d’un document.

  • Il ne faut pas utiliser des éléments de titre pour ajuster la taille du texte. Pour cela, on utilisera la propriété CSS font-size.

  • Il ne faut pas sauter de niveaux entre les titres : on commencera toujours par <h1>, suivi <h2> et ainsi de suite.

Bien
<h1>Le plus important des éléments titre</h1>
<p>Paragraphe</p>
<h2>Le second plus important des éléments titre</h2>
<p>Paragraphe</p>
<h3>Le troisième plus important des éléments titre</h3>
<p>Paragraphe</p>
Pas bien
<h1>Titre niveau 1</h1>
<p>Paragraphe</p>
<h3>Titre niveau 3 (on a sauté le niveau 2)</h3>
<p>Paragraphe</p>
<h5>Titre niveau 5 (on a sauté le niveau 4)</h4>
<p>Paragraphe</p>

<p> Paragraphe

L’élément paragraphe

Utilisé pour les paragraphes d’une page Web.[1]

<p>Ceci est un élément de paragraphe.</p>

Rendu

Ceci est un élément de paragraphe.

1. Élément "bloc".

Listes à puces

<ul>

Liste non-ordonnée

<ol>

Liste ordonnée (numéroté)

<li>

Item de liste

<ul> - Liste non-ordonnée

Pour créer une liste à puces, vous pouvez utiliser l’élément ul avec un ou plusieurs éléments li imbriqués à l’intérieur de la façon suivante:

<ul>
    <li>Concentré de tomates double</li>
    <li>Sel</li>
    <li>R'viens zy au choix : flocons de bonite (pas vegan), bouillon dashi (pas vegan), sauce soja</li>
    <li>Vinaigre (Le vinaigre des cornichons c'est le top)</li>
    <li>Épices au choix : Cardamome : quelques grains, Poivre noir</li>
    <li>Truc sucré au choix : Miel, Sirop d'érable, Sirop d'agave</li>
</ul>
html base ul

ol - Liste ordonnée

Pour créer une liste ordonnée, utiliser l’élément ol:

<ol>
    <li>Mélanger les ingrédients dans un bol.</li>
    <li>Ajuster les quantités en goutant régulièrement jusqu'à ce que ce soit bon</li>
    <li>Manger avec des trucs qui vont bien avec du ketchup.</li>
</ol>
html base ol

Listes imbriquées

<!-- Liste ordonnée imbriquée à l'intérieur d'une liste non-ordonnée -->
<ul>
    <li>A
        <ol>
            <li>X</li>
            <li>Y</li>
        </ol>
    </li>
    <li>B</li>
</ul>
<!-- Liste non-ordonnée imbriquée à l'intérieur d'une liste non-ordonnée -->
<ol>
    <li>G
        <ul>
            <li>T</li>
            <li>U</li>
        </ul>
    </li>
    <li>F</li>
</ol>
Example 5. Liste ordonnée imbriquée à l’intérieur d’une liste non-ordonnée
html base ol dans li
Example 6. Liste non-ordonnée imbriquée à l’intérieur d’une liste non-ordonnée
html base ul dans ol

<div> - élément de division de contenu

L’élément est un élément de bloc générique (non sémantique).

Il est utilisé quand on doit grouper des contenus sans en changer la portée sémantique.

Souvent pour y appliquer du style.

<section>
    <div class="centrer-image">
        <img src="fleur.png" alt="Une jolie fleur bleue">
    </div>
<p>Mon paragraphe</p>
</section>

MDN - HTML div

Ne vous laissez pas tenter par les <div>

html5 semantique distracted boyfriend div

<span>

Elément en ligne générique (sans sémantique).

En général, on y applique une classe CSS pour changer son style.

MDN - HTML span

<p>Ce texte contient un mot écrit <span class="bleu">en bleu</span></p>

Préférer des éléments porteurs de sémantique si c’est plus approprié (ex. <strong>, <em> …​)

<section>

<section> [1]

Grouper des trucs qui parlent de la même chose.

En général avec un titre

La section fait partie des contenus sectionnants.

  • Chapitres

  • Introduction

  • Actualités

  • Informations de contact

1. MDN - HTML section