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>