Les titres de niveau 1 sont marqués avec l'élément <h1> ou la classe h1-like.
Typeface: Quattrocento
Le titre au-dessus est de niveau 1. Il sert pour les titres de pages et pour chapitrer les éléments <body>, <section> et <article>.
Les titres de niveau 2 sont marqués avec l'élément <h2> ou la classe h2-like.
Typeface: Quattrocento
Le titre au-dessus est de niveau 2. On peut en avoir plusieurs à l'intérieur d'une page, d'une section ou d'un article.
Les titres de niveau 3 utilisent l'élément <h3> ou la classe h3-like.
Typeface: Quattrocento
Le titre au-dessus est de niveau 3.
Les titres de niveau 4,5 ou 6 utilisent les éléments <h4> <h5> <h6> ou les classes h4-like, h5-like, h6-like.
Typeface: Quattrocento
Les titres au-dessus sont successivement de niveau 4, 5 et 6. À utiliser pour chapitrer les documents, les articles et les sections.
Le gouvernement syrien a donné son accord de principe sur sa participation à la conférence internationale sur la Syrie, a annoncé vendredi le ministère des affaires étrangères russe.
Les classes p--milli, p--centi, p--deci, p--deca, p--hecto, p--kilo, p--mega, p--giga, p--tera, p--peta, p--exa, p--zeta permettent de changer la taille de police
Cette conférence, proposée par la Russie et les Etats-Unis, vise à négocier une solution politique à la guerre civile en Syrie.
Cette conférence, proposée par la Russie et les Etats-Unis, vise à négocier une solution politique à la guerre civile en Syrie.
Cette conférence, proposée par la Russie et les Etats-Unis, vise à négocier une solution politique à la guerre civile en Syrie.
Cette conférence, proposée par la Russie et les Etats-Unis, vise à négocier une solution politique à la guerre civile en Syrie.
Cette conférence, proposée par la Russie et les Etats-Unis, vise à négocier une solution politique à la guerre civile en Syrie.
Cette conférence, proposée par la Russie et les Etats-Unis, vise à négocier une solution politique à la guerre civile en Syrie.
Cette conférence, proposée par la Russie et les Etats-Unis, vise à négocier une solution politique à la guerre civile en Syrie.
Cette conférence, proposée par la Russie et les Etats-Unis
Cette conférence, proposée par la Russie et les Etats-Unis
Cette conférence, proposée par la Russie et les Etats-Unis
Ce truc !
Les blocs de citations utilisent l'élément <blockquote>. On utilise l'élément <cite> pour indiquer l'auteur.
Un bloc de citation court sans aucun paragraphe à l'intérieur
Un bloc de citations un peu plus long
Avec plusieurs paragraphes
OMG a heading!
- Block quotes can contain more than just paragraphs…
The
blockquoteelement represents content that is quoted from another source, optionally with a citation which must be within afooterorciteelement, and optionally with in-line changes such as annotations and abbreviations.
Content inside ablockquoteother than citations and in-line changes must be quoted from another source, whose address, if it has one, may be cited in theciteattribute. [emphasis mine]
4.51 the Blockquote element , Berjon et al. 2013
As my fellow HTML5 Doctor, Oli Studholme has showed, people seldom quote exactly – so sacrosanctity of the quoted text isn’t a useful ideal – and in print etc, citations almost always appear as part of the quotation – it’s highly conventional.At Swim-Two-Birds
À l'époque, il était plus sage qu'aujourd'hui; il me demandait souvent mon avis.
La classe pull-right décale à droite un bloc de citation.
À la guerre, la maxime «sécurité d'abord» mène tout droit à la ruine.
Les citations en ligne utilisent l'élément <q>. On utilise l'attribut <cite> pour indiquer l'auteur.
Luke continued, And then she called him a
The poor naive fool…
scruffy-looking nerf-herder!
I think I’ve got a chance!
The Aladdin character Jafar presents an eloquent treatise on the recent global economic meltdown when he states You know the golden rule, don’t you boy? Those who have the gold make the rules.
Pour ajouter un séparateur horizontal, utiliser l'élément <hr>.
À l'époque, il était plus sage qu'aujourd'hui; il me demandait souvent mon avis.
Churchill, Sir Winston Léonard Spencer
Il y a différents types de listes HTML. Chaque option de liste est marquée par l'élément <li>.
Différents styles de ligne
Les listes non ordonnées utilisent l'élément <ul> et la classe <disc>. Il permet de lister une collection d'éléments.
Voilà un exemple intéressant qui paraît judicieux de présenter et sans avoir besoin d'en plus que nécessaire.
Listes non ordonnées imbriquées
La classe inline affiche les éléments en ligne.
Les listes ordonnées utilisent l'élément <ol>. Différents modes de numérotation sont possibles.
Liste numérotée imbriquée
Pour une note de bas de page, ajouter la classe footnotes.
Une liste de définitions <dl> contient rangés par couples des termes <dt> et leurs définitions <dd>.
Liste de définitions horizontal
La classe dl-horizontal affiche chaque définition horizontalement.
Les éléments HTML de niveau texte permettent de distinguer des mots ou des phrases à l'intérieur d'un paragraphe. On peut mettre en exergue avec em (emphasis) et strong, en italique avec i (italique), en gras avec b, souligné avec u. On peut définir une abbréviation avec
abbr, indiquer une citation avec cite, des exemples avec code ou samp, du contenu à saisir avec kbd, du contenu supprimé avec del, ou ajouté avec ins, une définition dfn, des passages surlignés mark. On peut mettre du texte en exposant sup ou en indice sub.
Plusieurs tailles de police sont possibles pour le texte, soit avec la balise <small> : small.
Sinon avec l'une des classes suivantes : .milli, .centi ou .deci.
Ou encore : .deca, .hecto, .kilo.
Et plus haut : .mega, .giga, .tera.
Et encore plus haut ! .peta, .exa, .zeta.
Il y a quelques autres formattages de police .spaced pour un écartement des lettres plus important.