5568 sujets

Sémantique web et HTML

HTML5 structure ?

Bonjour

Comme tout le monde faut que je trifouille avec HTML5, mais c'est pas gagné Smiley sweatdrop , entre , article, header, hgroup etc...

Ben, tout sa me semble bien plus compliquer qu'avant, alors j'ai fait un petit croquis, et la structure HTML5 qui me semble correspondre avec ce croquis, au pire sa va en faire rire certains Smiley confus

Le validateur du W3C, il s'en fout, sérieusement je peux lui servir tout et n'importe quoi il me dit que c'est valide, du cout je vous demande conseille, faut-il vraiment autant de tag avec HTML5?

upload/28417-demohtml5.png 

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    
<body>
    
    <div id="wrapper">
        
        <div id="Masterleft">
            <header id="left"></header>
            <section id="secondLeft">
                <article class="textLeft">
                    <header class="titelLeft"></header>
                        <p></p>
                </article>
            </section>
            <section id="thirdLeft">
                <article class="textLeft">
                    <header class="titelLeft"></header>
                        <p></p>
                </article>
            </section>
            <section id="bottomLeft">
                <article class="textLeft">
                    <header class="titelLeft"></header>
                        <p></p>
                </article>
            </section>
        </div>
        
        <div id="Mastercenter">
            <header id="header">
                <hgroup><h1></h1></hgroup>
            </header>
            <section id="center">
                <article class="textCenter">
                    <header class="titelcenter"></header>
                    <p></p>
                </article>
                <article id="contact">
                    <form id="payment"></form>
                </article>
            </section>
        </div>
        
        <div id="MasterRight">
            <header id="right"></header>
            <section id="menu">
                <article id="MasterNav">
                    <header id="titelNav"></header>
                    <nav id="NavRight"></nav>
                </article>
            </section>
        </div>
    </div>
    
</body>    
</html>

Modifié par 3arly3F (19 Jun 2010 - 18:10)
Houlà, il y a des petits problèmes :

*<header> s'utilise de deux façons:
1. en dehors d'un <article>, c'est le header de la page (pareil pour footer), il ne peut y en avoir qu'un normalement.
2. dans un article c'est le header de l'article (pareil avec footer).
*les <article> servent à définir… des articles, les billets sur un blog par exemple.
*les sections peuvent être des sections de la page ou des sections dans un <article>

Tu peux aller voir sur mon site pour une structure de type blog (merci les forums pour le coup de main Smiley cligne ).

Il y a aussi une version en cours du nouveau design en xhtml5 (IE<=8 s'abstenir). La version xhtml5 permet (en attendant les parsers html5 dans les navigateurs), d'avoir du svg inline ou du mathml. Je te déconseille le xhtml5 pour un site pro. Smiley cligne
Modifié par Patidou (19 Jun 2010 - 18:19)
Merci pour ces infos, c'est pas du tout pour un site pro juste par curiosité personnelle.

Concernant <article> je suis un peut dans le flou, donc si j'ai bien compris, je ne me sert pas du tag <article> par exemple si je mets "bienvenu sur mon site blablabla" sur la la page index.html, plutôt de section dans ce cas?

<article> = billet dans un blog, infos, news, réponses, ce genre de chose?

Par contre jeux me servir de <section><header></header></section>,
ou <article><header></header><section></section></article>,

Par exemple cette structure.
3arly3F a écrit :
Merci pour ces infos, c'est pas du tout pour un site pro juste par curiosité personnelle.

Concernant <article> je suis un peut dans le flou, donc si j'ai bien compris, je ne me sert pas du tag <article> par exemple si je mets "bienvenu sur mon site blablabla" sur la la page index.html, plutôt de section dans ce cas?

<article> = billet dans un blog, infos, news, réponses, ce genre de chose?

Par contre jeux me servir de <section><header></header></section>,
ou <article><header></header><section></section></article>,

Par exemple cette structure.


Effectivement, comme il le dit sur HML5 Doctor, je confonds <article> avec <section> ou <div>, maintenant je confonds aussi citer et éditer Smiley rolleyes
Modifié par 3arly3F (19 Jun 2010 - 18:44)
En bref la navigation dans un <nav>, le contenu complémentaire de la page dans un <aside>. Le titre principal dans un <header>, éventuellement dans un <hgroup> si :
<header>
<hgroup>
<h1>titre</h1>
<h2>sous-titre</h2>
</hgroup>
</header>


L'article dans un <article>, son titre peut commencer sur un <h1> dans un <header> mais pour des raisons d'accessibilité, c'est mieux d'utiliser un <h2>, à l'ancienne quoi, les lecteurs d'écran ne comprennent pas encore la structure de html5.

Tu peux toujours utiliser des divs pour découper la page en zone. Les sections servent plus à découper le contenu principal amha.
Modifié par Patidou (19 Jun 2010 - 18:47)
Je vais me servir des <DIV> pour le positionnement, et <SECTION> pour les endroits qui entourent directement le contenu, et auxquelles je vais rajouter un rôle ARIA.

Et j'ai bien envie de faire un reset, bon apparemment sa pose problème coter performance de targeter avec du CSS des éléments HTML, vrai ou faut?


/* some of the HTML5 tags that should display as blocks by default */
article,
aside,
audio,
canvas,
datagrid,
datalist,
details,
dialog,
figure,
footer,
header,
menu,
nav,
section,
video {
	display: block;
}
/* some of the HTML5 tags that should display as inline text by default */
abbr,
eventsource,
mark,
meter,
time,
progress,
output,
bb {
	display:inline;
}
Sujet clos
Aller à