5568 sujets

Sémantique web et HTML

Structure page HTML5 ? J'ai bon ?

Bonjour à tous,

Je réalise mon premier site internet en HTML5 et j'ai un peu de mal avec les balises <section> et <article>, j'aurai voulu savoir si mon code est bon ou pas...

Merci !

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Document sans nom</title>
</head>

<body>
<div style="color:#999; font-size:10px;">megabanner</div>
<header>
	<h1>Titre header</h1>
	<div id="logo"></div>
	<nav><h1>Titre nav</h1></nav>
</header>

<section>
	<h1>titre section</h1>
    <article>
		<h1>titre article 1</h1>
	</article>
    <article>
		<h1>titre article 2</h1>
		<nav><h1>nav article 2</h1></nav>
	</article>
	<aside>
		<h1>titre aside 1</h1>
		<article>
			<h1>titre aside 1 article 1</h1>
			<article><h1>titre aside 1 article 1 article 1</h1></article>
			<aside><h1>titre aside 1 article 1 aside 1</h1>
				<article><h1>titre aside 1 article 1 aside 1 article 1</h1></article>
				<article><h1>titre aside 1 article 1 aside 1 article 2</h1></article>
				<article><h1>titre aside 1 article 1 aside 1 article 3</h1></article>
				<article><h1>titre aside 1 article 1 aside 1 article 4</h1></article>
				<article><h1>titre aside 1 article 1 aside 1 article 5</h1></article>
				<article><h1>titre aside 1 article 1 aside 1 article 6</h1></article>
			</aside>
		</article>
	</aside>
	<div style="color:#999; font-size:10px;">Prix</div>
	<aside><h1>titre aside 2</h1>
    	<nav><h1>titre aside 2 nav 1</h1></nav>
    </aside>
	<article><h1>titre article 3</h1>
    </article>
	<aside><h1>titre aside 3</h1>
    	<article><h1>titre aside 3 article 1</h1></article>
        <article><h1>titre aside 3 article 2</h1></article>
    </aside>
	<article><h1>titre article 4</h1>
    </article>
	<aside><h1>titre aside 4</h1>
    	<article><h1>titre aside 4 article 1</h1></article>
        <article><h1>titre aside 4 article 2</h1></article>
    </aside>    
	<article><h1>titre article 5</h1>
    	<article><h1>titre article 5 article 1</h1></article>
        <article><h1>titre article 5 article 2</h1></article>
    </article>
	<article><h1>titre article 6</h1>
    	<article><h1>titre article 6 article 1</h1></article>
        <article><h1>titre article 6 article 2</h1></article>
        <article><h1>titre article 6 article 3</h1></article>
        <article><h1>titre article 6 article 4</h1></article>
    </article>
	<div style="color:#999; font-size:10px;">Links</div>
</section>

<div style="color:#999; font-size:10px;">pub</div>

<footer><h1>Footer</h1></footer>


</body>
</html>



Merci à tous!
Servalone.
Vu que tu as mis du contenu qui n'a aucun sens c'est un peu dur de dire si les choix sémantiques sont correctes ou pas...
Salut à toi,
Les balises sembles bien placé si c'est ce que tu souhaite savoir..
Si je peut te donner un conseil que ce soit en html4, 5 ou autre ^^' prend l'habitude de séparer ton code html de ton code css.

page.html > tout ton contenu html
page.css > tout tes codes de styles ( css ).
Perso, je ne pense pas que tu ais besoin d'autant de balises <article> et Google n'aimera pas voir autant de H1 sur ta page. Déjà pas sûr qu'ils soient indispensables dans tes <nav> et <footer> mais comme dit précédemment, difficile de juger sans contenu concret.
Merci pour vos premiers éléments de réponses.

Concernant la séparation des fichiers html et css, oui je connais pas de soucis ^^, dans mon exemple c'était pour aller à l'essentiel...

Je vais reposter avec un contenu plus "parlant" :


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Document sans nom</title>
<link href="css/styles.css" rel="stylesheet">
</head>

<body>
<p>&nbsp;</p>
<div class="red">megabanner</div>
<header>
	<div id="logo"><h1><img src="logo.png" alt="logo" title="logo" /></h1></div>
	<nav>
    	<ul>
        	<li>menu 1</li>
            <li>menu 2</li>
            <li>menu 3</li>
        <ul>
    </nav>
</header>

<section>
	<h1>titre section</h1>
    <article>
		<h1>titre article 1</h1>
        <p>Bla bla bla...</p>
	</article>
    <article>
		<h1>titre article 2</h1>
        <p>Bla bla bla...</p>
		<nav>
    	    <ul>
        		<li>menu 2.1</li>
            	<li>menu 2.2</li>
            	<li>menu 2.3</li>
        	<ul>
         </nav>
	</article>
	<aside>
		<h1>titre aside 1</h1>
		<article>
			<h1>titre aside 1 article 1</h1>
            <p>Bla bla bla...</p>
			<article>
            	<h1>titre aside 1 article 1 article 1</h1>
            	<p>Bla bla bla...</p>
            </article>
			<aside><h1>titre aside 1 article 1 aside 1</h1>
				<article><h1>titre aside 1 article 1 aside 1 article 1</h1><p>Bla bla bla...</p></article>
				<article><h1>titre aside 1 article 1 aside 1 article 2</h1><p>Bla bla bla...</p></article>
				<article><h1>titre aside 1 article 1 aside 1 article 3</h1><p>Bla bla bla...</p></article>
				<article><h1>titre aside 1 article 1 aside 1 article 4</h1><p>Bla bla bla...</p></article>
				<article><h1>titre aside 1 article 1 aside 1 article 5</h1><p>Bla bla bla...</p></article>
				<article><h1>titre aside 1 article 1 aside 1 article 6</h1><p>Bla bla bla...</p></article>
			</aside>
		</article>
	</aside>
	<div  class="red">Prix</div>
	<aside><h1>titre aside 2</h1>
    	<nav>
            <ul>
        		<li>menu 3.1</li>
            	<li>menu 3.2</li>
            	<li>menu 3.3</li>
        	<ul>
        </nav>
    </aside>
	<div class="red">Links</div>
</section>

<div class="red">pub</div>

<footer><h1>Footer</h1></footer>


</body>
</html>


Les balises H1 sont là pour tester "outline", il n'y en aura pas autant au final.

J'essaie surtout de comprendre la façon dont <article> et <section> interagissent entre eux.

Servalone.
Modifié par servalone (09 Jul 2013 - 16:30)
Administrateur
En très gros : il n'y a pas de structure ultime à respecter, chaque balisage doit s'adapter à son contenu. Il faut éviter la sectionnite. J'aurais peut-être sorti les aside de la section principale qui semble déjà disposer d'articles, enfin tout dépend de leur rôle.
Sujet clos
Aller à