5568 sujets

Sémantique web et HTML

Mise en place de mon blog en HTML5

Bonjour à toutes et tous Smiley cligne

Je voudrais faire en sorte de mettre mon blog en HTML5, j'ai donc fais un petit croquis pour voir comment j'allais disposer les pages.

J'ai fais pour l'instant la page blog, qu'en pensez-vous ?

Ah oui, je n'ai pas mis ( je ne sais pas si je le ferais après coup ) de footer, est-ce grave ?

http://i46.servimg.com/u/f46/11/06/60/26/schama12.jpg


Merci d'avance et bonne journée.

Marc Smiley lol
Modifié par marc.suisse (31 Jul 2012 - 16:05)
Remplace div#articles par section#articles non ?

tu as une balise header par fermée dans ton document dans la section articles
Bonjour,
Les couleurs me semble un peu flashy, mais pourquoi pas... (Ok, je sors...)

Que vas-tu mettre dans nav que tu ne mettras pas dans ton aside qui semble te servir de menu ?
Et inversement ?

Sinon, pour le footer, pour ma part, je ne pense pas que ce soit obligatoire...
Bonjour Smiley cligne

SuperMerguez a écrit :
Remplace div#articles par section#articles non ?


Justement, je n'étais pas sûr de moi en utilisant la balise section, elle me semble floue à utiliser...

SuperMerguez a écrit :
tu as une balise header par fermée dans ton document dans la section articles


Ah oui merci !

Gothor a écrit :
Les couleurs me semble un peu flashy, mais pourquoi pas... (Ok, je sors...)


Au moins cela attire l'attention Smiley lol

Gothor a écrit :
Que vas-tu mettre dans nav que tu ne mettras pas dans ton aside qui semble te servir de menu ?
Et inversement ?


Le nav correspond au menu principal permettant de naviguer entres les 3 pages principales de mon blog, c'est à dire index.php ( présentation ), blog.php et contact.php.

Le sous-menu contiendra mécanique-informatique-électronique-divers qui dirigeront vers une page menu.php, un système d'ancres permettra d'arriver au bon endroit de la page.

Ok pour le footer !
Bonjour,

C'est pas mal.

Moi, je sortirais la nav du header (qui contiendrait donc juste le titre du site et une éventuelle tag-line).

+1 pour les section. Oui, leur utilisation est très floue, mais là ça "colle".
Salut Laurie-Anne, je te remercie pour ton avis Smiley cligne

Je lisais hier soir une partie du livre HTML5 de Dew et il préconise de mettre <nav> dans le header.

Pour l'instant cela donne ceci :

http://i46.servimg.com/u/f46/11/06/60/26/blog13.jpg 

<header>
		<div class="gauche_header">
		
			<h1><a href="">Marc Schaefges</a></h1>
			<h2 class="titre">Bienvenue chez moi...</h2>
			
		</div>
		
		<div class="droite_header">
		
		<nav class="menu_principal" role="navigation">

		  <ul>
			<li><a href="accueil.php" class="actuel">Accueil</a></li>
			<li><a href="blog.php" >Blog</a></li>
			<li><a href="contact.php">Contact</a></li>
		  </ul>
		  
		</nav>
			<img class="voiture" src="images/nissan.png" alt="image d'une voiture" />
		
		</div>
	</header>


Le header est en display:table et les 2 div ( gauche et droite ) sont en display:table-cell

En ce qui concerne la balise <section>, toujours dans le livre de Dew, il dit que l'on peut mettre plusieurs articles dans une balise comme celle-là, donc à la place de la <div=id"articles"> de mon exemple, mais je me demande s'il ne faut pas que chaque article traite d'un même sujet ou catégorie, alors que dans mon cas, cela ne sera pas le cas...
SuperMerguez a écrit :
Remplace div#articles par section#articles non ?

+1. On pourrait même utiliser des landmark roles :

<section role="main" id="articles">
	<article role="article">
		…
	</article>
</section>

Modifié par Muchos (06 Aug 2012 - 02:40)
Salut, merci pour ta réponse Smiley cligne

Oui, j'y ai bien pensé, mais encore une fois, faut-il que chaque article contenu dans la balise section traite du même sujet ou pas nécessairement ?

Bonne remarque pour les landmark roles, merci Smiley lol
Salut,

Perso, je ferais plus light.
Suppression des balises et attributs superflus et passage des images décoratives en background...


<header>
  <hgroup>
    <h1><a href="">Marc Schaefges</a></h1>
    <h2>Bienvenue chez moi...</h2>
  </hgroup>
  <nav role="navigation">
    <ul>
      <li><a href="accueil.php" class="actuel">Accueil</a></li>
      <li><a href="blog.php" >Blog</a></li>
      <li><a href="contact.php">Contact</a></li>
    </ul>	  
  </nav>
</header>


tm
Bonjour à vous Smiley cligne

En fait, j'ai peur que cela ne fonctionne pas, car j'avais placé exprès les DIV pour permettre une mise en page en tableau ( css bien évidemment ).
marc.suisse a écrit :
Bonjour à vous Smiley cligne

En fait, j'ai peur que cela ne fonctionne pas, car j'avais placé exprès les DIV pour permettre une mise en page en tableau ( css bien évidemment ).


Le balisage suggéré devrait fonctionner, pour le header du moins ;-p
Nombre d'éléments suffisants (hgroup à gauche, nav à droite), sélecteurs avec des éléments en lieu et place des class et id (genre body > header hgroup) et images en background.

Même résultat avec une structure plus légère et un chouia de sémantique en plus...
tm
Sujet clos
Aller à