#01 – La sémantique HTML

Commencer le cours
SOMMAIRE

RAPPELS DE B1

Qu'avez vous retenu de la première année d'intégration ?

Balises de l'en-tête

<html> / <head> / <meta> / <title>

Balises de l'en-tête

Les balises les plus "basiques" de tout sites web : < html > pour indiquer le début du code html de la page, < head > qui contient des informations sur la page (link, meta , title) , et < meta > donc qui peut varier pour contenir plusieurs informations (description, charset, keywords, auteur , etc ...)

Balises multimédias

<img/> / <audio> / <video> / <figure>

Balises multimédias

Les principales balises pour gérer toutes la partie multimédias de votre page web . On les utilisent pour intégrer des images ( < img/> ) , des videos , des fichiers audios , ou encore des images avec une légende ( < figure > ).

Balises de formulaire

<form> / <input> / <textarea> / <select> / <option>

Balises de formulaire

Lorsqu'on souhaite construire un formulaire (contact, newsletter, inscription, connexion), on utilise des balises particulières :

< form > pour indiquer que ce qui est dedans sera lié au formulaire, < input > qui sont les champs de saisie de base, < textarea > pour une zone de texte multilignes, ou encore < select > et < option > pour créer une liste déroulante.

Balises de liaison

<style/> / <script> / <link>

Balises de liaison

Les balises < style > et < script > ont un fonctionnement similaire, il est possible d'écrire directement du code dedans (< style > pour le CSS / < script > pour le Javascript) .

Le code est directement intégré à la page de structure HTML.La balise < link > permet de créer un lien vers d'autres ressources (CSS/JS/PHP/images etc...). C'est grace a cette balise que l'on peut séparer les fichiers de codes en fichiers dédiés.

Attributs

ID / Class / Elements

Attributs

Chaque éléments HTML d'une page peut disposer d'un ou plusieurs attributs . Certains sont quasi indispensable , d'autres dépendent de l'utilisation et de nos besoins.
  • Class : Permet de cibler un élément (CSS / JS) et de regrouper ces éléments 
  • ID : Permet de cibler précisément un élément car un ID est unique sur une page
  • Attributs : Les attributs regroupent tout les éléments que l'on rajoute à une balise (y compris les classes et les ID). On en utilise parfois sans s'en rendre compte comme : title / alt / href ou src

Extensions utiles VSCode

Visual Studio Code

Extensions de base

LivePreview
HTML CSS Support
CSS Peek
Prettier
Path Intellisense
Auto Rename Tag

Extensions dev et IA

PHPServer
CodeGPT
GitLens
NPM Intellisense
JS ES6 code snippets
Github Copilot

HTML / CSS

Coder pour optimiser son site

La sémantique HTML

Introduction
La sémantique se réfère à la signification ou à l'interprétation d'un élément ou d'une structure.

Introduction

Dans le contexte du HTML, la sémantique concerne l'utilisation d'éléments (balises) qui transmettent clairement la signification de la section de contenu qu'ils encadrent. Au lieu de simplement décrire la présentation, les éléments sémantiques décrivent le type de contenu.

Exemple : en utilisant la balise <article>, on indique que le contenu encadré est un article autonome

Accessibilité

Balises sémantiques aident les  technologies d’assistance, à interpréter correctement le contenu

Optimisation SEO

Une structure sémantique claire peut améliorer le référencement d’une page car elle aide les moteurs de recherche à indexer le contenu de manière appropriée.

Maintenabilité

Un code sémantique est plus lisible et plus facile à maintenir.Les développeurs peuvent rapidement comprendre la structure d’une page

Interopérabilité

Meilleure interopérabilité entre différents dispositifs, navigateurs et applications.Le contenu est plus susceptible d’être affiché et interprété de manière cohérente

Expérience utilisateur

Améliorer l’expérience utilisateur en permettant aux navigateurs et aux extensions de fournir des fonctionnalités spécifiques basées sur le type de contenu

Balises de section

Cette balise est utilisée pour définir l’en-tête ou la partie supérieure d’une section spécifique dans une page web. Chaque section d’une page peut avoir son propre en-tête, ce qui contribue à la structure sémantique de la page.

Les balises <header> et <head> sont deux éléments distincts en HTML et servent à des fins différentes dans la structure d’une page web.

				
					<header>
    <img decoding="async" src="logo.png" alt="Logo de mon site">
    <h1>Titre de Mon Site Web</h1>
    <nav>
        <ul>
            <li><a href="#">Accueil</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">À Propos</a></li>
        </ul>
    </nav>
</header>

Cette balise est utilisée pour définir la navigation principale de la page, généralement sous forme de menus ou de liens vers différentes sections du site.

 

Elle se place généralement dans le header du site. L’utilisation appropriée de balises HTML comme < nav > aide à donner une structure sémantique à votre page web, ce qui est important pour l’accessibilité et le référencement.

				
					<nav>
    <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">À Propos</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

Cette balise englobe le contenu principal de la page, c’est-à-dire le contenu central et le plus important :

  • Contenu central

    La balise <main> est utilisée pour entourer le contenu central et principal de la page, tel que le texte principal, les images ou d'autres éléments importants qui constituent le cœur de la page.

  • Accessibilité

    L'utilisation de la balise <main> aide à améliorer l'accessibilité, car elle permet aux technologies d'assistance et aux lecteurs d'écran de comprendre immédiatement où se trouve le contenu principal de la page.

  • Utilisation unique

    Il est recommandé de n'utiliser la balise <main> qu'une seule fois par page. Elle doit englober le contenu qui est spécifique à la page et qui en constitue le contenu principal. 

				
					<main>
  
  <h1>Titre Principal</h1>
  <p>Ceci est le contenu principal de la page...</p>
  <img decoding="async" src="image.jpg" alt="Une image représentant le sujet principal">
</main>
<aside> < /aside>

Cette balise est utilisée pour définir le contenu complémentaire ou accessoire à l’article principal. Il peut contenir des informations contextuelles, des publicités, des liens connexes, etc.

 

La bonne utilisation de cette balise peut aider les moteurs de recherche à mieux comprendre le contenu de la page.

				
					<aside>
  <h3>Articles connexes</h3>
  <ul>
    <li><a href="#">Article 1</a></li>
    <li><a href="#">Article 2</a></li>
    <li><a href="#">Article 3</a></li>
  </ul>
</aside>
<section> < /section>

Cette balise représente une section générique d’une page.

  • Segmentation du contenu

    La balise <section> est utilisée pour définir des sections indépendantes de contenu, chacune ayant un sens ou un sujet distinct. Elle peut être utilisée pour diviser le contenu en chapitres, sujets, articles, etc.

  • Sémantique

    L'utilisation de la balise <section> renforce la sémantique de la page en indiquant que le contenu englobé a une signification cohérente en lui-même.

  • En-tête de section

    Il est courant d'utiliser la balise <header> à l'intérieur de <section> pour ajouter un en-tête décrivant le contenu de la section.

  • Organisation

    L'utilisation de <section> facilite la mise en forme du contenu en appliquant des styles CSS spécifiques à chaque section. 

				
					<section>
  <h2>Section d'introduction</h2>
  <p>Cette section contient du texte d'introduction.</p>
</section>
<section>
  <h2>Section de contenu principal</h2>
  <header>
    <h3>En-tête de la section de contenu principal</h3>
  </header>
  <p>Ceci est le contenu principal de la section.</p>
</section>
<article> < /article>

La balise <article> est utilisée pour encapsuler un contenu autonome qui peut être distribué ou réutilisé indépendamment. Par exemple, un article de blog, une actualité, un commentaire, etc.

 

Comme on s’en doute, cette balise permet d’indiquer un article aux moteurs de recherches et aux moteurs de lecteurs d’écran de comprendre qu’il s’agit d’un contenu à lire.

				
					<aside>
  <h3>Articles connexes</h3>
  <ul>
    <li><a href="#">Article 1</a></li>
    <li><a href="#">Article 2</a></li>
    <li><a href="#">Article 3</a></li>
  </ul>
</aside>

Balises de contenus

<hN>

Ces balises représentent les titres de différents niveaux. <h1> est généralement utilisé pour le titre principal de la page, tandis que <h2> à <h6> sont utilisés pour les sous-titres.

  • <h1>

    C'est le titre principal d'une page ou d'une section. Il devrait y avoir idéalement un seul <h1> par page pour des raisons de référencement (SEO) et d'accessibilité.

  • <h2>

    Utilisé pour les sous-titres ou les titres de sections principales sous le <h1>. 

  • <h3>

    Représente les sous-sections des sections <h3>

  • <h4>, <h5>, <h6>

    Ces balises définissent des niveaux de sous-sections encore plus détaillés. Dans la pratique, <h4> à <h6> sont moins couramment utilisés que <h1> à <h3>, car la plupart des documents n'ont pas besoin d'une telle granularité dans la structuration.

Il est important de noter que l’utilisation de ces balises ne devrait pas être basée sur l’apparence visuelle (par exemple, choisir une balise parce qu’elle a la taille de police souhaitée), mais plutôt sur la structure et la hiérarchie du contenu. Les styles visuels peuvent être ajustés avec CSS.

				
					<body>
  <h1></h1>
    <h2></h2>
       <h3></h3>
            <h4></h4>
        <h3></h3>
            <h4></h4>
    <h2></h2>
        <h3></h3>
        <h3></h3>
<script>(()=>{class RocketElementorPreload{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}t(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this.i(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach((t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this.o(t)}catch(t){}}))}o(t){const e=JSON.parse(t.dataset.settings),i=e.m||e.animation_delay||0,n=e[this.animationSettingKeys.find((t=>e[t]))];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let o=setTimeout((()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this.l(t,e)}),i);window.addEventListener("rocket-startLoading",(function(){clearTimeout(o)}))}i(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach((t=>{e.forEach((e=>{i.push(t+e)}))})),i}l(t,e){this.i().forEach((t=>delete e[t])),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorPreload;requestAnimationFrame(t.t.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorPreload.run)})();</script></body>

<p>

Cette balise est utilisée pour définir un paragraphe de texte. Elle est essentielle pour organiser le contenu d’une page web en sections lisibles. Chaque fois que vous fermez une balise <p>, un espace est automatiquement inséré avant le prochain élément ou le prochain paragraphe, ce qui aide à séparer visuellement les blocs de texte.

 

En réalité il s’agit d’une marge appliquée automatiquement. Il est possible de la supprimer ou la modifier via la propriété CSS ‘margin‘ appliquée sur l’élément <p>

				
					<body>
  <p>Ceci est un exemple de paragraphe. Il contient quelques phrases pour
    illustrer comment le texte est structuré.</p>
  <p>Voici un autre paragraphe. Comme vous pouvez le voir, il est séparé
  du précédent par un espace automatique.</p>
</body>

<ul> / <li>

<ul> est utilisée pour créer des listes non-ordonnées (à puces). Les éléments de liste sont marqués avec la balise <li>, qui représente chaque élément de la liste.

<ol> / <li>

<ol> est utilisée pour créer des listes ordonnées (numérotées). De la même manière que pour les listes non-ordonnées, les éléments de liste sont définis avec la balise <li>.

				
					<ol>
  <li>Pomme</li>
  <li>Banane</li>
  <li>Cerise</li>
  <li>Orange</li>
</ol>

				
			
				
					<ul>
  <li>Pomme</li>
  <li>Banane</li>
  <li>Cerise</li>
  <li>Orange</li>
</ul>

Balises de mise en forme

<em>

Utilisée pour mettre en emphase ou en italique le texte. Cela indique que le texte a une signification différente ou spéciale dans le contexte.

				
					<p>Il est <em>essentiel</em> de boire suffisamment d'eau chaque jour.</p>

Il est essentiel de boire suffisamment d’eau chaque jour 

<strong>

Cette balise est utilisée pour mettre en évidence ou en gras le texte. Elle indique que le texte est d’une importance particulière, souvent utilisée pour des mots-clés ou des informations vitales.

				
					<p>Il est <strong>crucial</strong> de suivre les instructions pour garantir 
la sécurité.</p>

Il est crucial de suivre les instructions pour garantir la sécurité

<mark>

Cette balise permet de surligner un texte pour le mettre en évidence visuellement. Elle est souvent utilisée pour indiquer des parties spécifiques d’un texte qui doivent attirer l’attention.

				
					<p>La <mark>photosynthèse</mark> est le processus 
par lequel les plantes vertes ...</p>
La photosynthèse est le processus par lequel les plantes vertes …

<code>

Utilisée pour encadrer un fragment de code, cette balise indique que le texte à l’intérieur est une représentation de code source. Le texte peut apparaître avec une police à largeur fixe pour le différencier du texte normal.

 

C’est cet élément qui est utilisé depuis le début de la page pour te présenter le code d’exemple !

				
					<code>Ceci est une balise code affichée par une balise code ! #codeception</code>

Optimiser l'écriture du HTML

Il existe des fonctionnalités dans VSCode pour améliorer et accélérer notre écriture du HTML lorsque l’on commence a maîtriser le langage.

  • Emmet

    Enorme boite a outils pour développeurs ... directement intégré à VS Code ! Il se présente sous la forme de syntaxe particulière à écrire pour accélérer la création de notre page

“!” puis Entrée => Insère toute la partie DOCTYPE 

				
					! =>

<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

“balise” + “:”  => Insère la balise voulue avec en lien le fichier que vous séléctionnerez 

				
					link:css =>

“balise” + “>” + balise => insère la hiérarchie de balises voulue 

				
					section>ul>li>a =>
<section>
    <ul>
        <li><a href=""></a></li>
    </ul>
</section>

Mettre en page son fichier HTML

  • Prettier

    Plugin permettant de mettre en page tout ou partie d'un fichier HTML , CSS etc ... . Il se base sur l'ouverture et la fermeture des balises , attention a bein structure son fichier !

Lorsque l’on tape un fichier HTML il est parfois intéressant de ne pas trop porter attention aux indentations et autres mise en page. Il est possible de le faire en une fois de manière automatisé.

 

Sélectionnes le code a mettre en page et utilise la raccourci clavier : Alt + Maj + F / Option + Maj + F

				
					<!DOCTYPE html>
<html>
<head>
<title>Exemple HTML Non Indenté</title>
</head>
<body>
<h1>Ceci est un exemple de code HTML
non indenté.</h1>
<p>Ce code n'est pas correctement
formaté en termes d'indentation,
ce qui le rend moins lisible.</p>
<ul>
<li>Liste d'éléments non indentée.</li>
<li>Pas de sauts de ligne ni d'espaces 
pour structurer le code.</li>
</ul>
</body>
</html>
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <title>Exemple HTML Indenté</title>
  </head>
  <body>
    <h1>Ceci est un exemple de code HTML 
    correctement indenté.</h1>
    <p>Ce code est maintenant formaté avec
    une indentation appropriée, ce qui le
    rend plus lisible.</p>
    <ul>
      <li>Liste d'éléments indentée.</li>
      <li>Les sauts de ligne et l'espacement
      structurent le code.</li>
    </ul>
  </body>
</html>

RÉSUMÉ

<p> pour les paragraphes et textes

<h1> à <h6> pour la hiérarchie des titres

<ul> / <li> pour lister des éléments

<nav> pour l’élément de navigation

En SEO :

alt pour les images (hors illustrations)

href pour les liens

Contrastes suffisants (accessibilité)

title pour les balises de type texte et les <hN>

Utilisation de balise meta

Bien découper sa page avec les balises sémantiques (article / aside / section …)

Pas de hiérarchie illogique (h3 avant h2, plusieurs <main> …)

Pas de balises obsolètes (<i> , <b> , etc…)

Ne pas oublier <blockquote> et <cite> pour mettre en avant des citations et références

Utiliser <mark> pour surligner du texte et <code> dès lors que du code informatique est affiché

#02 - ACCESSIBILITé WEB

QUIZZ DE CONNAISSANCES

Test tes connaissances sur le sujet du cours
FAIRE LE QUIZZ
Qui sommes nous ?
Plan du site

☕ Crée par E-Kodama

Bienvenue sur la plateforme de cours numérique Ekolearn

Envie d’une escapade nocturne  ?

Tapes ta recherche puis appuie sur Entrée (↵)

Pas d'autocomplétion, mais pourquoi ?

L’autocomplétion dans un formulaire de recherche consiste à proposer des mots clés, des résultats, à chaque lettre écrite dans le champ. 

Oui cela est pratique, mais en terme de consommation de ressources c’est très gourmand ! Aussi, dans un soucis d’écoconception, ce formulaire de recherche ne régira pas à vos interactions en temps réel, mais il fonctionne quand même !

Bonne pratique n°4 du guide de l’éco-conception web

ATTENTION A TA SANTÉ

Tu ne semble pas avoir bougé depuis
MIN
0

N’hésites pas à lever les yeux , à regarder un peu “au loin” pour les soulager.

Également, n’hésites pas à t’étirer le cou et le dos en suivant quelques gestes simples.