HTML - syntaxe de base

Contenu textuel

Carte concept

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

Carte concept

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>

Ce texte est augmenté à l'aide de balises

1. MDN - Glossaire : HTML

Elément HTML par paire

Balise ouvrante
<p>
    Contenu
</p>

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

Insensible à la casse (majuscules / minuscules)

Elément HTML par paire

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

<p>
    Contenu textuel
</p>

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

Insensible à la casse (majuscules / minuscules)

Elément HTML par paire

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

Carte concept

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

Carte concept

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
aaa aaa bbb bbb

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

Nom d'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
Propriété incorrecte
Valeur 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

AAABBB

CCC DDD

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


    <b>a</b>

É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

Ex.

  • <p>

  • <div>

  • <section>

Eléments en ligne (inline)

Suivent le flux du texte.

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>

Eléments inline-block

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>

<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>

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>

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

MDN - HTML div

Ne vous laissez pas tenter par les <div>

<span>

MDN - HTML span

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