IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Web sémantique Discussion :

[HTML5] Page avec une seule thématique


Sujet :

Web sémantique

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2012
    Messages
    24
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Moselle (Lorraine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Septembre 2012
    Messages : 24
    Par défaut [HTML5] Page avec une seule thématique
    Bonjour à tous,
    Sur certaine page de mon site web, je n'ai qu'une seule thématique, la page entière pourrait être englobé dans la balise section. De ce fait, je ne sais pas trop qu'elle est la structure sémantiquement correct. J'ai 4 choix possibles :

    N°1

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <body>
    	<!-- header de la page -->
    	<header>
    		<h1>Mon titre</h1>
    	</header>
    	<section>
    		<article>
    			<!-- ... -->
    		</article>
    	</section>
    </body>


    N°2 :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <body>
    	<!-- header de la page -->
    	<header>
    		<!-- ... -->
    	</header>
    	<section>
    		<h1>Mon titre</h1>
    		<article>
    			<!-- ... -->
    		</article>
    	</section>
    </body>


    N°3 :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <body>
    	<section>
    		<!-- header de la page -->
    		<header>
    			<h1>Mon titre</h1>
    		</header>
    		<article>
    			<!-- ... -->
    		</article>
    	</section>
    </body>


    N°4 :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <body>
    	<!-- header de la page -->
    	<header>
    		<h1>Mon titre</h1>
    	</header>
    	<article>
    		<!-- ... -->
    	</article>
    </body>
    Pouvez vous m'aidez svp ? Merci d'avance.

  2. #2
    Membre éclairé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Décembre 2013
    Messages
    247
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Décembre 2013
    Messages : 247
    Par défaut
    Salut, si tu revoir très bien le rôle de chaque balise tu résoudra le problème.
    On met généralement le logo, le nom du site, etc... dans le header.
    le reste du contenu sera très dans la balise <section>
    Le cas N°1 est tout à fait adapté.

  3. #3
    Membre averti
    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2012
    Messages
    24
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Moselle (Lorraine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Septembre 2012
    Messages : 24
    Par défaut
    Merci de ta réponse, j'ai beau relire les spécifications de chaque balise, dans ce cas là, je n'était pas sûr à 100%.

    D'un côté, chaque page contient forcément une thématique. Il faut mettre la balise section parce que la spécification html5 l'impose mais dans la logique, elle serait inutile.

  4. #4
    Membre éclairé
    Profil pro
    Inscrit en
    Septembre 2008
    Messages
    277
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2008
    Messages : 277
    Par défaut
    Pour vérifier si ton code semble sémantique tu peux utiliser HTML 5 Outliner.

    Pour répondre à tes questions :
    The section element | HTML5 Doctor

    Mais ta question est intéressante parce qu'il est aussi possible de faire :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <section class="bloc">
        <h1>titre 2 au milieu de la page</h1>   
          <nav>
            <li><a href="#"><img src="img.jpg" alt="item 1" id="item 1"></a></li>
            <li><a href="#"><img src="img.jpg" alt="item 2" id="item 2"></a></li>
            <li><a href="#"><img src="img.jpg" alt="item 3" id="item 3"></a></li>
          </nav>    
    </section> 
     
    <section class="bloc">
        <h1>titre 3 au milieu de la page</h1>
     
        <div>
          <p>Blabla</p>
        </div>
    </section>
    Quand tu auras trouvé ce qui te convient le mieux, il serait bon de partager tes résultats ici

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 1
    Dernier message: 19/04/2012, 00h02
  2. [MySQL] Réaliser formulaire (avec une seule page) par BDD
    Par phasmagun dans le forum PHP & Base de données
    Réponses: 1
    Dernier message: 29/08/2010, 01h16
  3. Référencement avec une seule page index.php
    Par damjal dans le forum Référencement
    Réponses: 12
    Dernier message: 21/02/2007, 13h24
  4. comment remplir 2 champs avec une seule listbox
    Par Didi17 dans le forum Access
    Réponses: 3
    Dernier message: 19/10/2005, 09h42
  5. Réponses: 13
    Dernier message: 16/04/2004, 12h00

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo