Slapandthink

Web / Dev / Code

HTML5 – Structure sémantique d’une page

- Intégration

Lorsque l’on passe au HTML5, il devient parfois assez confus de réaliser une structure de page sémantiquement viable. Habitué auparavant au HTML4 où la confusion régnait allègrement sur les propriétés sémantique de chaque div (est-elle entrain de désigner un nouveau type de contenu ou est-elle là uniquement pour styler l’élément, la page?) et où, pour le coup nous nous efforcions de séparer les différents types de contenu les uns des autres proprement, le HTML5 arrive avec un grand nombre de balises venant combler ces lacunes. Néanmoins, le HTML5 en voulant résoudre les problèmes des versions précédentes, apporte aussi son lot de confusions, principalement pour la bonne utilisation de ses balises.

Nous nous retrouvons ainsi avec des balises section, header, aside, pour la mise en forme sémantique du contenu mais sans trop comprendre à quel moment les utiliser, et surtout quelle bonne architecture adopter pour la création de ses pages.

Structure d’un document HTML4

Le HTML4 dispose de plusieurs balise permettant la mise en forme sémantique des différents types de contenus, il permet de délimiter les éléments de bases, le corps du document (<body>), les titres (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>). Ces éléments se disposent à l’intérieur d’autres conteneurs, les div. Chaque élément peuvent avoir différents attributs comme des « id », des « class » mais aussi des « role » (utilisé pour la norme d’accessibilité ARIA). Nous pouvons commencer à mettre en forme notre contenu.

Exemples basiques

Ainsi, avec cette structure :

<body>
	<div id="conteneur">
		<div id="section">
			<h1>La neige</h1>
			<p>Voici un petit contenu sur la neige et ses caractéristiques ...</p>
			<h2>Le froid</h2>
			<p>...</p>
			<div id="sous-section">
				<h2>L'eau</h2>
				<p>...</p>
			</div>
		</div>
	</div>
</body>

Sera traduite sémantiquement par :

1. La neige
  1.1. Le froid
  1.2. L'eau
2. La glace

Et avec celle-ci :

<body>
	<div id="conteneur">
		<h1>La neige</h1>
		<p>Voici un petit contenu sur la neige et ses caractéristiques ...</p>
		<h2>Le froid</h2>
		<p>...</p>
		<h2>L'eau</h2>
		<p>...</p>
		<h1>La glace</h1>
	</div>
</body>

Sera traduite sémantiquement sous cette forme :

1. La neige
  1.1. Le froid
  1.2. L'eau
2.La glace

HTML4 vs HTML5

L’algorithme sémantique du HTML4 est donc imprécis, il ne fait pas la différence entre une <div> utilisée pour styler un élément et une autre pour séparer un contenu.

Le HTML5 permet de s’affranchir de ces <div> de séparation sémantique avec une nouvelle balise <section>.

Le HTML5 permet l’inclusion de documents à plusieurs niveaux, vous pouvez donc avoir plusieurs éléments enfants sémantiquement reliés à votre élément parent. De nouvelles balises (<article>, <section>, <nav> et <aside>) sont autant de sections, d’éléments pouvant être imbriqués pour un contenu cohérent.

Le HTML5 introduit le <hgroup> qui va vous permettre de donner une description d’un titre principale ou même un titre secondaire en les liant sémantiquement.

En HTML4, tout les sections présentés sont en rapport direct avec le document. Cette structure est trop limité, il est important de pouvoir afficher un contenu, un section possédant un rapport au document en général et non direct, comme une publicité ou plus d’informations sur un contenu en particulier. Pour cela le HTML5 a introduit la balise <aside> (utilisée typiquement dans les « sidebares »).

Le HTML5 permet maintenant de disposer d’éléments affichant des informations générales sur un site web et non sur le document, ou la page actuellement consultée. Les éléments <footer>, <nav> et <header> sont donc des éléments permettant de décrire des fonctions propres au site web ou à l’application, comme la navigation avec la balise <nav> par exemple.

Le HTML5 permet une mise en forme sémantique du contenu par section, importance et fonctionnalité, tout en assurant les éléments de style. Il est donc une évolution sémantique du HTML4 tournée vers la déduction des éléments et l’expérience utilisateur.

HTML5 mise en forme

Ainsi, si l’on traduit en HTML5 l’exemple plus haut nous arrivons à ce résultat :

<body>
	<section>
		<h1>La neige</h1>
		<p>Voici un petit contenu sur la neige et ses caractèristiques ...</p>
		<section>
			<h1>Le froid</h1>
			<p>...</p>
		</section>
		<section>
			<h1>L'eau'</h1>
			<p>...</p>
		</section>
		<aside>
			bloque de publicité
		</aside>
	</section>
	<section>
		<h1>La glace</h1>
	</section>
	<footer>
		copyright exemple
	</footer>
</body>

Cela va être traduit par :

1. La neige
  1.1. Le froid
  1.2. L'eau
2. La glace

Chaque section possède sa propre hiérarchisation de données, ainsi les sections et sous-sections peuvent disposer des <h1>, <h2>, <h3>…

HTML5 mise en forme d’une page

Le HTML5 a introduit de nouveaux éléments dans la définition de nouvelles sections et type de contenu d’un document web :

  • <aside> définit une section qui tout en étant reliée au contenu générale du document, ne fait pas à proprement parler de celui-ci. Cette section apporte un contenu nouveau sur le document ou un publicité dans les cas les plus fréquents.
  • <nav> définit une section contenant des liens de navigation. Il peut y avoir plusieurs de ses sections dans un document.
  • <header> définit la partie du site avec le logo, le nom et le slogan, ainsi que sa barre de navigation.
  • <footer> définit la partie du site contenant le copyright, les informations légales, des liens de navigation.

De nombreuses autres balises ont vu le jour, notamment pour les adresses et les éléments de date, mais ce n’est pas dans l’objet de cet article.

Avec ces bases nous pouvons commencer à apercevoir comment traduire une structure de page basique :

Tous ces structures sont en guise d’exemples, chaque projet, chaque site web doit faire sa propre adaptation de structure.

<body>
	<header>
		<h1>Nom du site</h1>
		<h2>Slogan du site</h2>

		<nav>
			<a href="#">Lien1</a>
			<a href="#">Lien2</a>
			<a href="#">Lien3</a>
		</nav>
	</header>
	<section>
		<h1>Les derniers articles</h1>
		<article>
			<h1>Mon premier article</h1>
			<p>Lorem ipsum dolor ...</p>
		</article>
		<article>
			<h1>Mon deuxième article</h1>
			<p>Lorem ipsum dolor ...</p>
		</article>
		<article>
			<h1>Mon troisième article</h1>
			<p>Lorem ipsum dolor ...</p>
		</article>
	</section>
	<aside>
		Sidebar
	</aside>
	<footer>
		copyright
	</footer>
</body>
html5 structure basique

HTML5 – Structure sémantique basique

Une forme un peu plus complexe :

<body>
	<header>
		<hgroup>
			<h1>Nom du site</h1>
			<h2>Slogan du site</h2>	
		</hgroup>

		<nav>
			<ul>
				<li><a href="#">Lien1</a></li>
				<li><a href="#">Lien2</a></li>
				<li><a href="#">Lien3</a></li>
			</ul>
		</nav>
	</header>
	<section>
		<h1>Les derniers articles</h1>
		<article>
			<header>
				<h1>Mon premier article</h1>
			</header>
			<p>Lorem ipsum dolor ...</p>
			<aside>
				Plus d'informations
			</aside>
			<footer>
				Informations du footer, auteur, catégorie ...
			</footer>
		</article>
		<article>
			<header>
				<h1>Mon premier article</h1>
			</header>
			<p>Lorem ipsum dolor ...</p>
			<aside>
				Plus d'informations
			</aside>
			<footer>
				Informations du footer, auteur, catégorie ...
			</footer>
		</article>
		<article>
			<header>
				<h1>Mon premier article</h1>
			</header>
			<p>Lorem ipsum dolor ...</p>
			<aside>
				Plus d'informations
			</aside>
			<footer>
				Informations du footer, auteur, catégorie ...
			</footer>
		</article>
	</section>
	<aside>
		Sidebar
	</aside>
	<footer>
		copyright
		<nav>
			<ul>
				<li><a href="#">Lien1</a></li>
				<li><a href="#">Lien2</a></li>
				<li><a href="#">Lien3</a></li>
			</ul>
		</nav>
	</footer>
</body>
html5 structure avancée

HTML5 – Structure sémantique avancée

 

 

 

18 réponses à “HTML5 – Structure sémantique d’une page”

  1. [...] Lorsque l’on passe au HTML5, il devient parfois assez confus de réaliser une structure de page sémantiquement viable. Habitué auparavant au HTML4 où la confusion régnait allègrement sur les propriétés sémantique de chaque div…  [...]

  2. [...] Lorsque l'on passe au HTML5, il devient parfois assez confus de réaliser une structure de page sémantiquement viable. Habitué auparavant au HTML4 où la confusion régnait allègrement sur les propriétés sémantique de …  [...]

  3. [...] Lorsque l’on passe au HTML5, il devient parfois assez confus de réaliser une structure de page sémantiquement viable. Habitué auparavant au HTML4 où la confusion régnait allègrement sur les propriétés sémantique de chaque div (est-elle entrain de désigner un nouveau type de contenu ou est-elle là uniquement pour styler l’élément, la page?) et où, pour le coup nous nous efforcions de séparer les différents types de contenu les uns des autres proprement, le HTML5 arrive avec un grand nombre de balises venant combler ces lacunes. Néanmoins, le HTML5 en voulant résoudre les problèmes des versions précédentes, apporte aussi son lot de confusions, principalement pour la bonne utilisation de ses balises. Nous nous retrouvons ainsi avec des balises section, header, aside, pour la mise en forme sémantique du contenu mais sans trop comprendre à quel moment les utiliser, et surtout quelle bonne architecture adopter pour la création de ses pages.  [...]

  4. [...] Lorsque l’on passe au HTML5, il devient parfois assez confus de réaliser une structure de page sémantiquement viable. Habitué auparavant au HTML4 où la confusion régnait allègrement sur les propriétés sémantique de chaque div (est-elle entrain de désigner un nouveau type de contenu ou est-elle là uniquement pour styler l’élément, la page?) et où, pour le coup nous nous efforcions de séparer les différents types de contenu les uns des autres proprement, le HTML5 arrive avec un grand nombre de balises venant combler ces lacunes. Néanmoins, le HTML5 en voulant résoudre les problèmes des versions précédentes, apporte aussi son lot de confusions, principalement pour la bonne utilisation de ses balises. Nous nous retrouvons ainsi avec des balises section, header, aside, pour la mise en forme sémantique du contenu mais sans trop comprendre à quel moment les utiliser, et surtout quelle bonne architecture adopter pour la création de ses pages.  [...]

  5. [...] on slapandthink.com Share this:TwitterFacebookWordPress:J'aimeSoyez le premier à aimer ceci. Ajouter aux [...]

  6. [...] SlapAndThink – Actualités, Conseils, Tutoriels : Web / Dev / Code…  [...]

  7. [...] Lorsque l’on passe au HTML5, il devient parfois assez confus de réaliser une structure de page sémantiquement viable. Habitué auparavant au HTML4 où la confusion régnait allègrement sur les propriétés sémantique de chaque div (est-elle entrain de désigner un nouveau type de contenu ou est-elle là uniquement pour styler l’élément, la page?) et où, pour le coup nous nous efforcions de séparer les différents types de contenu les uns des autres proprement, le HTML5 arrive avec un grand nombre de balises venant combler ces lacunes. Néanmoins, le HTML5 en voulant résoudre les problèmes des versions précédentes, apporte aussi son lot de confusions, principalement pour la bonne utilisation de ses balises. Nous nous retrouvons ainsi avec des balises section, header, aside, pour la mise en forme sémantique du contenu mais sans trop comprendre à quel moment les utiliser, et surtout quelle bonne architecture adopter pour la création de ses pages.  [...]

  8. [...] HTML5 – Structure sémantique d’une page | SlapAndThink Lorsque l’on passe au HTML5, il devient parfois assez confus de réaliser une structure de page sémantiquement viable. Habitué auparavant au HTML4 où la confusion régnait allègrement sur les propriétés sémantique de chaque div (est-elle entrain de désigner un nouveau type de contenu ou est-elle là uniquement pour styler l’élément, la page?) et où, pour le coup nous nous efforcions de séparer les différents types de contenu les uns des autres proprement, le HTML5 arrive avec un grand nombre de balises venant combler ces lacunes. Free Online Real-Time HTML Editors A <b>real time HTML editor </b>is used to create websites and web pages for internet. It is possible to write HTML in almost all text editors. The benefit of having a fully featured editor of HTML is that it offers some basic features that are necessary to add functionality and convenience of web developers. These online editors offer different ways of editing and creating HTML code lines and can be easily accessible even if the developers of web is away from native PC. HTML instant is a certain type of HTML editor available online to <b>modify and create HTML content </b> for web form. Through these HTML editors selections, creation and insertion of codes, scripts and tags can be done. Be A Creative Developer Using HTML5 Tutorials  7 fautes fréquentes avec la balise TITLE (et solutions) En termes de référencement naturel la <b>balise TITLE </b> est un des grands facteurs de <b>ranking </b>. Ce petit bout de code que vous insérez dans le code source de vos pages Web a pour fonction de <b>décrire le contenu </b> de vos pages pour les potentiels visiteurs. Il est donc naturel de ne pas l’ignorer si vous souhaitez que votre site obtienne un meilleur référencement. Je vous propose aujourd’hui de voir une série de <b>fautes fréquentes </b> avec la balise TITLE. Ces fautes sont plus ou moins importantes. Chaque site Web est unique, il sera donc nécessaire d’adapter ce qui est dit dans cet article à votre site Web. liste de balises HTML Article en anglais : 21 Step-by-Step HTML5 Tutorials to Quickly Get Started HTML5 now has been utilised by many websites, either whole part or a small portion. It has been taking us to the next level of world wide web. Lots and lots of fancy websites are solely developed using HTML5 and CSS3 instead of Flash, which not only replace the old and slow Flash, also increase the semantic SEO ability. There are many changes in HTML5, especially the video and canvas markup elements. [...]

  9. [...] Lorsque l’on passe au HTML5, il devient parfois assez confus de réaliser une structure de page sémantiquement viable. Habitué auparavant au HTML4 où la confusion régnait allègrement sur les propriétés sémantique de chaque div (est-elle entrain de désigner un nouveau type de contenu ou est-elle là uniquement pour styler l’élément, la page?) et où, pour le coup nous nous efforcions de séparer les différents types de contenu les uns des autres proprement, le HTML5 arrive avec un grand nombre de balises venant combler ces lacunes. Néanmoins, le HTML5 en voulant résoudre les problèmes des versions précédentes, apporte aussi son lot de confusions, principalement pour la bonne utilisation de ses balises. Nous nous retrouvons ainsi avec des balises section, header, aside, pour la mise en forme sémantique du contenu mais sans trop comprendre à quel moment les utiliser, et surtout quelle bonne architecture adopter pour la création de ses pages.  [...]

  10. [...] Lorsque l'on passe au HTML5, il devient parfois assez confus de réaliser une structure de page sémantiquement viable. Habitué auparavant au HTML4 où la confusion régnait allègrement sur les propriétés sémantique de …  [...]

  11. [...] Lorsque l’on passe au HTML5, il devient parfois assez confus de réaliser une structure de page sémantiquement viable. Habitué auparavant au HTML4 où la confusion régnait allègrement sur les propriétés sémantique de chaque div (est-elle entrain de désigner un nouveau type de contenu ou est-elle là uniquement pour styler l’élément, la page?) et où, pour le coup nous nous efforcions de séparer les différents types de contenu les uns des autres proprement, le HTML5 arrive avec un grand nombre de balises venant combler ces lacunes. Néanmoins, le HTML5 en voulant résoudre les problèmes des versions précédentes, apporte aussi son lot de confusions, principalement pour la bonne utilisation de ses balises. Nous nous retrouvons ainsi avec des balises section, header, aside, pour la mise en forme sémantique du contenu mais sans trop comprendre à quel moment les utiliser, et surtout quelle bonne architecture adopter pour la création de ses pages.  [...]

  12. [...] Lorsque l’on passe au HTML5, il devient parfois assez confus de réaliser une structure de page sémantiquement viable. Habitué auparavant au HTML4 où la confusion régnait allègrement sur les propriétés sémantique de chaque div (est-elle entrain de désigner un nouveau type de contenu ou est-elle là uniquement pour styler l’élément, la page?) et où, pour le coup nous nous efforcions de séparer les différents types de contenu les uns des autres proprement, le HTML5 arrive avec un grand nombre de balises venant combler ces lacunes. Néanmoins, le HTML5 en voulant résoudre les problèmes des versions précédentes, apporte aussi son lot de confusions, principalement pour la bonne utilisation de ses balises. Nous nous retrouvons ainsi avec des balises section, header, aside, pour la mise en forme sémantique du contenu mais sans trop comprendre à quel moment les utiliser, et surtout quelle bonne architecture adopter pour la création de ses pages.  [...]

  13. [...] Lorsque l’on passe au HTML5, il devient parfois assez confus de réaliser une structure de page sémantiquement viable. Habitué auparavant au HTML4 où la confusion régnait allègrement sur les propriétés sémantique de chaque div (est-elle entrain de désigner un nouveau type de contenu ou est-elle là uniquement pour styler l’élément, la page?) et où, pour le coup nous nous efforcions de séparer les différents types de contenu les uns des autres proprement, le HTML5 arrive avec un grand nombre de balises venant combler ces lacunes. Néanmoins, le HTML5 en voulant résoudre les problèmes des versions précédentes, apporte aussi son lot de confusions, principalement pour la bonne utilisation de ses balises. Nous nous retrouvons ainsi avec des balises section, header, aside, pour la mise en forme sémantique du contenu mais sans trop comprendre à quel moment les utiliser, et surtout quelle bonne architecture adopter pour la création de ses pages.  [...]

  14. [...] SlapAndThink – Actualités, Conseils, Tutoriels : Web / Dev / Code…  [...]

  15. [...] Lorsque l’on passe au HTML5, il devient parfois assez confus de réaliser une structure de page sémantiquement viable. Habitué auparavant au HTML4 où la confusion régnait allègrement sur les propriétés sémantique de chaque div (est-elle entrain de désigner un nouveau type de contenu ou est-elle là uniquement pour styler l’élément, la page?) et où, pour le coup nous nous efforcions de séparer les différents types de contenu les uns des autres proprement, le HTML5 arrive avec un grand nombre de balises venant combler ces lacunes. Néanmoins, le HTML5 en voulant résoudre les problèmes des versions précédentes, apporte aussi son lot de confusions, principalement pour la bonne utilisation de ses balises. Nous nous retrouvons ainsi avec des balises section, header, aside, pour la mise en forme sémantique du contenu mais sans trop comprendre à quel moment les utiliser, et surtout quelle bonne architecture adopter pour la création de ses pages.  [...]

  16. [...] SlapAndThink – Actualités, Conseils, Tutoriels : Web / Dev / Code…  [...]

  17. [...] Lorsque l’on passe au HTML5, il devient parfois assez confus de réaliser une structure de page sémantiquement viable. Habitué auparavant au HTML4 où la confusion régnait allègrement sur les propriétés sémantique de chaque div (est-elle entrain de désigner un nouveau type de contenu ou est-elle là uniquement pour styler l’élément, la page?) et où, pour le coup nous nous efforcions de séparer les différents types de contenu les uns des autres proprement, le HTML5 arrive avec un grand nombre de balises venant combler ces lacunes. Néanmoins, le HTML5 en voulant résoudre les problèmes des versions précédentes, apporte aussi son lot de confusions, principalement pour la bonne utilisation de ses balises. Nous nous retrouvons ainsi avec des balises section, header, aside, pour la mise en forme sémantique du contenu mais sans trop comprendre à quel moment les utiliser, et surtout quelle bonne architecture adopter pour la création de ses pages.  [...]

  18. [...] Lorsque l’on passe au HTML5, il devient parfois assez confus de réaliser une structure de page sémantiquement viable. Habitué auparavant au HTML4 où la confusion régnait allègrement sur les propriétés sémantique de chaque div (est-elle entrain de désigner un nouveau type de contenu ou est-elle là uniquement pour styler l’élément, la page?) et où, pour le coup nous nous efforcions de séparer les différents types de contenu les uns des autres proprement, le HTML5 arrive avec un grand nombre de balises venant combler ces lacunes. Néanmoins, le HTML5 en voulant résoudre les problèmes des versions précédentes, apporte aussi son lot de confusions, principalement pour la bonne utilisation de ses balises. Nous nous retrouvons ainsi avec des balises section, header, aside, pour la mise en forme sémantique du contenu mais sans trop comprendre à quel moment les utiliser, et surtout quelle bonne architecture adopter pour la création de ses pages.  [...]

Laisser un commentaire