Code

Page exemple

A retenir sur les titres

Présentation

• Il existe 6 niveau de titre en html :

  1. <h1>Titre de niveau 1</h1>
  2. <h2>Titre de niveau 2</h2>
  3. <h3>Titre de niveau 3</h3>
  4. <h4>Titre de niveau 4</h4>
  5. <h5>Titre de niveau 5</h5>
  6. <h6>Titre de niveau 6</h6>
• l'initial h vient de l'anglais heading qui se traduit par titre
• Le Mot clé choisit est l'initial en anglais de ce que la balise va signifier et/ou jouer comme rôle dans la page
• Il s'agit d'une balise de catégorie block
• + de détails dans la documentation officielle : headings sur MDN
• + de détails dans la documentation officielle : headings sur w3school

Règle d'utilisation

• Utiliser un titre de niveau 1 (h1) une fois par page
• Les autres niveaux de titre peuvent être utilisés autant de fois que voulu

A retenir sur les paragraphes

• l'initial p vient de l'anglais paragraph
• Il s'agit d'une balise de catégorie block
• + de détails dans la documentation officielle : p sur MDN
• + de détails dans la documentation officielle : p sur w3school

le lorem ipsum

le site http://fr.lipsum.com/ est un site très utilisés par les développeurs et les graphistes pour générer du texte fictif et remplir leurs balises / leurs designs. Grâce à ce contenu fictif, vous pouvez faire des tests rapides sans avoir le texte définitif.

Le lorem ipsum sera régulièrement utilisés dans les exemples présentés dans ce cours

A retenir sur la balise blockquote

• Il s'agit d'un paragraphe particulier pour mentionner un ou des citations
• Il s'agit d'une balise de type block
• + de détails dans la documentation officielle : blockquote sur MDN
• + de détails dans la documentation officielle : blockquote sur w3school

A retenir sur la balise address

• Il s'agit d'un paragraphe particulier pour mentionner des coordonnées : adresse physique, email, plan ...
• Il s'agit d'une balise de catégorie block
• + de détails dans la documentation officielle : address sur MDN
• + de détails dans la documentation officielle : address sur w3school

A retenir sur la balise time

• Il s'agit d'un groupe de mot particulier pour mentionner une date : date de parution, heure de dernière modification ...
• Il s'agit d'une balise de niveau inline
• + de détails dans la documentation officielle : time sur MDN
• + de détails dans la documentation officielle : time sur w3school

A retenir sur la balise code

• Il s'agit d'un groupe de mot particulier pour mentionner une code informatique : html, css, PHP, Python ...
• Il s'agit d'une balise de niveau inline
• + de détails dans la documentation officielle : code sur MDN
• + de détails dans la documentation officielle : code sur w3school

Rappels

1. Ne jamais utiliser les balises pour faire de la mise en forme.
2. En effet, on peut être tenté de les utiliser pour mettre un texte en gras ou en italique car le navigateur va appliquer une mise en forme automatique lorsqu'il interprète une balise.
3. Cette manière de faire était répandue lors de la création du html
4. Avec l'arrivée de html4 puis de html5, la pratique est d'utiliser le css pour styliser les Elements et non HTML
5. HTML est un langage de balisage syntaxique : chaque contenu (texte, image, vidéo ...) doit être entouré de balise conforme au rôle et/ou au sens que joue ce texte dans la page.
6. Enfin, plus vous respectez les règles syntaxique (= la sémantique) du balisage html, meilleure sera le référencement de page html dans les moteurs de recherche comme Google ou Yahoo