web:html:semantic

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision		 Révision précédente
web:html:semantic [2023/03/19 03:12] – [Sémantique et structure] jcheronweb:html:semantic [2023/05/09 02:31] (Version actuelle) – [Données RDF] jcheron
Ligne 1: Ligne 1:
 ====== HTML sémantique ====== ====== HTML sémantique ======
  
-Il consiste à utiliser certaine balises donnant un sens au travers de la structure du document.+Il consiste à utiliser certaines balises donnant un sens au travers de la structure du document.
  
 ===== Sémantique et structure ===== ===== Sémantique et structure =====
  
 <html><div class="imageB"></html>{{:web:html:pasted:20230319-025128.png}}<html></div></html> <html><div class="imageB"></html>{{:web:html:pasted:20230319-025128.png}}<html></div></html>
- 
-===== Balises sémantiques ===== 
  
 ^Balise ^Rôle ^ ^Balise ^Rôle ^
Ligne 15: Ligne 13:
 ^aside | Zone supplémentaire de complément | ^aside | Zone supplémentaire de complément |
 ^footer | Pied de page | ^footer | Pied de page |
 +^article | Bloc de contenu en relation avec d'autres articles, peut contenir des sections |
 +^section | Défini une zone spécifique de contenu, peut contenir des articles |
 +^nav | Zone de navigation de la page |
 +
 +===== Balises sémantiques =====
 +==== Liste de description ====
 +
 +
 +<html>
 +<table border=0>
 +<tr><td></html>
 + <sxh html;gutter:false>
 +<dl>
 +    <dt>Prénom</dt>
 +    <dd>John</dd>
 +
 +    <dt>Nom</dt>
 +    <dd>DOE</dd>
 +
 +    <dt>Ville</dt>
 +    <dd>Caen</dd>
 +</dl>
 +</sxh>
 +<html></td><td><div class="imageB"></html>{{:web:html:pasted:20230319-032113.png}}
 +<html></div></td></tr></table></html>
 +
 +==== Citations ====
 +
 +
 +<html>
 +<table border=0>
 +<tr><td></html>
 + <sxh html;gutter:false>
 +<blockquote>
 +    <p>La théorie, c'est quand on sait tout et que rien ne fonctionne.</br>
 +    La pratique, c'est quand tout fonctionne et que personne ne sait pourquoi.</p>
 +    <p>Ici, nous avons réuni théorie et pratique : Rien ne fonctionne… et personne ne sait pourquoi !</p>
 +    <footer>
 +        <cite>Albert EINSTEIN</cite>
 +    </footer>
 +</blockquote>
 +</sxh>
 +<html></td><td><div class="imageB"></html>{{:web:html:pasted:20230319-033402.png}}
 +<html></div></td></tr></table></html>
 +
 +==== Adresse ====
 +
 +Pour mettre des informations de contact:
 +
 +<html>
 +<table border=0>
 +<tr><td></html>
 + <sxh html;gutter:false>
 +<p>Contact the author of this page:</p>
 +
 +<address>
 +    <a href="mailto:jim@rock.com">j.doe@mail.com</a><br>
 +    <a href="tel:+13115552368">(343) 555-3228</a>
 +</address>
 +</sxh>
 +<html></td><td><div class="imageB"></html>{{:web:html:pasted:20230319-033748.png}}
 +<html></div></td></tr></table></html>
 +
 +===== Micro-données =====
 +
 +<WRAP info round>
 +Les microdonnées permettent de spécifier des informations spécifiques sur le contenu d'une page Web, telles que le type de contenu, l'auteur, la date de publication, etc.\\
 +Elles permettent aux moteurs de recherche de mieux comprendre le contenu de la page et de fournir des résultats de recherche plus pertinents.
 +</WRAP>
 +
 +==== Exemple : ====
 +Utilisation de microdonnées de **schema.org** pour spécifier le type de contenu de la page (http://schema.org/Article), ainsi que les informations sur l'auteur et la date de publication de l'article (itemprop="author" et itemprop="datePublished"), itemprop="headline" pour spécifier le titre de l'article.
 +
 +<sxh html>
 +<!DOCTYPE html>
 +<html>
 +<head>
 + <title>Mon article sur les microdonnées</title>
 + <meta charset="utf-8">
 + <!-- Ajout des microdonnées -->
 + <meta itemprop="name" content="Mon article sur les microdonnées">
 + <meta itemprop="author" content="Jean Dupont">
 + <meta itemprop="datePublished" content="2023-05-08">
 +</head>
 +<body>
 + <article itemscope itemtype="http://schema.org/Article">
 + <header>
 + <h1 itemprop="headline">Mon article sur les microdonnées</h1>
 + <p><span itemprop="author">Jean Dupont</span> - <span itemprop="datePublished">8 mai 2023</span></p>
 + </header>
 + <section>
 + <p>Dans cet article, je vais vous expliquer comment les microdonnées peuvent améliorer la visibilité de votre site web dans les résultats de recherche.</p>
 + <p>Les microdonnées permettent de spécifier des informations spécifiques sur le contenu d'une page Web, telles que le type de contenu, l'auteur, la date de 
 +                           publication, etc. Cela permet aux moteurs de recherche de mieux comprendre le contenu de la page et de fournir des résultats de recherche plus pertinents.</p>
 + <p>En utilisant les microdonnées, vous pouvez également améliorer la présentation des résultats de recherche, en ajoutant des éléments tels que des images,
 +                           des évaluations, des prix, etc.</p>
 + </section>
 + <footer>
 + <p>Publié par <span itemprop="author">Jean Dupont</span> le <time itemprop="datePublished" datetime="2023-05-08">8 mai 2023</time>.</p>
 + </footer>
 + </article>
 +</body>
 +</html>
 +</sxh>
 +
 +===== Données RDF =====
 +
 +Etabli par le W3C, RDF (Resource Description Framework) est destiné à décrire formellement les ressources Web et leurs métadonnées, afin de permettre le traitement automatique de telles descriptions.
 +
 +==== Déclaration de données ====
 +
 +Exemple de déclaration de données RDF dans une page :
 +
 +<sxh html>
 +<!DOCTYPE html>
 +<html>
 +<head>
 + <title>Ma page avec des métadonnées RDF</title>
 + <meta charset="utf-8">
 + <!-- Ajout des métadonnées RDF -->
 + <script type="application/ld+json">
 + {
 +   "@context": "https://schema.org",
 +   "@type": "Person",
 +   "name": "Jean Dupont",
 +   "jobTitle": "Webmaster",
 +   "url": "https://www.jeandupont.com"
 + }
 + </script>
 +</head>
 +<body>
 + <h1>Ma page avec des métadonnées RDF</h1>
 + <p>Contenu de ma page...</p>
 +</body>
 +</html>
 +</sxh>
 +
 +==== Récupération de données ====
 +Il est possible de récupérer des données RDF depuis une autre application (web ou autre) :
 +
 +<sxh html>
 +<!DOCTYPE html>
 +<html>
 +<head>
 + <title>Ma page qui récupère des métadonnées RDF</title>
 + <meta charset="utf-8">
 +</head>
 +<body>
 + <h1>Ma page qui récupère des métadonnées RDF</h1>
 + <p>Le nom de la personne est : <span id="name"></span></p>
 + <p>Le titre de poste de la personne est : <span id="jobTitle"></span></p>
 + <p>L'URL de la personne est : <span id="url"></span></p>
 + <script>
 + const url = "https://www.jeandupont.com"; // L'URL de la page qui contient les métadonnées RDF
 + const headers = { "Accept": "application/ld+json" }; // Le type de contenu que l'on souhaite récupérer
 +
 + fetch(url, { headers })
 + .then(response => response.json())
 + .then(data => {
 + document.getElementById("name").innerText = data.name;
 + document.getElementById("jobTitle").innerText = data.jobTitle;
 + document.getElementById("url").innerText = data.url;
 + })
 + .catch(error => console.error(error));
 + </script>
 +</body>
 +</html>
 +</sxh>
 +
 +
 +
 +
 +
  
  • web/html/semantic.1679191959.txt.gz
  • Dernière modification : il y a 2 ans
  • de jcheron