Apprendre HTML : Introduction
Le langage HTML permet de concevoir des pages web en faisant usage de balises et d'attributs.
RĂŽle du HTML
Le rÎle du langage HTML consiste à concevoir une page web en y définissant sa structure et son contenu.
Le HTML est un langage sĂ©mantique : son rĂŽle est de donner du sens aux Ă©lĂ©ments quâil contient afin quâils soient correctement compris et affichĂ©s des navigateurs et moteurs de recherche.
Cette sémantique est déterminée par des « balises » utilisées au sein du document HTML.
Créer une page web consiste à imbriquer ces balises HTML les unes à cÎté des autres et les unes dans les autres. Ces balises sont aussi appelées « tags ».
Balises HTML
Les balises HTML ont un rĂŽle double puisquâelles vont permettre pour une page de dĂ©finir :
- Sa structure (en-tĂȘte, pied de page, menu, sectionâŠ)
- Son contenu (texte, image, vidĂ©oâŠ)
Les balises HTML se distinguent en deux grandes familles : les balises paires et les balises orphelines.
Balises paires
Les balises paires sâapparentent Ă des « boĂźtes » dans lesquelles il est possible de ranger des informations. Elles dĂ©limitent la structure dâune page web. Les balises paires ont une action sur le contenu quâelles encadrent.
Leur syntaxe est la suivante :
<balise>DĂ©monstration</balise>
<balise>
est la balise ouvrante (câest notre boĂźte).</balise>
est la balise fermante (câest le couvercle qui vient fermer la boĂźte). Cette balise possĂšde un slash/
avant son nom.DĂ©monstration
est le contenu de la balise. Il peut sâagir de texte mais aussi dâune autre balise (= imbrication de balises).
On emploie le terme dâ« Ă©lĂ©ment » pour dĂ©finir lâensemble formĂ© par la balise ouvrante + le contenu + la balise fermante.
Bien entendu <balise>
sera remplacé par un nom de balise valide. Il existe de nombreuses balises HTML paires pour structurer notre page web. En voici quelques-unes :
<header>
<h2>Je suis un titre de niveau 2</h2>
<p>Je suis le premier paragraphe.</p>
<p>Je suis le second paragraphe.</p>
</header>
Une balise paire peut tout Ă fait contenir dâautres balises : on parle dâimbrication. Câest le cas de <header>
: ici <h2>
et les <p>
appartiennent au <header>
.
Balises orphelines
Les balises orphelines sâapparentent Ă des « objets » quâil est possible de ranger dans nos boĂźtes. Les balises orphelines ont une action sur elles-mĂȘmes, elles ne peuvent pas contenir dâautres Ă©lĂ©ments.
Dâun point de vue syntaxique, une balise orpheline sâĂ©crit de la mĂȘme maniĂšre quâune balise ouvrante isolĂ©e.
<balise>
Une image <img>
, un saut de ligne <br>
, un champ de formulaire <input>
sont des exemples de balises orphelines puisquâelles ne sont pas vouĂ©es Ă recevoir du contenu Ă lâintĂ©rieur.
<br>
<img>
<input>
La plupart des balises orphelines vont nĂ©cessiter lâusage dâattributs pour bien fonctionner.
Attributs
Des options pour nos balises
Un attribut se place dans une balise ouvrante, permettant dây dĂ©finir des propriĂ©tĂ©s / caractĂ©ristiques supplĂ©mentaires.
Les attributs constituent des sortes dâoptions pour configurer nos balises.
Les attributs se caractérisent par un mot-clé auquel on associera une valeur (écrite entre guillemets).
Ils peuvent venir enrichir une balise paire ou orpheline de la maniĂšre suivante :
<p nom-attribut="valeur attribut">Je suis un paragraphe</p>
<p nom-attribut1="valeur attribut" nom-attribut2="valeur attribut">Je suis un paragraphe</p>
<br nom-attribut="valeur attribut">
Attributs facultatifs ou obligatoires
Un attribut peut ĂȘtre facultatif ou obligatoire afin de garantir le bon fonctionnement dâune balise.
Câest dâailleurs la plupart du temps sur les balises orphelines quâils sont obligatoires, car ces balises ne jouent pas le rĂŽle de conteneur, et vont donc la plupart du temps avoir besoin de ces attributs pour leur spĂ©cifier des caractĂ©ristiques fonctionnelles.
Tout comme les balises, il existe de nombreux attributs HTML, et vous verrez que nous rĂ©utilisons souvent les mĂȘmes.
<p id="welcome-text">Je suis un paragraphe</p>
<img src="https://mon-site.fr/image.png" alt="Texte alternatif décrivant l'image">
id
(facultatif) : définit un identifiant pour la balise.src
(obligatoire) : dĂ©finit la source dâune image.alt
(obligatoire) : dĂ©finit le texte alternatif dĂ©crivant une image. Il est important pour le SEO, lâaccessibilitĂ© et lâexpĂ©rience utilisateur en cas de non-affichage de lâimage.
Attributs abrégés
Certains attributs ne possĂšdent pas de valeur. Ce raccourci dâĂ©criture indique que la valeur de ces attributs est en fait identique au nom de lâattribut.
Ces syntaxes sont donc Ă©quivalentes :
<input type="email" required>
<input type="email" required="required">
<input type="checkbox" checked>
<input type="checkbox" checked="checked">
required
: spĂ©cifie quâun champ de formulaire est obligatoire.checked
: coche par défaut une case dans un questionnaire.
Environnement de développement
Le HTML est un langage de dĂ©veloppement web cĂŽtĂ© client, son environnement de dĂ©veloppement est donc minimaliste puisquâil ne se rĂ©sume quâĂ :
- Un Ă©diteur de code
- Un navigateur web (Chrome, Firefox, SafariâŠ)
OĂč Ă©crire son code HTML ?
Les fichiers destinĂ©s Ă recevoir du code HTML portent lâextension .html
du mĂȘme nom.
Commentaires
En HTML il est possible dâĂ©crire des commentaires dans son code source.
Les commentaires sont des messages Ă destination des dĂ©veloppeurs dans le but de documenter le code. Ils sont bien entendu invisibles pour les visiteurs qui navigueront sur votre site. On dit quâils ne sont pas interprĂ©tĂ©s.
Cela peut ĂȘtre utile lorsque :
- Vous retravaillez sur un ancien code
- Vous travaillez Ă plusieurs dĂ©veloppeurs sur un mĂȘme projet
Un commentaire est délimité par les caractÚres <!--
(ouverture) et -->
(fermeture).
<!-- Je suis un commentaire en HTML -->
Comme vous avez pu le constater, la syntaxe du HTML est relativement simple tout comme sa finalitĂ© : structurer et dĂ©finir son contenu. En consĂ©quence lâutilisation des commentaires est assez limitĂ©e.
En revanche, ils sâavĂ©reront trĂšs intĂ©ressants pour documenter des langages de programmation comme JavaScript ou encore PHP.