<commit_before><!doctype html>
<html dir="ltr" lang="fr">
<head>
<meta charset="utf-8">
<title>Tiny Typo</title>
<meta name="description" content="Base CSS pour la typo web">
<meta name="author" content="<EMAIL>">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/tinytypo.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">

</head>
<body>
<div class="page">
<header role="banner">
	
	<h1>Tiny&nbsp;Typo</h1>

	<nav role="navigation" id="nav">
		<ul class="list-inline"><!--
			--><li><a href="#typo">Typo</a></li><!--
			--><li><a href="#links">Liens</a></li><!--
			--><li><a href="#heading">Titraille</a></li><!--
			--><li><a href="#lists">Listes</a></li><!--
			--><li><a href="#tables">Tableaux</a></li><!--
			--><li><a href="#quotes">Citations</a></li><!--
			--><li><a href="#boxes">Encadrés</a></li><!--
			--><li><a href="#medias">Medias</a></li><!--
			--><li><a href="#download">Télécharger</a></li>
		</ul>
	</nav>

</header>

<main role="main">

<section>
	<p>Tiny&nbsp;Typo est une base CSS pour le <strong>contenu éditorial web</strong>. Elle fait le minimum typographique nécessaire à la rédaction de documents web. Ni&nbsp;perfectionniste, ni avant-gardiste, elle&nbsp;se veut simple et robuste. C'est pourquoi elle est en HTML et CSS, sans image, ni fonte, ni JavaScript, respectueuse des standards W3C, responsive, soucieuse d'accessibilité et facile à&nbsp;utiliser.<p>

	<p>Pour faciliter la personnalisation, un minimum de couleurs et polices sont déclarées dans la base Tiny&nbsp;Typo. À&nbsp;vous de compléter dans votre propre feuille de style. Des sélecteurs CSS bien pratiques, complétant le HTML natif, décrits ci-après, sont mis à disposition pour vous faciliter la vie.</p>

	<p class="text-center small">Tiny&nbsp;Typo devrait fonctionner sur n'importe quel site&nbsp;: en&nbsp;pur&nbsp;<abbr title="Cascading Style Sheets" lang="en">CSS</abbr> ou avec&nbsp;LESS, avec ou sans framework, <abbr title="Content Management Framework" lang="en">CMF</abbr>&nbsp;ou&nbsp;<abbr title="Content Management System" lang="en">CMS</abbr>. Dans le cas contraire, merci de signaler les difficultés rencontrées, par&nbsp;<a href="http://romy.tetue.net/contact" rel="external" class="external">courriel</a> ou venez en discuter sur&nbsp;<a href="irc://irc.freenode.net/tinytypo" rel="external" class="external">IRC&nbsp;#tinytypo</a>.</p>
</section>

<section id="typo">
	<h2>Paragraphes</h2>
	<p>Tout paragraphe est marqué par l'élément HTML <code>&lt;p&gt;</code>. L'idée principale doit être exprimée clairement au début du paragraphe. Les autres phrases servent à expliquer et à illustrer le message qu'on veut transmettre. Bref, un paragraphe pour chaque idée et une idée par paragraphe.
	<br>Ici, retour à la ligne, avec l'élément <code>&lt;br&gt;</code>. Espace&nbsp;insécable.</p>

	<p>Second paragraphe. Selon la norme typographique adoptée, la première ligne d'un paragraphe peut être en retrait (alinéa rentrant). Sur un document électronique comportant de nombreux paragraphes courts, on évite parfois ce retrait pour le remplacer par une ligne vierge, détachant mieux les paragraphes et les prêtant ainsi mieux à la lecture rapide.</p>

	<hr>

	<p>Troisième paragraphe, précédé d&#8217;une ligne horizontale de séparation&nbsp;<code>&lt;hr&gt;</code>. La&nbsp;lecture sur écran est fastidieuse et provoque rapidement de la fatigue oculaire. Il&nbsp;est donc recommandé d'aérer le texte&nbsp;: faire des paragraphes courts et sauter une ligne entre chaque.</p>

	<h2>Marquages sémantiques</h2>
	<!-- Cf. : http://www.la-grange.net/w3c/html4.01/struct/text.html#h-9.2.1 -->

	<dl>
		<dt><code>&lt;em&gt;</code> et <code>&lt;strong&gt;</code></dt>
		<!-- Cf. : https://developer.mozilla.org/fr/docs/Web/HTML/Element/em -->
		<dd>L'élément d'emphase <code>&lt;em&gt;</code> sert à <em>insister</em> sur un texte. L'élément <code>&lt;strong&gt;</code> sert à donner plus d'<strong>importance</strong> à un texte. Exemple&nbsp;: l'italique est moins <em>lisible</em> sur écran, il convient d'en user <strong>avec parcimonie</strong>.</dd>

		<dt><code>&lt;i&gt;</code></dt>
		<dd>L'élément <code>&lt;i&gt;</code> sert à différencier des mots du texte principal, par exemple des termes techniques, ou des mots dans une langue étrangère, comme les locutions latines non francisées <i lang="la">a&nbsp;priori</i> ou <i lang="la">modus vivendi</i>.</dd>

		<dt><code>&lt;b&gt;</code></dt>
		<dd>L'élément <code>&lt;b&gt;</code> sert à distinguer un texte, sans lui apporter une importance particulière. Habituellement utilisé pour les <b>mots-clés</b> dans les résumés, les <b>noms de produits</b> dans des tests, ou encore pour la première phrase d'un paragraphe.</dd>

		<dt><code>&lt;abbr&gt;</code> <abbr title="Support incomplet" class="quiet">⚠</abbr> <del>et <code>&lt;acronym&gt;</code> <abbr title="N'existe plus en HTML5" class="quiet">⚠</abbr></del></dt>
		<dd>L'élément <code>&lt;abbr&gt;</code> représente une abréviation et permet d'en fournir une description complète. Exemple&nbsp;: le <abbr title="Cascading Style Sheets" lang="en">CSS</abbr> sert à habiller la structure <abbr title="HyperText Markup Language" lang="en">HTML</abbr>. L'élément <code>&lt;acronym&gt;</code> représentait une abréviation se prononçant comme un mot normal&nbsp;: y'a-t-il un <acronym title="objet volant non identifié">ovni</acronym> à l'<acronym title="Ouvroir de Littérature Potentielle">OuLiPo</acronym>&nbsp;? Ce dernier ne doit plus être utilisé mais remplacé par <code>&lt;abbr&gt;</code>.</dd>

		<dt><code>&lt;dfn&gt;</code></dt>
		<dd>L'élément <code>&lt;dfn&gt;</code> marque le terme que définit le texte environnant. Par exemple, le <dfn>courriel</dfn> est le système de courrier électronique qui nous permet d'envoyer des messages à travers le monde.</dd>

		<dt><code>&lt;del&gt;</code> et <code>&lt;ins&gt;</code></dt>
		<!-- Cf. : http://www.la-grange.net/w3c/html4.01/struct/text.html#h-9.4 -->
		<dd>Les éléments <code>&lt;del&gt;</code> et <code>&lt;ins&gt;</code> sont utilisés pour marquer les parties d'un document qui ont été <del>supprimées</del> ou <ins>insérées</ins>. Par exemple, un shérif peut employer <del>3</del><ins>5</ins> suppléants.</dd>

		<dt><code>&lt;u&gt;</code> <abbr title="Déprécié en HTML 4 et XHTML, ré-introduit en HTML5" class="quiet">⚠</abbr></dt>
		<!-- Cf.: https://developer.mozilla.org/fr/docs/Web/HTML/Element/u -->
		<dd>L'élément <code>&lt;u&gt;</code> permet d'afficher un <u>texte souligné</u>. Il s'utilise de façon exceptionnelle, pour signaler un texte mal <u>ortografié</u> ou un nom propre chinois, par exemple&nbsp;: <u lang="zh">汉代</u>. Le soulignement est réservé aux <a href="#links">hyperliens</a>.</dd>

		<dt><code>&lt;mark&gt;</code></dt>
		<dd>L'élément <code>&lt;mark&gt;</code> sert à <mark>surligner</mark> certains mots par rapport au contexte, comme les résultats d'une recherche dans le document ou pour attirer l'attention sur certains mots d'une citation. Pour le <span class="mark">même effet visuel</span>, non sémantique, utilisez <code>.mark</code>.</dd>

		<dt><code>&lt;small&gt;</code> <del>et <code>&lt;big&gt;</code> <abbr title="N'existe plus en HTML5" class="quiet">⚠</abbr></del></dt>
		<!-- Cf.: https://developer.mozilla.org/fr/docs/Web/HTML/Element/small -->
		<dd>L'élément <code>&lt;small&gt;</code> représente des annotations et des petits caractères comme les <small>mentions légales</small> ou liées au <small>copyright</small>. Comme l'élément <code>&lt;big&gt;</code> ne se limite qu'à de la présentation formelle, il ne doit <big>plus</big> être utilisé, mais remplacé par le sélecteur CSS <code>.big</code>.</dd>

		<dt><code>&lt;sub&gt;</code> et <code>&lt;sup&gt;</code></dt>
		<!-- Cf.: http://www.la-grange.net/w3c/html4.01/struct/text.html#h-9.2.3 -->
		<dd>Les éléments <code>&lt;sub&gt;</code> et <code>&lt;sup&gt;</code> marquent les indices et les exposants, par exemple&nbsp;: <abbr>H<sub>2</sub>O</abbr> et E=mc<sup>2</sup>. Ne pas confondre <abbr title="numéro">n<sup>o</sup></abbr> et <abbr title="degré Celsius">°C</abbr>.</dd>

		<dt><code>&lt;time&gt;</code></dt>
		<dd>L'élément <code>&lt;time&gt;</code> représente une heure ou une date précise du calendrier grégorien et pour les rendre interprétables par un ordinateur. Née le <time datetime="1815-12-10">10 décembre 1815</time> et morte le <time datetime="1852-11-27">27 novembre 1852</time> à Londres, <NAME> est considérée comme <q>le premier programmeur du monde</q>.</dd>
	</dl>

	<p>Pour obtenir le même effet visuel, non sémantique, utilisez les sélecteurs CSS homonymes&nbsp;: <code>.i</code>, <code>.b</code>, <code>.del</code>, <code>.ins</code>, <code>.small</code>, etc.

	<h3>Autres enrichissements typographiques</h3>

	<p>Les enrichissements typographiques suivants ne sont pas disponibles en HTML natif et donc proposés en&nbsp;CSS par Tiny&nbsp;Typo&nbsp;:</p>

	<ul>
		<li><code>.caps</code>&nbsp;: <span class="caps">Petites capitales</span></li>
		<li><code>.quiet</code>&nbsp;: <span class="quiet">Texte discret</span></li>
	</ul>

	<p>Tailles de texte&nbsp;:</p>

	<ul>
		<li><code>.smaller</code>&nbsp;: <span class="smaller">smaller</span></li>
		<li><code>.small</code>&nbsp;: <span class="small">small</span></li>
		<li>texte de base</li>
		<li><code>.big</code>&nbsp;: <span class="big">big</span></li>
		<li><code>.bigger</code>&nbsp;: <span class="bigger">bigger</span></li>
		<li><code>.biggest</code>&nbsp;: <span class="biggest">biggest</span></li>
	</ul>
</section>


<section id="links">
	<h2>Ancres et liens</h2>
	<!-- Cf.: https://developer.mozilla.org/fr/docs/Web/HTML/Element/a -->
	<!-- Cf.: http://letrainde13h37.fr/43/signaletique-hyperliens/ -->

	<p>Les hyperliens <code>&lt;a&gt;</code> doivent être visuellement distingués du reste du contenu. Les hyperliens de même nature ont des couleurs, des formes et des comportements identiques sur toutes les pages. Tiny&nbsp;Typo les distingue ainsi&nbsp;:</p>

	<ul>
		<li><a href="">Lien interne</a></li>
		<li><code>.external</code>&nbsp;: <a href="" rel="external" class="external">Lien externe</a></li>
		<li><code>.mailto</code>&nbsp;: <a href="mailto:<EMAIL>" title="Écrire à <EMAIL>" class="mailto">Ecrivez-nous&nbsp;!</a></li>
		<li><code>.tel</code>&nbsp;: <a href="tel:+33141592653" class="tel">+33 1 41 59 26 53</a></li>
		<li><code>.download</code>&nbsp;: <a href="" download class="download">Document à télécharger <small class="ext">(<abbr title="Document PDF">PDF</abbr> &ndash; 215&nbsp;Ko)</small></a></li>
		<li><code>.audio</code>&nbsp;: <a href="" class="audio">Document audio <small class="ext">(<abbr title="Fichier Ogg">Ogg</abbr> &ndash; 12&nbsp;min)</small></a></li>
	</ul>

	<p>Lorsqu'elle différe de la page d'origine, la langue de la cible est renseignée dans l'attribut HTML <code>hreflang=""</code>.</p>

	<ul>
		<li><a href="" hreflang="en">Lien interne</a></li>
		<li><code>.external</code>&nbsp;: <a href="" rel="external" class="external" hreflang="en">Lien externe</a></li>
		<li><code>.mailto</code>&nbsp;: <a href="mailto:<EMAIL>" title="Écrire à <EMAIL>" class="mailto">Ecrivez-nous&nbsp;!</a></li>
		<li><code>.tel</code>&nbsp;: <a href="tel:+33141592653" class="tel">+33 1 41 59 26 53</a></li>
		<li><code>.download</code>&nbsp;: <a href="" download class="download" hreflang="en">Document à télécharger <small class="ext">(<abbr title="Document PDF">PDF</abbr> &ndash; 215&nbsp;Ko)</small></a></li>
		<li><code>.audio</code>&nbsp;: <a href="" class="audio" hreflang="en">Document audio <small class="ext">(<abbr title="Fichier Ogg">Ogg</abbr> &ndash; 12&nbsp;min)</small></a></li>
	</ul>

	<p>Les <a href="">liens internes</a> et les <a href="http://checklists.opquast.com/11/criteria/687/" title="Bonne pratique Opquast N&#176;188" rel="external" class="external">liens externes</a> sont différenciés. Lorsqu'elle différe de la page d'origine, mieux vaut spécifier la langue de destination&nbsp;: voici la <a href="http://www.w3.org/Translations/WCAG20-fr/" rel="external" class="external">version française</a> des <a href="http://www.w3.org/TR/WCAG20/" title="Web Content Accessibility Guidelines" hreflang="en" rel="external" class="external"><abbr title="Web Content Accessibility Guidelines" lang="en">WCAG</abbr>&nbsp;2.0</a>. Exemple de lien vers un document&nbsp;: <a href="https://data.oqs-cdn.com/checklists/11/Opquast-Quality-Best-practices_V2-2010.pdf" download class="download pdf">Bonnes pratiques Opquast <small class="ext">(<abbr title="Document PDF">PDF</abbr> &ndash; 215&nbsp;Ko)</small></a>. Pour en savoir plus, voir cet article sur la <a href="http://letrainde13h37.fr/43/signaletique-hyperliens/" rel="external" class="external">signalétique des hyperliens</a>.</p>

	<p>Ancre de retour en haut de page&nbsp;: <a href="#top">#top</a></p>
</section>

<commit_msg>petite typo<commit_after><!doctype html>
<html dir="ltr" lang="fr">
<head>
<meta charset="utf-8">
<title>Tiny Typo</title>
<meta name="description" content="Base CSS pour la typo web">
<meta name="author" content="romy.tetue.net">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/tinytypo.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">

</head>
<body>
<div class="page">
<header role="banner">
	
	<h1>Tiny&nbsp;Typo</h1>

	<nav role="navigation" id="nav">
		<ul class="list-inline"><!--
			--><li><a href="#typo">Typo</a></li><!--
			--><li><a href="#links">Liens</a></li><!--
			--><li><a href="#heading">Titraille</a></li><!--
			--><li><a href="#lists">Listes</a></li><!--
			--><li><a href="#tables">Tableaux</a></li><!--
			--><li><a href="#quotes">Citations</a></li><!--
			--><li><a href="#boxes">Encadrés</a></li><!--
			--><li><a href="#medias">Medias</a></li><!--
			--><li><a href="#download">Télécharger</a></li>
		</ul>
	</nav>

</header>

<main role="main">

<section>
	<p>Tiny&nbsp;Typo est une base CSS pour le <strong>contenu éditorial web</strong>. Elle fait le minimum typographique nécessaire à la rédaction de documents web. Ni&nbsp;perfectionniste, ni avant-gardiste, elle&nbsp;se veut simple et robuste. C'est pourquoi elle est en HTML et CSS, sans image, ni fonte, ni JavaScript, respectueuse des standards W3C, responsive, soucieuse d'accessibilité et facile à&nbsp;utiliser.<p>

	<p>Pour faciliter la personnalisation, un minimum de couleurs et polices sont déclarées dans la base Tiny&nbsp;Typo. À&nbsp;vous de compléter dans votre propre feuille de style. Des sélecteurs CSS bien pratiques, complétant le HTML natif, décrits ci-après, sont mis à disposition pour vous faciliter la vie.</p>

	<p class="text-center small">Tiny&nbsp;Typo devrait fonctionner sur n'importe quel site&nbsp;: en&nbsp;pur&nbsp;<abbr title="Cascading Style Sheets" lang="en">CSS</abbr> ou avec&nbsp;LESS, avec ou sans framework, <abbr title="Content Management Framework" lang="en">CMF</abbr>&nbsp;ou&nbsp;<abbr title="Content Management System" lang="en">CMS</abbr>. Dans le cas contraire, merci de signaler les difficultés rencontrées, par&nbsp;<a href="http://romy.tetue.net/contact" rel="external" class="external">courriel</a> ou venez en discuter sur&nbsp;<a href="irc://irc.freenode.net/tinytypo" rel="external" class="external">IRC&nbsp;#tinytypo</a>.</p>
</section>

<section id="typo">
	<h2>Paragraphes</h2>
	<p>Tout paragraphe est marqué par l'élément HTML <code>&lt;p&gt;</code>. L'idée principale doit être exprimée clairement au début du paragraphe. Les autres phrases servent à expliquer et à illustrer le message qu'on veut transmettre. Bref, un paragraphe pour chaque idée et une idée par paragraphe.
	<br>Ici, retour à la ligne, avec l'élément <code>&lt;br&gt;</code>. Espace&nbsp;insécable.</p>

	<p>Second paragraphe. Selon la norme typographique adoptée, la première ligne d'un paragraphe peut être en retrait (alinéa rentrant). Sur un document électronique comportant de nombreux paragraphes courts, on évite parfois ce retrait pour le remplacer par une ligne vierge, détachant mieux les paragraphes et les prêtant ainsi mieux à la lecture rapide.</p>

	<hr>

	<p>Troisième paragraphe, précédé d&#8217;une ligne horizontale de séparation&nbsp;<code>&lt;hr&gt;</code>. La&nbsp;lecture sur écran est fastidieuse et provoque rapidement de la fatigue oculaire. Il&nbsp;est donc recommandé d'aérer le texte&nbsp;: faire des paragraphes courts et sauter une ligne entre chaque.</p>

	<h2>Marquages sémantiques</h2>
	<!-- Cf. : http://www.la-grange.net/w3c/html4.01/struct/text.html#h-9.2.1 -->

	<dl>
		<dt><code>&lt;em&gt;</code> et <code>&lt;strong&gt;</code></dt>
		<!-- Cf. : https://developer.mozilla.org/fr/docs/Web/HTML/Element/em -->
		<dd>L'élément d'emphase <code>&lt;em&gt;</code> sert à <em>insister</em> sur un texte. L'élément <code>&lt;strong&gt;</code> sert à donner plus d'<strong>importance</strong> à un texte. Exemple&nbsp;: l'italique est moins <em>lisible</em> sur écran, il convient d'en user <strong>avec parcimonie</strong>.</dd>

		<dt><code>&lt;i&gt;</code></dt>
		<dd>L'élément <code>&lt;i&gt;</code> sert à différencier des mots du texte principal, par exemple des termes techniques, ou des mots dans une langue étrangère, comme les locutions latines non francisées <i lang="la">a&nbsp;priori</i> ou <i lang="la">modus vivendi</i>.</dd>

		<dt><code>&lt;b&gt;</code></dt>
		<dd>L'élément <code>&lt;b&gt;</code> sert à distinguer un texte, sans lui apporter une importance particulière. Habituellement utilisé pour les <b>mots-clés</b> dans les résumés, les <b>noms de produits</b> dans des tests, ou encore pour la première phrase d'un paragraphe.</dd>

		<dt><code>&lt;abbr&gt;</code> <abbr title="Support incomplet" class="quiet">⚠</abbr> <del>et <code>&lt;acronym&gt;</code> <abbr title="N'existe plus en HTML5" class="quiet">⚠</abbr></del></dt>
		<dd>L'élément <code>&lt;abbr&gt;</code> représente une abréviation et permet d'en fournir une description complète. Exemple&nbsp;: le <abbr title="Cascading Style Sheets" lang="en">CSS</abbr> sert à habiller la structure <abbr title="HyperText Markup Language" lang="en">HTML</abbr>. L'élément <code>&lt;acronym&gt;</code> représentait une abréviation se prononçant comme un mot normal&nbsp;: y'a-t-il un <acronym title="objet volant non identifié">ovni</acronym> à l'<acronym title="Ouvroir de Littérature Potentielle">OuLiPo</acronym>&nbsp;? Ce dernier ne doit plus être utilisé mais remplacé par <code>&lt;abbr&gt;</code>.</dd>

		<dt><code>&lt;dfn&gt;</code></dt>
		<dd>L'élément <code>&lt;dfn&gt;</code> marque le terme que définit le texte environnant. Par exemple, le <dfn>courriel</dfn> est le système de courrier électronique qui nous permet d'envoyer des messages à travers le monde.</dd>

		<dt><code>&lt;del&gt;</code> et <code>&lt;ins&gt;</code></dt>
		<!-- Cf. : http://www.la-grange.net/w3c/html4.01/struct/text.html#h-9.4 -->
		<dd>Les éléments <code>&lt;del&gt;</code> et <code>&lt;ins&gt;</code> sont utilisés pour marquer les parties d'un document qui ont été <del>supprimées</del> ou <ins>insérées</ins>. Par exemple, un shérif peut employer <del>3</del><ins>5</ins> suppléants.</dd>

		<dt><code>&lt;u&gt;</code> <abbr title="Déprécié en HTML 4 et XHTML, ré-introduit en HTML5" class="quiet">⚠</abbr></dt>
		<!-- Cf.: https://developer.mozilla.org/fr/docs/Web/HTML/Element/u -->
		<dd>L'élément <code>&lt;u&gt;</code> permet d'afficher un <u>texte souligné</u>. Il s'utilise de façon exceptionnelle, pour signaler un texte mal <u>ortografié</u> ou un nom propre chinois, par exemple&nbsp;: <u lang="zh">汉代</u>. Le soulignement est réservé aux <a href="#links">hyperliens</a>.</dd>

		<dt><code>&lt;mark&gt;</code></dt>
		<dd>L'élément <code>&lt;mark&gt;</code> sert à <mark>surligner</mark> certains mots par rapport au contexte, comme les résultats d'une recherche dans le document ou pour attirer l'attention sur certains mots d'une citation. Pour le <span class="mark">même effet visuel</span>, non sémantique, utilisez <code>.mark</code>.</dd>

		<dt><code>&lt;small&gt;</code> <del>et <code>&lt;big&gt;</code> <abbr title="N'existe plus en HTML5" class="quiet">⚠</abbr></del></dt>
		<!-- Cf.: https://developer.mozilla.org/fr/docs/Web/HTML/Element/small -->
		<dd>L'élément <code>&lt;small&gt;</code> représente des annotations et des petits caractères comme les <small>mentions légales</small> ou liées au <small>copyright</small>. Comme l'élément <code>&lt;big&gt;</code> ne se limite qu'à de la présentation formelle, il ne doit <big>plus</big> être utilisé, mais remplacé par le sélecteur CSS <code>.big</code>.</dd>

		<dt><code>&lt;sub&gt;</code> et <code>&lt;sup&gt;</code></dt>
		<!-- Cf.: http://www.la-grange.net/w3c/html4.01/struct/text.html#h-9.2.3 -->
		<dd>Les éléments <code>&lt;sub&gt;</code> et <code>&lt;sup&gt;</code> marquent les indices et les exposants, par exemple&nbsp;: <abbr>H<sub>2</sub>O</abbr> et E=mc<sup>2</sup>. Ne pas confondre <abbr title="numéro">n<sup>o</sup></abbr> et <abbr title="degré Celsius">°C</abbr>.</dd>

		<dt><code>&lt;time&gt;</code></dt>
		<dd>L'élément <code>&lt;time&gt;</code> représente une heure ou une date précise du calendrier grégorien et pour les rendre interprétables par un ordinateur. Née le <time datetime="1815-12-10">10 décembre 1815</time> et morte le <time datetime="1852-11-27">27 novembre 1852</time> à Londres, Ada Lovelace est considérée comme <q>le premier programmeur du monde</q>.</dd>
	</dl>

	<p>Pour obtenir le même effet visuel, non sémantique, utilisez les sélecteurs CSS homonymes&nbsp;: <code>.i</code>, <code>.b</code>, <code>.del</code>, <code>.ins</code>, <code>.small</code>, etc.

	<h3>Autres enrichissements typographiques</h3>

	<p>Les enrichissements typographiques suivants ne sont pas disponibles en HTML natif et donc proposés en&nbsp;CSS par Tiny&nbsp;Typo&nbsp;:</p>

	<ul>
		<li><code>.caps</code>&nbsp;: <span class="caps">Petites capitales</span></li>
		<li><code>.quiet</code>&nbsp;: <span class="quiet">Texte discret</span></li>
	</ul>

	<p>Tailles de texte&nbsp;:</p>

	<ul>
		<li><code>.smaller</code>&nbsp;: <span class="smaller">smaller</span></li>
		<li><code>.small</code>&nbsp;: <span class="small">small</span></li>
		<li>texte de base</li>
		<li><code>.big</code>&nbsp;: <span class="big">big</span></li>
		<li><code>.bigger</code>&nbsp;: <span class="bigger">bigger</span></li>
		<li><code>.biggest</code>&nbsp;: <span class="biggest">biggest</span></li>
	</ul>
</section>


<section id="links">
	<h2>Ancres et liens</h2>
	<!-- Cf.: https://developer.mozilla.org/fr/docs/Web/HTML/Element/a -->
	<!-- Cf.: http://letrainde13h37.fr/43/signaletique-hyperliens/ -->

	<p>Les hyperliens <code>&lt;a&gt;</code> doivent être visuellement distingués du reste du contenu. Les hyperliens de même nature ont des couleurs, des formes et des comportements identiques sur toutes les pages. Tiny&nbsp;Typo les distingue ainsi&nbsp;:</p>

	<ul>
		<li><a href="">Lien interne</a></li>
		<li><code>.external</code>&nbsp;: <a href="" rel="external" class="external">Lien externe</a></li>
		<li><code>.mailto</code>&nbsp;: <a href="mailto:<EMAIL>" title="Écrire à <EMAIL>" class="mailto">Ecrivez-nous&nbsp;!</a></li>
		<li><code>.tel</code>&nbsp;: <a href="tel:+33141592653" class="tel">+33 1 41 59 26 53</a></li>
		<li><code>.download</code>&nbsp;: <a href="" download class="download">Document à télécharger <small class="ext">(<abbr title="Document PDF">PDF</abbr> &ndash; 215&nbsp;Ko)</small></a></li>
		<li><code>.audio</code>&nbsp;: <a href="" class="audio">Document audio <small class="ext">(<abbr title="Fichier Ogg">Ogg</abbr> &ndash; 12&nbsp;min)</small></a></li>
	</ul>

	<p>Lorsqu'elle diffère de la page d'origine, la langue de la cible est renseignée dans l'attribut HTML <code>hreflang=""</code>.</p>

	<ul>
		<li><a href="" hreflang="en">Lien interne</a></li>
		<li><code>.external</code>&nbsp;: <a href="" rel="external" class="external" hreflang="en">Lien externe</a></li>
		<li><code>.mailto</code>&nbsp;: <a href="mailto:<EMAIL>" title="Écrire à <EMAIL>" class="mailto">Ecrivez-nous&nbsp;!</a></li>
		<li><code>.tel</code>&nbsp;: <a href="tel:+33141592653" class="tel">+33 1 41 59 26 53</a></li>
		<li><code>.download</code>&nbsp;: <a href="" download class="download" hreflang="en">Document à télécharger <small class="ext">(<abbr title="Document PDF">PDF</abbr> &ndash; 215&nbsp;Ko)</small></a></li>
		<li><code>.audio</code>&nbsp;: <a href="" class="audio" hreflang="en">Document audio <small class="ext">(<abbr title="Fichier Ogg">Ogg</abbr> &ndash; 12&nbsp;min)</small></a></li>
	</ul>

	<p>Les <a href="">liens internes</a> et les <a href="http://checklists.opquast.com/11/criteria/687/" title="Bonne pratique Opquast N&#176;188" rel="external" class="external">liens externes</a> sont différenciés. Lorsqu'elle différe de la page d'origine, mieux vaut spécifier la langue de destination&nbsp;: voici la <a href="http://www.w3.org/Translations/WCAG20-fr/" rel="external" class="external">version française</a> des <a href="http://www.w3.org/TR/WCAG20/" title="Web Content Accessibility Guidelines" hreflang="en" rel="external" class="external"><abbr title="Web Content Accessibility Guidelines" lang="en">WCAG</abbr>&nbsp;2.0</a>. Exemple de lien vers un document&nbsp;: <a href="https://data.oqs-cdn.com/checklists/11/Opquast-Quality-Best-practices_V2-2010.pdf" download class="download pdf">Bonnes pratiques Opquast <small class="ext">(<abbr title="Document PDF">PDF</abbr> &ndash; 215&nbsp;Ko)</small></a>. Pour en savoir plus, voir cet article sur la <a href="http://letrainde13h37.fr/43/signaletique-hyperliens/" rel="external" class="external">signalétique des hyperliens</a>.</p>

	<p>Ancre de retour en haut de page&nbsp;: <a href="#top">#top</a></p>
</section>


{'fraction_non_alphanumeric': 0.19351105281432043, 'fraction_numerical': 0.01303962038501601, 'mean_word_length': 5.64155777606969, 'pattern_counts': {'":': 0, '<': 1021, '<?xml version=': 0, '>': 1021, 'https://': 10, 'lorem ipsum': 0, 'www.': 10, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 18, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6216484', 'n_tokens_mistral': 10024, 'n_tokens_neox': 9635, 'n_words': 2344}