5568 sujets

Sémantique web et HTML

Html5 : Sémantique ( balise section )

Bonjour,

Je conçois une page de contact mais j'ai quelques doutes sur le balisage de la page que voici .

Je crée tout d'abord une grosse section ( contact ) qui contient deux sous sections ( contact-details & contact-form ) .

Puis je crée à nouveau d'autres sous sections dans ( contact-details ), qui contiennent des informations annexes comme l'adresse les horaires d'ouverture etc ..

Que pensez vous de ce balisage ? Ya t'il forcement besoin, ou pas, d'autant de séparation ( sémantique ).

-------

J'avais pensé aussi à enlever la section ( contact-details ) et la remplacer par un Aside puis remplacer les sections enfants par des div .

Je vous remercie par avance Smiley smile .


<main>
		<section class="container contact">

			<section class="contact-details">

				<section id="contact-postal-address"></section>

				<section id="contact-opening-hours"></section>

			</section>

			<section class="contact-form"></section>

		</section>
</main>
Effectivement il y a un soucis : les balises sections sont faites pour délimiter des espaces. Or dans ce cas précis il n'y a aucun changement de thématique sur la page. Les sections ne sont donc pas pertinentes ici et doivent être remplacées par des <div>.
On peut garder un sens sémantique de part l'utilisation de la balise <adress> en tant que container.

Je vois bien ça en lieu et place de Section.contact-details.
Modifié par Greg_Lumiere (25 Mar 2016 - 13:17)
On peut aussi baliser son html de manière très fine avec les Microdata.

Exemple pour address :
<div itemscope itemtype="http://schema.org/Organization">
  <span itemprop="name">Google.org (GOOG)</span>
Contact Details:
  <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    Main address:
      <span itemprop="streetAddress">38 avenue de l'Opera</span>
      <span itemprop="postalCode">F-75002</span>
      <span itemprop="addressLocality">Paris, France</span>
    ,
  </div>
    Tel:<span itemprop="telephone">( 33 1) 42 68 53 00 </span>,
    Fax:<span itemprop="faxNumber">( 33 1) 42 68 53 01 </span>,
    E-mail: <span itemprop="email">secretariat(at)google.org</span>
Members:
- National Scientific Members in 100 countries and territories: Country1, Country2, ...
- Scientific Union Members, 30 organizations listed in this Yearbook:
List of Alumni:
 <span itemprop="alumni" itemscope itemtype="http://schema.org/Person">
   <span itemprop="name">Jack Dan</span>
 </span>,
 <span itemprop="alumni" itemscope itemtype="http://schema.org/Person">
   <span itemprop="name">John Smith</span>
 </span>,
History:
</div>

Voir sur schema.org
Bonjour,

Merci pour vos réponses Smiley smile .

Greg_Lumiere :

<address> n'ai pas faite pour ça selon le w3c ...
Je mis à la place des microdatas, bien plus fin du coup en terme de pertinence .

Olivier C :

Du coup il faudrait plus quelque chose comme sa :


<main>
    <section class="map"></section>

    <section class="contact"></section>

    <section class="autre thématique"></section>
</main>
Unk a écrit :
address n'ai pas faite pour ça selon le w3c ...
Je mis à la place des microdatas, bien plus fin...

Les balises html et les microdata sont complémentaires. Ce n'est pas du tout la même chose. Mais il suffit de se documenter en lisant les spécifications.
Sujet clos
Aller à