Semantyka w 2-kolumnowym layoucie

0

Witam,
Napisałem 2-kolumnowy płynny layout. Tutaj jest kod HTML:

<body>
   <div id="container">
	   <header>
	      <div id="header">
	         sadfsdf
	      </div>
	   </header>
	   <nav>
	      <div id="nav">
	         gdfsgf
	      </div>
	   </nav>
	   <article>
	      <div id="article">
	         gdffgdg
	      </div>
	   </article>
	   <footer>
	      <div id="footer">
	         gdfsgf
	      </div>   
	   </footer>
   </div>
</body>

Mam kilka pytań odnośnie semantyki:

  1. Czy warto używać znacznika BODY jako kontenera? Pytam ogólnie, nie tylko na moim przykładzie, w layoutach płynnych i z określoną szerokością.
  2. Czy warto używać tych wewnętrznych div'ów (w header, nav, ...)? Są tam po to, żeby spokojnie określać padding, margins, itp bez dbania o ciągłe zmniejszanie szerokości.

Co jest lepsze/częściej wykorzystywane? Trochę brzydszy kod i potem spokój, czy ładniejszy i krótszy kod i dbanie o width?

  1. Jaki znacznik z HTML5 byłby najbardziej odpowiedni dla tych wewnętrznych div'ów? Section? Może aria-roles?
0

Ad. 1)
Chyba nie rozumiem pytania. <body> i tak będziesz miał i tak. Jeśli pytasz o to, czy masz tam wstawić na siłę

, to nie -- jest to nieeleganckie i po prostu głupie, samo z siebie. Dodatkowe kontenery wstawiaj, gdy masz jakiś konkretny powód związany ze stylowaniem (niestety, zdarza się). <body> styluj tak jak inne rzeczy.</p>

Ad. 2)
Zależy od konkretnego przypadku, ale IMO lepiej nie spamować <divami>. Utrzymywalność ma duże znaczenie, ale przeliczenie wartości width/padding w jednym miejscu to nie tragedia. Gorzej gdybyś np. dodatkowo musiał zmienić jednocześnie jakieś ujemne marginesy elementów-dzieci, a także dopełnienia ich dzieci. Wtedy byłby to upierdliwy problem z utrzymaniem.

Pamiętaj też, że masz box-sizing: border-box; z CSS. Może przeglądarki, na których Ci zależy akurat to wspierają? Wtedy problem width/padding odchodzi.

Wyjątkiem jest sytuacja, w której absolutnie zależy nam na tym, by layout dobrze wyglądał w IE <= 8 przy wyłączonych skryptach. Wtedy nie mamy możliwości stylowania nowych elementów z HTML-a 5 i musimy otaczać je np.

ami (lub umieszczać
y w środku).</p>

Ad. 3)
Absolutnie nie wolno spamować <section>ami gdy chodzi nam tylko o prezentację. Tj. gdy chcemy mieć kontener ułatwiający stylowanie, użyjmy

. Zbędne <section> wprowadza zamęt w outlinie dokumentu!</p>

Aria-roles nie mają żadnego zastosowania w przypadku elementów prezentacyjnych tego typu. Jak już, można nadać role elementom semantycznym. Ale zauważ, że niektóre elementy już mają wbudowaną domyślną rolę ARIA. Np. element ma automatycznie rolę "link" i dodanie atrybutu z taką rolą nie daje NIC. Z drugiej strony, element <nav> ma domyślnie rolę "navigation", ale czytniki ekranu obecnie gorzej wspierają HTML5 niż ARIA, więc tutal dodanie role mogłoby pomóc użytkownikom niektórych czytników.

1 użytkowników online, w tym zalogowanych: 0, gości: 1