COMPÉTENCE B1.

3
SÉQUENCE 1 - ASSURER L’AMÉLIORATION ET L’ÉVOLUTION
DES FONCTIONNALITÉS ACTUELLES DES INTERFACES WEB
DANS LE RESPECT DES BONNES PRATIQUES DE DÉVELOPPEMENT

FICHE SAVOIRS
Fondamental de la conception web : le html

Contenu
1. Qu’est-ce que le HTML ?�������������������������������������������������������������������������������������������������������������������������� 1
2. Comment se structure une page HTML ?����������������������������������������������������������������������������������������������� 4

La conception de sites web impose la connaissance du " HyperText Markup Language ". C’est " le "
langage de conception fondamental utilisé pour définir la structure d’une page web. Comme vous allez le
découvrir, HTML est le point d’entrée par lequel on accède au contenu d’un site web.

1. Qu’est-ce que le HTML ?

HTML n’est pas un langage de programmation, c’est un langage pour navigateur dit de "description" car
comme vous allez le découvrir, une page HTML est constituée de :
— un contenu (textes, images, vidéos, liens, programmes…) ;
— la manière dont on souhaite que ce contenu soit présenté ;
— la liste des ressources supplémentaires à récupérer pour afficher la page.
— par exemple, lorsque l’on affiche la page présente à l’adresse https://fr.wikipedia.org, on télécharge
près de 40 fichiers…

CNED – BTS SIO – BLOC 1 – B1.3 – SÉQUENCE 1 – Fiche savoirs – 1

1A. Comment ça se passe ?
À la connexion à un site web, la page consultée est chargée dans le navigateur puis interprétée. À
chaque fois qu’une ressource est mentionnée (élément multimédia, règle de mise en page, police de
caractères…), le navigateur la télécharge.

OUTILS DE DÉVELOPPEMENT DU NAVIGATEUR

Pour visualiser à tout moment les ressources chargées par le navigateur, il suffit par exemple à l’aide
du navigateur Chrome (à installer si vous ne l’avez pas sur votre machine : https://www.google.com/
chrome/) d’afficher les " Outils de développement " :
— une fois sur la page souhaitée, appuyez sur la combinaison "Ctrl+Maj+i" pour afficher les "outils de
développement" de Chrome (ou en passant par le menu > Plus d’outils > Outils de développement) ;
— sous l’onglet "Network" (rafraîchissez la page avec F5), parcourez la liste des fichiers et retrou-
vez-y les différents éléments présents sur la page.

1B. Qu’est-ce qu’un élément HTML ?

Comme cela vient d’être dit, Le HTML sert à décrire le contenu d’une page web. Pour ce faire, on utilise
des balises de descriptions qui vont permettre de distinguer les différentes parties d’un contenu web afin
de les présenter d’une certaine façon. Par exemple si on prend le lien hypertexte suivant :
Lien vers Wikipedia
Il s’agit en réalité du texte affiché, entouré de balises permettant d’indiquer que c’est un lien hypertexte
pointant vers l’URL " https://fr.wikipedia.org " :

CNED – BTS SIO – BLOC 1 – B1.3 – SÉQUENCE 1 – Fiche savoirs – 2

ÉLÉMENT HTML

Balise ouvrante Contenu Balise fermante

<a href="https://fr.wikipedia.org">Lien vers Wikipedia</a>

Attribut

— < a> : Encadrée par un chevron ouvrant " < " et un chevron fermant " > ", la " balise ouvrante " sert à
indiquer le type d’élément HTML qui va être utilisé. Dans notre exemple, il s’agit d’indiquer que l’on
va décrire un lien hypertexte.
— href="https://fr.wikipedia.org" : l’attribut contient des informations supplémentaires sur l’élément, il
peut s’autosuffire (dans le cas d’attributs dits " booléens "), ou avoir une valeur fournie entre guille-
mets (comme c’est le cas ici). Dans notre exemple il s’agit ici de fournir l’URL de la cible désignée par
le lien hypertexte. Une balise ouvrante peut contenir de nombreux attributs.
— Lien vers Wikipedia : il s’agit ici du contenu de l’élément. Dans notre exemple, c’est le texte qui sera
affiché dans le navigateur.
— </a> : Encadrée par un chevron ouvrant et un slash " </ " et un chevron fermant " > ", la " balise
fermante " sert à délimiter la zone de l’élément HTML concerné. Dans notre exemple cela indique la
fin de l’hypertexte.

SIGNIFICATION DES ÉLÉMENTS HTML

Lorsque le langage a été créé en 1991, le défi a été de créer un langage qui prenne le moins d’espace
mémoire possible tout en conservant du sens. Dans l’exemple précédent, on peut voir :
— <a> : pour " Anchor ", une ancre vers laquelle on peut se rendre en " tirant " sur le lien.
— href : c’est l’abréviation de " Hypertext REFerence ", le lien hypertexte.
Apprendre la liste des éléments " par cœur " n’est pas utile (il y en a plus d’une centaine), par contre
avoir près de soi un lien vers une documentation de référence comme celle du Mozilla Developer
Network1 (qu’il convient de parcourir au moins une fois pour repérer les différentes rubriques) et
prendre l’habitude de rechercher le sens qui se cache derrière chaque élément rencontré, vous aidera
à mieux les comprendre (et au final à les retenir sans le vouloir).

Comme dans un ouvrage " papier ", un élément HTML peut en contenir d’autres. Par exemple si on
prend le contenu suivant, on peut voir un paragraphe dans lequel on trouve du texte, un lien hypertexte et
des mots en " gras " :
Le projet Wikipédia est une encyclopédie collective en ligne, universelle et multilingue !
Si on observe le code HTML qui a permis de générer cet affichage, on peut voir que l’élément HTML <p>
(" paragraph ") contient un <a> et plusieurs <strong> :

1 https://developer.mozilla.org/fr/docs/Web/HTML/Element

CNED – BTS SIO – BLOC 1 – B1.3 – SÉQUENCE 1 – Fiche savoirs – 3

HTML

<p>
Le projet <a href="https://fr.wikipedia.org">Wikipedia</a>est une encyclopédie
<strong>collective</strong> en ligne, <strong>universelle</strong> et
<strong>multilingue</strong> !
</p>

On notera également que, comme vous avez pu le voir en programmation, par convention pour faciliter la
lecture du code, il est nécessaire de distinguer chaque bloc en les décalant les uns des autres.
Enfin, il existe des éléments HTML " vides " qui, n’accueillant pas de contenu, utilisent une seule balise
ouvrante dite " autofermante ". Prenons par exemple l’affichage d’une image :

Si on observe le code HTML qui a permis de générer cet affichage, on peut voir que l’élément HTML
<img> (" image ") ne contient pas à proprement parler de balise fermante2 :

HTML

<img src="images/logoHTML.png" alt="Bouclier orange représentant le logo de HTML5">

Comme vous y avez été invité précédemment, il est utile de se poser la question de la signification des
2 attributs utilisés dans cet élément HTML :
— src : sert à spécifier le chemin " source " vers cette image. Par exemple ici on peut voir que l’image
" logoHTML.png " est située dans un sous-répertoire " images " ;
— alt : permet de fournir un texte " alternatif " qui permet de fournir une information lorsque l’image ne
s’affiche pas (raisons multiples : lecteur d’écran, problème de disponibilité de l’image, programme
informatique au lieu d’un navigateur…).

2 Jusqu’à la version 5 de HTML, le langage imposait de mentionner ces éléments " vides " par un simulacre de balise fermante
en ajoutant un slash avant le chevron fermant :" /> ". Depuis HTML5 ce n’est plus obligatoire, mais certains IDE continuent de le
proposer.

CNED – BTS SIO – BLOC 1 – B1.3 – SÉQUENCE 1 – Fiche savoirs – 4

2. Comment se structure une page HTML ?
Une page HTML se divise en 2 parties principales, l’entête HTML (" head ") et le corps de la page
(" body ") :

HTML

<!doctype html> Indique qu'il s'agit d'un fichier HTML.

<html> Élément principal qui contient tout le code HTML présent dans la page.
<head> Cet élément sert à fournir aux navigateurs différentes informations qui
... ne soient pas du contenu à afficher aux visiteurs de la page (fichiers à
</head> télécharger, paramètres d’indexations, encodage des pages…).
<body>
... Cet élément sert à fournir aux navigateurs tout le contenu que vous
</body> souhaitez afficher aux internautes lorsqu’ils affichent votre page (texte,
</html> ressources multimédias, jeux…).

2A. Qu’est-ce que l’élément principal HTML ?

C’est le premier élément dans un document HTML, on parle également d’élément " racine ". On utilise
essentiellement cet élément pour rendre plus accessible une page HTML en spécifiant par exemple la
langue utilisée.

DÉFINITION DE LA LANGUE

La définition de la langue utilisée a bien des objectifs qu’il faut garder à l’esprit :
— permet aux moteurs de recherches de repérer la langue et ainsi de fournir des résultats plus
adaptés ;
— simplifie la lecture des sites web pour les personnes souffrant de handicaps (malvoy-
ance, limitations cognitives, troubles de l’apprentissage…), en permettant par exemple
aux synthétiseurs vocaux de prendre le bon accent.

Sur une page en français, on devra trouver :

HTML

<html lang="fr-FR">

CNED – BTS SIO – BLOC 1 – B1.3 – SÉQUENCE 1 – Fiche savoirs – 5

2B. Qu’est-ce que l’entête HTML ?
Comme évoqué précédemment, les éléments présents dans <head> ont un contenu invisible dans le
navigateur (contrairement à l’élément <body> qui contient l’ensemble des éléments visibles d’une page
web), et à ce titre, c’est lui qui contient la plupart des éléments HTML de mise en forme graphique ou
textuelle. On notera toutefois qu’il est interdit d’inclure directement du texte brut (c’est-à-dire en dehors
d’un élément HTML), comme on le voit parfois…
On y trouve par exemple :
• Le titre de la page. C’est ce qui est mis en évidence dans les résultats des moteurs de recherche et
qui apparaît ensuite dans l’onglet du navigateur. C’est également ce titre qui est repris comme libellé
lorsque l’on met la page en " favoris " :

Wikipédia, l'encyclopédie libre

HTML

<head>
<title>Wikipédia, l’encyclopédie libre</title>
</head>

• Différentes " méta-informations " :

— par exemple, si la page contient plusieurs systèmes d’écriture (russe et chinois) alors on utilisera le
jeu de caractères international UTF-8 :

HTML

<meta charset="utf-8">

JEU DE CARACTÈRES
Lorsque l’on n’utilise qu’un système d’écriture (français et anglais), on peut penser qu’il vaudra mieux
utiliser un système minimal (et donc plus léger) comme l’ISO-8859-15 (contenant notamment le
symbole "€", ou encore la ligature "œ"), mais il n’en est rien. Les effets de bords sont trop importants :
encodage des fichiers à revoir, utilisation d’entités HTML pour de nombreux caractères.

CNED – BTS SIO – BLOC 1 – B1.3 – SÉQUENCE 1 – Fiche savoirs – 6

On utilisera malgré tout la plupart du temps l’utf-8 car l’ISO-8859-15 imposera de recourir à des codes
spécifiques pour les caractères accentués appelés " entités HTML " : par exemple "Sécurité" devra
s’écrire "S&eacute;curit&eacute;" ou encore "S&#233curit&#233".

— u
 n autre exemple, si l’on souhaite spécifier un auteur de la page qui puisse être référencé par les
moteurs de recherche :

HTML

<meta name="author" content="Prénom NOM">

— d
 e la même façon, on pourra donner une description de la page qui pourra ensuite être affichée dans
les résultats des moteurs de recherche :

HTML

<
meta name="description" content="Découvrez des casques moto dépassant
même les exigences des tests de sécurité. Tous les casques Nolark au
meilleur prix et avec en prime la livraison gratuite !">

— c ’est également là que l’on place les fichiers CSS permettant de faire de la mise en forme et les
fichiers JavaScript qui permettent d’exécuter des programmes dans le navigateur (tous deux que l’on
verra ultérieurement).

2C. Qu’est-ce que le corps d’une page HTML ?

Comme évoqué précédemment, les éléments présents dans <body> représentent tous un ensemble
d’éléments visibles d’une page web. Ces éléments sont à mettre à la suite les uns des autres, où parfois
lorsque c’est possible et nécessaire, à imbriquer les uns dans les autres.

L’INDEXATION

Il y a quelques années, les moteurs de recherches s’appuyaient exclusivement sur le contenu des
balises <meta> et en particulier sur l’attribut "keywords" qui permettait d’associer des "mots-clés"
au contenu d’une page. Cette méthode a montré ses limites dès lors que des développeurs associaient
de mauvais mots clés ou qu’ils étaient dans l’incapacité d’isoler des mots importants dans une page
au contenu vaste… Les nouveaux "algorithmes d’indexation" se sont alors tournés vers une prise en
compte plus importante du contenu au détriment des méta-informations.
Cela signifie-t-il pour autant que les "robots d’indexation" se sont mis à "lire" les pages ? Oui, et non !
Les algorithmes utilisés ont alors été conçus pour s’appuyer sur les concepts du "web 3.0" (également
appelé "web sémantique") pour que les robots soient capables de reconnaître les différentes zones
d’une page, et même les différentes informations présentes au sein d’une zone. Par exemple, si l’on

CNED – BTS SIO – BLOC 1 – B1.3 – SÉQUENCE 1 – Fiche savoirs – 7

vend des casques, plutôt que d’avoir une page référencée comme "vendant des casques", elle pourra
être référencée comme "vendant x casques, avec x noms, x caractéristiques, x photos représentatives
et x prix".

Avant de concevoir du contenu, il convient donc de réaliser une maquette " papier " (ou sur un logiciel
de prototypage) afin de ne pas perdre de temps à coder des tests, et ensuite cela permet de réfléchir au
" zonage sémantique " évoqué ci-dessus.
Prenons l’exemple suivant :

HTML
En‑tête de page
...
<body>
Navigation
<header>Entête de page
<nav>Navigation</nav>
</header>

<section>
Article annexe

<article>Article</article>
<aside>Article annexe</aside>
Article
</section>

<section>
<h1>Section thématique</h1>
<article>Article</article>
Section thématique <article>Article</article>
<article>Article</article>
Article Article Article </section>

<footer>Pied de page</footer>

Pied de page </body>

On notera que sans l’aide de "feuilles de style" que nous verrons dans une prochaine " fiche-savoir " le
résultat du code HTML ci-dessus serait le suivant :

CNED – BTS SIO – BLOC 1 – B1.3 – SÉQUENCE 1 – Fiche savoirs – 8

Les cours du CNED sont strictement réservés à l’usage privé de leurs destinataires et ne sont pas destinés à une utilisation collec-
tive. Les personnes qui s’en serviraient pour d’autres usages, qui en feraient une reproduction intégrale ou partielle, une traduc-
tion sans le consentement du CNED, s’exposeraient à des poursuites judiciaires et aux sanctions pénales prévues par le Code de la
propriété intellectuelle. Les reproductions par reprographie de livres et de périodiques protégés contenues dans cet ouvrage sont effec-
tuées par le CNED avec l’autorisation du Centre français d’exploitation du droit de copie (20, rue des Grands-Augustins, 75006 Paris).
CNED, BP 60200, 86980 Futuroscope Chasseneuil Cedex, France
© CNED 2020 87611TEWB3520