HTML sémantique
Il consiste à utiliser certaines balises donnant un sens au travers de la structure du document.
Sémantique et structure
| Balise | Rôle |
|---|---|
| h* | Titres |
| header | En-tête général de la page |
| main | Zone de contenu principal |
| aside | Zone supplémentaire de complément |
| 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
<dl>
<dt>Prénom</dt>
<dd>John</dd>
<dt>Nom</dt>
<dd>DOE</dd>
<dt>Ville</dt>
<dd>Caen</dd>
</dl>
| 
|
Citations
<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>
| 
|
Adresse
Pour mettre des informations de contact:
<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>
| 
|
Micro-données
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.
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.
<!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>
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 :
<!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>
Récupération de données
Il est possible de récupérer des données RDF depuis une autre application (web ou autre) :
<!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>
jcheron