Cette page sera enrichie au fil du semestre.
Pour plus de détails, se reporter par exemple à
- la référence officielle sur le site du W3C, le consortium qui définit le html (et plus généralement les normes du web)
- le site w3schools, documentation non officielle, qui fournit une interface très pratique pour tester les balises (mais n’est pas officielle et peut parfois se tromper)
Balises les plus courantes
Structure du fichier
<!--et-->
Pour encadrer des commentaires<!DOCTYPE html>
au début du document (html5). Ce n’est pas une balise à proprement parler<html>
l’élément qui contient tous les autres. Il a deux fils,headetbody<head>
informations diverses sur le document<body>
contenu du document
Éléments de type bloc (structure grossière de la page)
- de
<h1>à<h6>
Titres (heading), du plus important (h1) au moins important (h6) <p>
paragraphe<div>
bloc quelconque, pour le séparer du reste du document (ce qui sera utile pour la mise en page par css)
Éléments en ligne (découpage du texte)
<em>
mettre en évidence (emphase), italique par défaut.<strong>
mettre fortement en évidence, gras par défaut.<kbd>
pour représenter du texte en caractère machine<span>
pour délimiter un passage (auquel on pourra attribuer un style css ou une action javascript)<a>
hyperlien (ancre)<img />
image
Saut de ligne (<br />), barre horizontale (<hr />) : à éviter
A quelques exceptions près, ces deux balises seront remplacés avantageusement par des éléments de style css.
Listes
<ul>
liste à puces (unordered list), contient des<li><ol>
liste numérotée (ordered list), contient des<li><li>
élément à l’intérieur d’une liste (list item)<dl>
liste de définitions (definition list), contient une alternance de<dt>et de<dl><dt>
un terme à définir (definition term) dans une<dl>;<dd>
une définition (qui suit un<dt>) dans une<dl>.
Les listes peuvent être imbriquées, comme dans l’exemple ci-dessous :
<dl>
<dt>Liste à puce</dt>
<dd>
<ul>
<li>item1</li>
<li>item2</li>
</ul>
</dd>
<dt>Liste numérotée</dt>
<dd>
<ol>
<li>item1</li>
<li>item2</li>
</ol>
</dd>
</dl>
Qui donne le résultat suivant :
le rendu de la liste
Tableaux
<table>
pour définir le tableau<th>
cellule d’en-tête (table head)<tr>
ligne (table row)<td>
cellule de données (table data)
L’exemple de w3schools est très parlant.
et pour des tableaux élaborés :
<thead>
en-tête<tfoot>
bas du tableau (à définir juste après l’en-tête pour permettre au
navigateur de calculer le rendu avant de lire toutes les données)<tbody>
corps du tableau
Formulaires
A venir
Nouveautés html5
Structuration sémantique
<nav>
contient une liste de liens<article>
délimite un texte « complet », ce qui peut inclureheader,footer,sectionetc.<header>
contient des éléments d’introduction (titre, table des matières, etc.) à l’élément qui le contient (qui peut être la page principale)<footer>
contient des informations annexes sur l’élément qui le contient (auteur, date, références, etc.)<section>
délimite différentes parties de l’élément qui le contient (article, document principal, etc.) Une section pourra assez naturellement commencer par un titre (h1etc.)<aside>
contient des informations qui ne sont pas partie intégrante du texte (une phrase mise en exergue, un élémentnavpour des liens externes, etc.)
Balises plus élaborées
A venir
<abbr><acronym><dfn><area><base><blockquote><q><caption><cite><pre><code><colgroup><fieldset><legend><iframe><object><script>
À propos de l’italique et du gras, il y a une subtilité sémantique à connaître:
(Dans la suite, remplacez les crochets par des « plus grand/petit »)
[i] permet de mettre un texte en italique par simple volonté stylistique.
[em] permet de mettre l’accent (emphase) sur le texte.
[b] permet de mettre un texte en gras par simple volonté stylistique.
[strong] permet de mettre un texte en valeur (plus fortement qu’avec [em]).
Bien sûr, visuellement, [i] et [em] (respectivement [b] et [strong]) auront la même apparence), mais les deux balises ne veulent pas dire la même chose. Les lecteurs visuels le prennent en compte, par exemple, de même que Google. Pour le moteur de recherche, un texte entre [i] ou [b] n’a pas d’importance particulière, alors qu’entre [em] ou [strong], il en a plus.
ouais, moi je suis pas fan de i et b, la « volonté stylistique », ça ressemble quand même beaucoup à un truc qui devrait être dans le CSS.
Donc merci pour ton commentaire qui me donne l’occasion d’insister sur ce point
That is a very good tip particularly to those new to
the blogosphere. Short but very accurate information… Thanks for sharing this one.
A must read article!
Hello there! Do you know if they make any plugins to safeguard against hackers?
I’m kinda paranoid about losing everything I’ve worked hard on. Any tips?