MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Formatage avancé du texte

Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

Il existe beaucoup d'éléments HTML pour le formatage de texte, que nous ne n'avons pas listés dans l'article sur les bases de l'usage du texte en HTL. Les éléments décrits dans cet article sont bien moins connus, mais pourtant utiles à connaître (et de toutes façons ce n'est pas une liste complète de toutes façons). Ci-dessous vous apprendrez tout sur les balises de citation, les listes de définition, le code, et autres particularités du texte, exposant et indice, informations de contact et d'autres encore.

Prérequis : Connaître les bases du HTML, telles qu'explosées dans l'article Getting started with HTML. Connaître aussi le formatage du texte en HTML, comme indiqué dans HTML text fundamentals.
Objectifs : Apprendre comment utiliser les éléments HTML moins connus pour baliser des fonctions sémantiques avancées.

Listes de définition

Dans les bases du texte en HTML, nous avons exposé comment on pouvait baliser des listes basiques en HTML, mais nous n'avons pas mentionné le troisième type de liste que vous pouvez rencontrer à l'occasion — les listes de définition. L'objectif de ces listes est de baliser une série d'éléments et les descriptions qui leur sont associées, comme les termes et leur définition, ou les questions et leur réponse. Voici un exemple de jeu de termes avec leur définition   :

soliloque
Dans une pièce de théâtre, quand un personnage se parle à lui-même, pour méditer sur ses pensées ou sentiments, pour ainsi les communiquer aux spectateurs mais pas aux autres personnages.
monologue
Dans une pièce de théâtre, quand un personnage partage ses pensées à haute voix avec le public et tous les personnages présents.
aparté
Dans une pièce de théâtre, quand un personnage partage un commentaire seulement avec le public pour produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète, d'une information sur le contexte

Les listes de définition utilisent un balisage différent des autres types de listes — <dl>; De plus chaque terme est entouré d'un élément <dt> (de description), et chaque description est entourée d'un élément <dd> (de description). Terminons en balisant notre exemple :

<dl>
  <dt>soliloque</dt>
  <dd>Dans une pièce de théâtre, quand un personnage se parle à lui-même, pour méditer sur ses pensées ou sentiments, pour ainsi les communiquer aux spectateurs mais pas aux autres personnages.</dd>
  <dt>monologue</dt>
  <dd>Dans une pièce de théâtre, quand un personnage partage ses pensées à haute voix avec le public et tous les personnages présents.</dd>
  <dt>aparté</dt>
  <dd>Dans une pièce de théâtre, quand un personnage partage un commentaire seulement avec le public pour produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète, d'une information sur le contexte.</dd>
</dl>

Les styles par défaut du navigateur vont afficher les listes de définition avec des descriptions indentées par rapport aux termes. les styles de MDN suivent de très près cette convention, mais soulignent davantage les définitions en les mettant en gras.

soliloque
Dans une pièce de théâtre, quand un personnage se parle à lui-même, pour méditer sur ses pensées ou sentiments, pour ainsi les communiquer aux spectateurs mais pas aux autres personnages.
monologue
Dans une pièce de théâtre, quand un personnage partage ses pensées à haute voix avec le public et tous les personnages présents.
aparté
Dans une pièce de théâtre, quand un personnage partage un commentaire seulement avec le public pour produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète, d'une information sur le contexte.

Notez qu'il est autorisé d'avoir un seul terme avec de multiples descriptions, par exemple :

aparté
Dans une pièce de théâtre, quand un personnage partage un commentaire seulement avec le public pour produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète, d'une information sur le contexte.
Quand on écrit, une partie de contenu qui est associée au sujet en cours, mais qui ne coïncide pas avec le flux principal de contenu, et qui est donc présenté à part (souvent dans une boîte sur le côté).

Active learning: Marking up a set of definitions

It's time to try your hand at description lists; add elements to the raw text in the Input field so that it appears as a description list in the Output field. You could try using your own terms and descriptions if you like.

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see the answer.

Citations

HTML also has features available for marking up quotations; which element you use depends on whether you are marking up a block or inline quotation.

Blocs de citation

Si une section ou un contenu de niveau bloc (que ce soit un paragraphe, de multiples paragraphes, une liste, etc.) est cité depui sun autre origine, vous pouvez l'entourer de balises <blockquote> pour l'indiquer, et inclure une URL qui pointe vers la source de la citation dans un attribut cite. Par exemple, le balisage suivant vient de la page MDN de l'élément <blockquote>²a&q   :

<p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>

To turn this into a block quote, we would just do this:

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>

Browser default styling will render this as an indented paragraph, as an indicator that it is a quote; MDN does this, but also adds some extra styling:

The HTML <blockquote> Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation.

Inline quotations

Inline quotations work in exactly the same way, except that they use the <q> element. For example, the below bit of markup contains a quotation from the MDN <q> page:

<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q></p>

Browser default styling will render this as normal text put in quotes to indicate a quotation, like so:

The quote element — <q> — is intended for short quotations that don't require paragraph breaks.

Citations

The content of the cite attribute sounds useful, but unfortunately browsers, screenreaders, etc. don't really do much with it. There is no way to get the browser to display the contents of cite, without writing your own solution using JavaScript or CSS. If you want to make the source of the quotation available on the page, a better way to mark it up is put the <cite> element next to the quote element. This is really meant to contain the name of the quote source — i.e. the name of the book, or name of the person that said the quote — but there is no reason why you couldn't link the text inside <cite> to the quote source in some way:

<p>According to the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
<cite>MDN blockquote page</cite></a>:
</p>

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>

<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q> -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
<cite>MDN q page</cite></a>.</p>

Citations are styled in italic font by default. You can see this code at work in our quotations.html example.

Active learning: Who said that?

Time for another active learning example! In this example we'd like you to:

  1. Turn the middle paragraph into a blockquote, which includes a cite attribute.
  2. Turn part of the third paragraph into an inline quote, which includes a cite attribute.
  3. Include a <cite> element for each quote

Search online to find appropriate quote sources.

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see the answer.

Abbreviations

Another fairly common element you'll meet when looking around the Web is <abbr> — this is used to wrap around an abbreviation or acronym, and provide a full expansion of the term (included inside a title attribute.) Let's look at a couple of examples:

<p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents.</p>

<p>I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with the chainsaw.</p>

These will come out looking something like this (the expansion will appear in a tooltip when the term is hovered over):

We use HTML to structure our web documents.

I think Rev. Green did it in the kitchen with the chainsaw.

Note: There is another element, <acronym>, which basically does the same thing as <abbr>, and was intended specifically for acronyms rather than abbreviations. This however has fallen into disuse — it wasn't supported as well in browsers as well as <abbr>, and has such as similar function that it was felt pointless to have both. Just use <abbr> instead.

Active learning: marking up an abbreviation

For this simple active learning assignment, we'd like you to simply mark up an abbreviation. You can use our sample below, or replace it with one of your own. 

Marking up contact details

HTML has an element for marking up contact details — <address>. This simply wraps around your contact details, for example:

<address>
  <p>Chris Mills, Manchester, The Grim North, UK</p>
</address>

One thing to remember however is that the <address> element is meant for marking up the contact details of the person who wrote the HTML document, not any address. So the above would only be ok if Chris had written the document the markup appears on. Note that something like this would also be ok:

<address>
  <p>Page written by <a href="../authors/chris-mills/">Chris Mills</a>.</p>
</address>

Superscript and subscript

You will occasionally need to use superscript and subscript when marking up items like dates, chemical formulae, and mathematical equations so they have the correct meaning. The <sup> and <sub> elements handle this job. For example:

<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
<p>Caffeine's chemical formula is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>

The output of this code looks like so:

My birthday is on the 25th of May 2001.

Caffeine's chemical formula is C8H10N4O2.

If x2 is 9, x must equal 3 or -3.

Representing computer code

There are a number of elements available for marking up computer code using HTML:

  • <code>: For marking up generic pieces of computer code.
  • <pre>: For marking up blocks of fixed width text, in which the whitespace is retained (generally code blocks.)
  • <var>: For specifically marking up variable names.
  • <kbd>: For marking up keyboard (and other types of) input entered into the computer.
  • <samp>: For marking up the output of a computer program.

Let's look at a few examples. You should try having a play with these (try grabbing a copy of our other-semantics.html sample file):

<pre><code>var para = document.querySelector('p');

para.onclick = function() {
  alert('Owww, stop poking me!');
}</code></pre>

<p>You shouldn't use presentational elements like <code>&lt;font&gt;</code> and <code>&lt;center&gt;</code>.</p>

<p>In the above JavaScript example, <var>para</var> represents a paragraph element.</p>


<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>

<pre>$ <kbd>ping mozilla.org</kbd>
<samp>PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>

The above code will look like so:

Marking up times and dates

HTML also provides the <time> element for marking up times and dates in a machine-readable format. For example:

<time datetime="2016-01-20">20 January 2016</time>

Why is this useful? Well, there are many different ways that humans write down dates. The above date could be written as:

  • 20 January 2016
  • 20th January 2016
  • Jan 20 2016
  • 20/06/16
  • 06/20/16
  • The 20th of next month
  • 20e Janvier 2016
  • 2016年1月20日
  • And so on

But these different forms cannot be easily recognised by the computers — what if you wanted to automatically grab the dates of all events in a page and insert them into a calendar? The <time> element allows you to attach a unambiguous, machine-readable time/date for this purpose.

The basic example above just provides a simple machine readable date, but there are many other options that are possible, for example:

<!-- Standard simple date -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- Just year and month -->
<time datetime="2016-01">January 2016</time>
<!-- Just month and day -->
<time datetime="01-20">20 January</time>
<!-- Just time, hours and minutes -->
<time datetime="19:30">19:30</time>
<!-- You can do seconds and milliseconds too! -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- Date and time -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- Date and time with timezone offset-->
<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
<!-- Calling out a specific week number-->
<time datetime="2016-W04">The fourth week of 2016</time>

Summary

That marks the end of our study of HTML text semantics. Bear in mind that what you have seen during this course is not an exhaustive list of HTML text elements — we wanted to try to cover the essentials, and some of the more common ones you will see in the wild, or at least might find interesting. To find way more HTML elements, you can take a look at our HTML element reference (the Inline text semantics section would be a great place to start.) In the next article we will look at the HTML elements you'd use to structure the different parts of an HTML document.

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : Goofy
 Dernière mise à jour par : Goofy,