diff options
| author | tristantheb <tristantheb@users.noreply.github.com> | 2021-04-11 16:41:56 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-11 16:41:56 +0200 |
| commit | 73d9be8f9c1ff3622f37fffa117d0f435f7ad4a0 (patch) | |
| tree | 6c97b630144bd7640802023a94f4a063c364c7b7 /files/fr/web/html/microformats | |
| parent | e53436927292d51247e5b65eb636dd13d6ad3b9a (diff) | |
| download | translated-content-73d9be8f9c1ff3622f37fffa117d0f435f7ad4a0.tar.gz translated-content-73d9be8f9c1ff3622f37fffa117d0f435f7ad4a0.tar.bz2 translated-content-73d9be8f9c1ff3622f37fffa117d0f435f7ad4a0.zip | |
L10N: Update content of the HTML section - Part 1 (#299)
* UPDATE: Update content of the HTML page with en-US
* FIX: Removing KS or the translation
* UPDATE: Update content of the Applying_color page
* UPDATE: Update content of the Block-level_elements page
* UPDATE: Update content of the CORS_enabled_image page
* UPDATE: Update content of the Date_and_time_formats page
* FIX: Fixing html position
* Minor fix on html
* UPDATE: Update content of the Inline_elements page
* UPDATE: Update content of the Link_types page
* UPDATE: Update content of the Microdata page
* UPDATE: Update content of the Microformats page
* UPDATE: Update content of the Preloading_content page
* UPDATE: Updating the q_mode_&_s_mode page + removing old invalid link
* UPDATE: Removing <x>xref KS and update links
* UPDATE: Update content layout and remove old link on Using_the_application_cache page
* L10N: Translation of the Viewport_meta_tag page
* Review - HTML Applying colors - minor typos and a missing paragraph
* Review - HTML Block Elements - minor typos / lint
* Review - HTML CORS Images - minor rewording / link fix
* Review - HTML date time formats - linting typography, minor changes
* Review - HTML Landing page - minor rewording, typos
* Review - HTML Inline elements - minor linting / example translation
* Review - HTML link types - lint HTML / rm brs
* Review - HTML microdata - minor linting
* Review - HTML microformat - minor typofixes
* Review - HTML preloading - minor changes
* Review - HTML quirks - minor changes / rm deadlinked section
* Review - HTML element references - minor change
* Review - HTML Meta Viewport - minor changes
Co-authored-by: julieng <julien.gattelier@gmail.com>
Diffstat (limited to 'files/fr/web/html/microformats')
| -rw-r--r-- | files/fr/web/html/microformats/index.html | 256 |
1 files changed, 131 insertions, 125 deletions
diff --git a/files/fr/web/html/microformats/index.html b/files/fr/web/html/microformats/index.html index 9144f6683b..dee6a2c39f 100644 --- a/files/fr/web/html/microformats/index.html +++ b/files/fr/web/html/microformats/index.html @@ -1,33 +1,43 @@ --- -title: microformats +title: Microformats slug: Web/HTML/microformats tags: + - Composing - HTML - - Microformat - - µFormat + - Microformats + - NeedsContent + - NeedsMarkupWork + - Reference + - SEO + - Search translation_of: Web/HTML/microformats --- -<div>{{HTMLSidebar}}</div> +<p class="summary">Les <a href="https://microformats.org/"><dfn>microformats</dfn></a> (parfois abrégés <strong>μF</strong>) sont des normes utilisées pour intégrer la sémantique et les données structurées dans le HTML, et fournir une API à utiliser par les moteurs de recherche, les agrégateurs et autres outils. Ces modèles minimaux de HTML sont utilisés pour marquer des entités allant d'informations fondamentales à des informations spécifiques à un domaine, telles que des personnes, des organisations, des événements et des lieux. Les microformats utilisent des vocabulaires de soutien pour décrire les objets et des paires nom-valeur pour attribuer des valeurs à leurs propriétés. Les propriétés sont transportées dans des attributs de classe qui peuvent être ajoutés à tout élément HTML, tandis que les valeurs des données réutilisent le contenu des éléments HTML et les attributs sémantiques. Microformats2 est une mise à jour de microformats qui offre un moyen plus simple d'annoter la syntaxe structurée et les vocabulaires HTML que les approches précédentes utilisant RDFa et microdata qui nécessitent l'apprentissage de nouveaux attributs.</p> -<p><a href="http://microformats.org/"><dfn>Les microformats</dfn></a> (parfois abrégés <strong>μF</strong>) sont un ensemble de conventions pour intégrer une sémantique en HTML et fournir une API utilisable par les moteurs de recherche, les agrégateurs et d'autres outils. Ces constructions HTML permettent de marquer des entités pouvant être génériques (personnes, organisations, évènements, etc.) ou spécifiques à un domaine.</p> +<p>Les microformats sont pris en charge par tous les principaux moteurs de recherche. Les moteurs de recherche bénéficient grandement d'un accès direct à ces données structurées, car elles leur permettent de comprendre les informations contenues dans les pages Web et de fournir des résultats plus pertinents aux utilisateurs. En plus d'être lisible par les machines, leur format est conçu pour être facilement lu par les humains.</p> -<p>Les microformats sont utilisés par l'ensemble des principaux moteurs de recherche. Les données associées sont fournies via l'attribut {{HTMLAttrXRef("class")}} et peuvent donc être ajoutées à n'importe quel élément HTML.</p> +<ul> + <li>Pour créer un objet microformats, les noms de classe h-* sont utilisés dans l'attribut class.</li> + <li>Pour ajouter une propriété à un objet, les noms de classe p-*, u-*, dt-*, e-* sont utilisés sur un des descendants de l'objet.</li> +</ul> -<p>Les valeurs fournies sont censées être interprétables par des machines et lisibles par les humains.</p> <p>Il existe <a href="http://microformats.org/wiki/microformats2#Parsers">différentes bibliothèques d'analyse pour la plupart des langages de programmation</a> qui permettent d'analyser les données microformats2.</p> -<h3 id="Le_fonctionnement_des_microformat">Le fonctionnement des microformat</h3> +<h2 id="How_Microformats_Work">Comment fonctionnent les microformats</h2> <p>Un auteur d'une page web peut ajouter des microformats via le contenu HTML. Ainsi, si un auteur veut s'identifier via un élément, il peut utiliser une classe <a href="http://microformats.org/wiki/h-card">h-card</a> :</p> -<div dir="ltr" style="text-align: left;"> -<pre class="source-html4strict"><a class="h-card" href="http://example.com">Joe Bloggs</a></pre> +<h3 id="HTML_Example">Exemple HTML</h3> + +<pre class="brush: html"><a class="h-card" href="http://alice.example.com">Alice Blogger</a></pre> + +<p>Lorsqu'un parseur de microformat détectera cette donnée, il saura que cette page contient une « carte » qui décrit une personne ou une organisation nommée <code>Alice Blogger</code> et dont l'URL est <code>http://alice.example.com/</code>. Le parseur rend ensuite cette donnée accessible via des API qui pourront être utilisées par des applications.</p> -<p>Lorsqu'un parseur de microformat détectera cette donnée, il saura que cette page contient une « carte » qui décrit une personne ou une organisation nommée <code>Joe Blogger</code> et donc l'URL est <code>http://example.com/</code>. Le parseur rend ensuite cette donnée accessible via des API qui pourront être utilisées par des applications.</p> +<p>Comme dans cet exemple, certains modèles de balisage ne nécessitent qu'un seul nom de classe racine de microformat, que les analyseurs syntaxiques utilisent pour trouver quelques propriétés génériques telles que <code>name</code>, <code>url</code> et <code>photo</code>.</p> </div> -<h2 id="Préfixes_et_microformats">Préfixes et microformats</h2> +<h2 id="Microformats_Prefixes">Préfixes et microformats</h2> <p>Tous les microformats se composent d'une racine et d'un ensemble de propriétés. Les propriétés sont optionnelles et peuvent avoir plusieurs valeurs (si une application a besoin d'une seule valeur, elle pourra utiliser la première valeur d'une propriété). Les données hiérarchisées sont représentées avec des microformats imbriqués.</p> @@ -45,23 +55,23 @@ translation_of: Web/HTML/microformats </li> <li><strong>"p-*" pour les propriétés textuelles</strong> (ex. "p-name", "p-summary") <ul> - <li>Un contenu texte. Pour certains éléments HTML, certains attributs spécifiques seront utilisés (ex. {{HTMLAttrxref("alt","img")}} pour {{HTMLElement("img")}}, {{HTMLAttrxref("title","abbr")}} pour {{HTMLElement("abbr")}}).</li> + <li>Un contenu texte. Pour certains éléments HTML, certains attributs spécifiques seront utilisés (ex. <a href="/fr/docs/Web/HTML/Element/Img#attr-alt"><code>alt</code></a> pour <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>, <a href="/fr/docs/Web/HTML/Element/abbr#attr-title"><code>title</code></a> pour <a href="/fr/docs/Web/HTML/Element/abbr"><code><abbr></code></a>).</li> </ul> </li> <li><strong>"u-*" pour les propriétés qui sont des URL</strong> (ex. "u-url", "u-photo", "u-logo") <ul> - <li>Une analyse spécifique est nécessaire et ce sont les attributs plutôt que le contenu de l'élément qui seront utilisés (ex. {{HTMLAttrxref("src","img")}} pour {{HTMLElement("img")}}, {{HTMLAttrxref("href","a")}} pour {{HTMLElement("a")}}, {{HTMLAttrxref("object","data")}} pour {{HTMLElement("data")}}, etc.).</li> + <li>Analyse spéciale : attributs d'éléments <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>/<a href="/fr/docs/Web/HTML/Element/a#attr-href"><code>href</code></a>, <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>/<a href="/fr/docs/Web/HTML/Element/Img#attr-src"><code>src</code></a>, <a href="/fr/docs/Web/HTML/Element/object"><code><object></code></a>/<a href="/fr/docs/Web/HTML/Element/object#attr-data"><code>data</code></a> etc. attributs sur le contenu des éléments.</li> </ul> </li> <li><strong>"dt-*" pour les propriétés temporelles (date/heure)</strong> (ex. "dt-start", "dt-end", "dt-bday") <ul> - <li>Une analyse spécifique est nécessaire.</li> + <li>Analyse syntaxique spéciale : attribut <a href="/fr/docs/Web/HTML/Element/time#attr-datetime"><code>datetime</code></a> de l'élément <a href="/fr/docs/Web/HTML/Element/time"><code><time></code></a>, <a href="https://microformats.org/wiki/value-class-pattern" title="value-class-pattern">value-class-pattern</a> et analyse séparée de la valeur date-heure pour plus de lisibilité.</li> </ul> </li> <li><strong>"e-*" pour les arborescences</strong> où l'intégralité de la hiérarchie de l'élément est la valeur à récupérer (ex. "e-content"). Le préfixe "e-" peut être retenu en anglais comme "<em><strong>e</strong>lement tree</em>", "<em><strong>e</strong>mbedded markup</em>" ou "<em><strong>e</strong>ncapsulated markup</em>".</li> </ul> -<h2 id="Exemples_de_microformats">Exemples de microformats</h2> +<h2 id="Some_microformats_examples">Exemples de microformats</h2> <h3 id="h-card">h-card</h3> @@ -69,6 +79,8 @@ translation_of: Web/HTML/microformats <p>La valeur de chaque propriété est définie en HTML via l'attribut <code>class</code>.</p> +<h4 id="Example_h-card">Exemple de h-card</h4> + <div dir="ltr" style="text-align: left;"> <pre class="brush: html"><p class="h-card"> <img class="u-photo" src="http://example.org/photo.png" alt="" /> @@ -81,49 +93,48 @@ translation_of: Web/HTML/microformats </div> <table class="standard-table"> - <tbody> - <tr> - <th>Propriété</th> - <th>Description</th> - </tr> - <tr> - <td><strong><code>p-name</code></strong></td> - <td>Le nom complet et formaté de la personne ou de l'organisation.</td> - </tr> - <tr> - <td><strong><code>u-email</code></strong></td> - <td>L'adresse électronique.</td> - </tr> - <tr> - <td><strong><code>u-photo</code></strong></td> - <td>Une photo pour la personne ou l'organisation.</td> - </tr> - <tr> - <td><strong><code>u-url</code></strong></td> - <td>La page d'accueil ou une URL représentant la personne ou l'organisation.</td> - </tr> - <tr> - <td><strong><code>u-uid</code></strong></td> - <td>Un identifiant universel unique (de préférence une URL canonique).</td> - </tr> - <tr> - <td><strong><code>p-street-address</code></strong></td> - <td>L'adresse composée du numéro et du nom de la rue.</td> - </tr> - <tr> - <td><strong><code>p-locality</code></strong></td> - <td>La ville ou le village de résidence.</td> - </tr> - <tr> - <td><strong><code>p-country-name</code></strong></td> - <td>Le nom du pays de résidence.</td> - </tr> - </tbody> + <tbody> + <tr> + <th>Propriété</th> + <th>Description</th> + </tr> + <tr> + <td><strong><code>p-name</code></strong></td> + <td>Le nom complet et formaté de la personne ou de l'organisation.</td> + </tr> + <tr> + <td><strong><code>u-email</code></strong></td> + <td>L'adresse électronique.</td> + </tr> + <tr> + <td><strong><code>u-photo</code></strong></td> + <td>Une photo pour la personne ou l'organisation.</td> + </tr> + <tr> + <td><strong><code>u-url</code></strong></td> + <td>La page d'accueil ou une URL représentant la personne ou l'organisation.</td> + </tr> + <tr> + <td><strong><code>u-uid</code></strong></td> + <td>Un identifiant universel unique (de préférence une URL canonique).</td> + </tr> + <tr> + <td><strong><code>p-street-address</code></strong></td> + <td>L'adresse composée du numéro et du nom de la rue.</td> + </tr> + <tr> + <td><strong><code>p-locality</code></strong></td> + <td>La ville ou le village de résidence.</td> + </tr> + <tr> + <td><strong><code>p-country-name</code></strong></td> + <td>Le nom du pays de résidence.</td> + </tr> + </tbody> </table> -<h4 id="Exemple_imbriqué">Exemple imbriqué</h4> +<h4 id="Nested_h-card_example">Exemple de h-card imbriqué</h4> -<div dir="ltr" style="text-align: left;"> <pre class="brush: html"><div class="h-card"> <a class="p-name u-url" href="http://blog.lizardwrangler.com/" @@ -132,11 +143,9 @@ translation_of: Web/HTML/microformats href="http://mozilla.org/" >Mozilla Foundation</a>) </div></pre> -</div> <p>Cela fournira le JSON suivant :</p> -<div dir="ltr" style="text-align: left;"> <pre class="brush: json">{ "items": [{ "type": ["h-card"], @@ -154,17 +163,15 @@ translation_of: Web/HTML/microformats } }] }</pre> -</div> -<div class="blockIndicator note"> -<p><strong>Note :</strong> Le h-card imbriqué récupère des valeurs implicites pour <code>name</code> et <code>url</code>.</p> +<div class="notecard note"> + <p><strong>Note :</strong> Le h-card imbriqué récupère des valeurs implicites pour <code>name</code> et <code>url</code>.</p> </div> <h3 id="h-entry">h-entry</h3> <p>Le microformat <a href="http://microformats.org/wiki/h-entry">h-entry</a> représente un contenu épisodique ou daté présent sur le Web. Il est généralement utilisé pour du contenu qui est présenté dans un flux (ex. les billets de blog).</p> -<div dir="ltr" style="text-align: left;"> <pre class="brush: html"><article class="h-entry"> <h1 class="p-name">Microformats are amazing</h1> <p>Published by <a class="p-author h-card" href="http://example.com">W. Developer</a> @@ -177,41 +184,40 @@ translation_of: Web/HTML/microformats </div> </article></pre> -<h4 id="Propriétés">Propriétés</h4> -</div> +<h4 id="Properties">Propriétés</h4> <table class="standard-table"> - <tbody> - <tr> - <th>Propriété</th> - <th>Description</th> - </tr> - <tr> - <td><strong><code>p-name</code></strong></td> - <td>Nom ou titre pour l'entrée.</td> - </tr> - <tr> - <td><strong><code>p-author</code></strong></td> - <td>L'auteur de l'entrée (éventuellement imbriquée avec une h-card).</td> - </tr> - <tr> - <td><strong><code>dt-published</code></strong></td> - <td>La date de publication de l'entrée.</td> - </tr> - <tr> - <td><strong><code>p-summary</code></strong></td> - <td>Un résumé de l'entrée.</td> - </tr> - <tr> - <td><strong><code>e-content</code></strong></td> - <td>Le contenu complet de l'entrée.</td> - </tr> - </tbody> + <tbody> + <tr> + <th>Propriété</th> + <th>Description</th> + </tr> + <tr> + <td><strong><code>p-name</code></strong></td> + <td>Nom ou titre pour l'entrée.</td> + </tr> + <tr> + <td><strong><code>p-author</code></strong></td> + <td>L'auteur de l'entrée (éventuellement imbriquée avec une h-card).</td> + </tr> + <tr> + <td><strong><code>dt-published</code></strong></td> + <td>La date de publication de l'entrée.</td> + </tr> + <tr> + <td><strong><code>p-summary</code></strong></td> + <td>Un résumé de l'entrée.</td> + </tr> + <tr> + <td><strong><code>e-content</code></strong></td> + <td>Le contenu complet de l'entrée.</td> + </tr> + </tbody> </table> -<h4 id="Exemple_de_microformat_h-entry_analysé">Exemple de microformat h-entry analysé</h4> +<h4 id="Parsed_reply_h-entry_example">Exemple de microformat h-entry analysé</h4> -<pre class="brush: html" id="line1"><div class="h-entry"> +<pre class="brush: html"><div class="h-entry"> <p><span class="p-author h-card"> <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ><img class="u-photo" src="https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg"/></a> <a class="p-name u-url" href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">Greg McVerry</a></span> @@ -224,7 +230,6 @@ translation_of: Web/HTML/microformats datetime="2019-05-31T14:19:09+0000">31 May 2019</time></a></p> </div></pre> -<div class="panelContent"> <pre class="brush: json">{ "items": [ { @@ -255,8 +260,9 @@ translation_of: Web/HTML/microformats ] }, "lang": "en" - }</pre> -</div> + } + ] +}</pre> <h3 id="h-feed">h-feed</h3> @@ -278,26 +284,26 @@ translation_of: Web/HTML/microformats </div></pre> </div> -<h4 id="Propriétés_2">Propriétés</h4> +<h4 id="Properties_2">Propriétés</h4> <table class="standard-table"> - <tbody> - <tr> - <th>Propriété</th> - <th>Description</th> - </tr> - <tr> - <td><strong><code>p-name</code></strong></td> - <td>Nom du flux.</td> - </tr> - <tr> - <td><strong><code>p-author</code></strong></td> - <td>Auteur du flux, éventuellement intégré via une h-card.</td> - </tr> - </tbody> + <tbody> + <tr> + <th>Propriété</th> + <th>Description</th> + </tr> + <tr> + <td><strong><code>p-name</code></strong></td> + <td>Nom du flux.</td> + </tr> + <tr> + <td><strong><code>p-author</code></strong></td> + <td>Auteur du flux, éventuellement intégré via une h-card.</td> + </tr> + </tbody> </table> -<h4 id="Éléments_fils">Éléments fils</h4> +<h4 id="Children">Enfants</h4> <table class="standard-table"> <tbody> @@ -325,7 +331,7 @@ translation_of: Web/HTML/microformats </div></pre> </div> -<h4 id="Propriétés_3">Propriétés</h4> +<h4 id="Properties_3">Propriétés</h4> <table class="standard-table"> <tbody> @@ -356,9 +362,8 @@ translation_of: Web/HTML/microformats </tbody> </table> -<h4 id="Exemple_d'analyse">Exemple d'analyse</h4> +<h4 id="Parsed_h-event_Example">Exemple d'analyse</h4> -<div dir="ltr" style="text-align: left;"> <pre class="brush: html"><div class="h-event"> <h2 class="p-name">IndieWeb Summit</h2> <time class="dt-start" datetime="2019-06-29T09:00:00-07:00">June 29, 2019 at 9:00am (-0700)</time><br>through <time class="dt-end" datetime="2019-06-30T18:00:00-07:00">June 30, 2019 at 6:00pm (-0700)</time><br> @@ -382,9 +387,6 @@ translation_of: Web/HTML/microformats </div> </div></pre> - - -<div class="panelContent"> <pre class="brush: json">{ "items": [ { @@ -432,15 +434,19 @@ translation_of: Web/HTML/microformats }, "lang": "en" } - ],</pre> -</div> -</div> + ] +}</pre> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>Pris en charge dans tous les navigateurs prenant en charge l'attribut class et son API DOM.</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> - <li>{{Interwiki("wikipedia", "Microformat")}} on Wikipedia</li> - <li><a href="http://microformats.org/">Le site officiel des microformats</a></li> - <li><a href="http://microformats.org/wiki/search_engines">Prise en charge des différents moteurs de recherche</a> sur le site microformats</li> - <li><a href="https://indiewebcamp.com/microformats">Les microformats sur IndieWebCamp</a></li> + <li><a href="/fr/docs/Web/HTML/Global_attributes/class">attribut <code>class</code></a></li> + <li><a href="https://fr.wikipedia.org/wiki/Microformat">Microformat</a> sur Wikipedia</li> + <li><a href="http://microformats.org/">Le site officiel des microformats</a></li> + <li><a href="http://microformats.org/wiki/search_engines">Prise en charge des différents moteurs de recherche</a> sur le site microformats</li> + <li><a href="https://indiewebcamp.com/microformats">Les microformats sur IndieWebCamp</a></li> </ul> |