5568 sujets

Sémantique web et HTML

Les "float" sont-ils les ennemis de la sémantique ?

Bonjour,

Si j'ai bien tout compris, une page bien structurée d'un point de vue sémantique s'appuie sur un bon ordonnancement du contenu.

Les éléments flottants 
 float: left;
sont-ils donc bien appropriés pour la sémantique vu qu'ils sont positionnés dans le flux ?

Merci.
Modifié par pan (22 Feb 2010 - 13:06)
Bonjour,

Même si je ne suis pas aussi experte en sémantique que Florent (qui pourra surement compléter ma réponse), je pense effectivement que tu as mal compris.

La sémantique ne concerne pas vraiment l'ordonnancement mais le balisage.

En général quand on parle de sémantique HTML, le rendu modifié par CSS ne compte pas.
?????

Sémantique, c'est le "sens" des éléments de la structure (une liste pour une liste, etc.).
Le positionnement en flottant, c'est de la présentation.

Les deux (structure et présentation) sont censés être indépendants, donc ne mélangeons pas tout.

Après, que les éléments de la structure d'une page soient dans un ordre correct (bien ordonnés si tu préfères) hors présentation, ça c'est plutôt normal et fortement souhaitable, effectivement. Smiley smile

Un élément peut être positionné comme flottant et s'inscrire parfaitement dans l'ordre de la page.
Ex. : une image flottante (à gauche) pour illustrer un article (à droite).

C'est plus clair ?
Modifié par Nico3333fr (22 Feb 2010 - 13:56)
Sans revenir sur la différence entre sémantique et mise en forme, bien rappelée ci-dessus, il y a quand même des cas où, en effet, l'utilisation un peu irréfléchie des flottants conduit à produire une mauvaise structure.

Le cas-type: une date ou une icône ferrée à droite de chaque titre de section. Spontanément, beaucoup d'intégrateur vont mettre cette date ou cette icône avant le titre dans l'ordre du code HTML, pour la faire flotter à droite... Or, si elle se rapporte au contenu de la section, elle doit être après son titre.
Modifié par Laurent Denis (22 Feb 2010 - 14:31)
Oui en fait ma question est bien mal posée Smiley lol

Ce que je voulais dire : une bonne présentation serait de structurer le code html comme : 

<h1>Tralala</h1>
<h2>Pouet pouet</h2>
<p>Bla bla bla</p>

le tout en haut de page.
Ensuite devrait venir (par exemple dans une boutique) la zone d'identification, le moteur de recherche etc...

Et ceci, je ne vois pas comment c'est possible avec des éléments positionnés en flottants...
J'espére que je suis clair Smiley ohwell 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Accueil — Mon site à moi</title>
    
</head>

<body>
    <div id="wrapper">
        <div id="header">
            <p id="prelude"><a href="#content">Aller au contenu</a> | <a href="#menu">Aller au menu</a></p>
            <h1>Mon site à moi</h1>
            <div id="navbar">
                <ul>
                    <li><a href="/forum/">Forum</a></li>
                    <li><a href="/a-propos/">À propos</a></li>
                </ul>
            </div>
        </div>
        <div id="content">
            <h2>Contenu de la page d'accueil</h2>
            <p>Blabalabla</p>
            <h3>1er sous-titre</h3>
            <p>Blabalabla</p>
            <p>Blabalabla</p>
            <h3>2e sous-titre</h3>
            <p>Blabalabla</p>
            <p>Blabalabla</p>
            <p>Blabalabla</p>
            <p>Blabalabla</p>
            
        
        </div>
        <div id="menu">
            <h2>Rubriques</h2>
            <ul>
                <li><a href="">Rubrique1</a></li>
                <li><a href="">Rubrique2</a></li>
                <li><a href="">Rubrique3</a></li>
                <li><a href="">Rubrique4</a></li>
                <li><a href="">Rubrique5</a></li>
                <li><a href="">Rubrique6</a></li>
                <li><a href="">Rubrique7</a></li>
                <li><a href="">Rubrique8</a></li>
            </ul>
        </div>
        <hr id="separator"  />
        <div id="footer">
            <address>Copyright Pan™®©</address>
        </div>
    </div>
</body>
</html>


Css :

  
        body {
            font-size: 90%;
            font-family: verdana, arial, helvetica, sans-serif;
        }
        #wrapper {
            width: 760px;
            margin: 100px auto ;
            border: #000 solid 1px;
            
        }
        #content {
            float: left;
            width: 600px;
        }
        #separator {
            clear: both;
        }


Par exemple. Sinon il y a des gabarits tout faits sur ce site. Smiley smile
pan a écrit :
je ne vois pas comment c'est possible avec des éléments positionnés en flottants...

Rien ne t'oblige à utiliser uniquement le positionnement flottant. Smiley smile

pan a écrit :
J'espére que je suis clair Smiley ohwell

Pas tout à fait. Ton exemple est encore trop vague pour qu'on puisse se prononcer.

Patidou a écrit :
Sinon il y a des gabarits tout faits sur ce site.

D'ailleurs ils sont absolument magnifiques.
C'est que pour moi la sémantique est difficile à mettre en œuvre...

Quand je monte un site, je le fais dans le sens "topographique" c'est à dire dans le sens de la lecture : de gauche à droite, de haut en bas. Dans un pareil cas, on peut tout faire avec des éléments positionnés en float.

Aujourd'hui j'essaie de changer et d'avoir une approche plus sémantique (et aussi + orientée référencement) en essayant de structurer le contenu, de mettre le plus important en début de page et de baliser le tout sémantiquement.
Du coup je me retrouve avec :

=> un (ou des) titre(s)
=> un ou une liste (navigations)
=> du contenu
=> des navigations secondaires
=> un contenu secondaire
=> des éléments secondaires (parfois en haut de page => login, newsletter etc)

D'où ma première réflexion où il était difficilement possible de réaliser un tel balisage sans éléments positionnés (en relatif/absolu).

Ma démarche est-elle correcte ou est-ce que je perd mon temps ?
Modifié par pan (22 Feb 2010 - 18:05)
L'exenple que je t'ai donné est correct, en fait c'est le genre de structure que l'on retrouve un peu partout (blog, etc). Il manque juste le formulaire de recherche que on pourrait mettre avec les rubriques et un lien d'évitement pour un accès direct.

Une version plus élaborée

Sinon tu peux aller voir le code de mon site mais c'est plus compliqué Smiley smile
pan a écrit :
Quand je monte un site, je le fais dans le sens "topographique" c'est à dire dans le sens de la lecture : de gauche à droite, de haut en bas. Dans un pareil cas, on peut tout faire avec des éléments positionnés en float.

C'est pas plus mal comme ça.

pan a écrit :
Aujourd'hui j'essaie de changer et d'avoir une approche plus sémantique

Voir les éléments sectionnants (SECTION et compagnie) en HTML5 si tu veux découper ta page en tranches de contenus semi-isolées. Pas d'intérêt concret pour l'instant, mais qui sait, à l'avenir (si la spec ne change pas dramatiquement)...

En HTML4, tu peux te contenter d'aboutir à un plan du document cohérent. Pas parfait ou idéal ou bla bla bla, mais juste cohérent. Smiley smile

pan a écrit :
(et aussi + orientée référencement)

À ma connaissance le principe de mettre le contenu principal en tout premier dans le code HTML n'est pas prouvé, voire pas fondé du tout. Les moteurs de recherche sont parfaitement capables de repérer ce qui est un contenu textuel et ce qui est du domaine de la navigation ou des éléments «périphériques», du moins pour une majorité de cas de figure. Ils sont confrontés à des millions de sites où le contenu principal d'une page est précédé de quelques babioles et d'une navigation plus ou moins conséquente, ils ont donc appris à y retrouver leurs petits.

J'éviterais de mettre le boxon dans mon code et de flinguer l'accessibilité de mon site en suivant des conseils peu ou pas fondés. Dis-je juste comme ça en passant.

pan a écrit :
D'où ma première réflexion où il était difficilement possible de réaliser un tel balisage sans éléments positionnés (en relatif/absolu).

C'est au contraire plutôt simple avec du positionnement absolu. Par contre gros risque pour l'accessibilité du site avec ce genre de mise en page (à voir en détail, bien sûr, chaque cas étant particulier).

pan a écrit :
Ma démarche est-elle correcte ou est-ce que je perd mon temps ?

C'est un bon exercice de positionnement CSS. C'est mieux si ça reste un exercice.
Administrateur
pan a écrit :
Les éléments flottants 
 float: left;
sont-ils donc bien appropriés pour la sémantique vu qu'ils sont positionnés dans le flux ?

Euh c'est l'inverse float = hors du flux Smiley confused
Sujet clos
Aller à