Najlepsze znaczniki HTML5 dla paska bocznego

Question

Najlepsze znaczniki HTML5 dla paska bocznego

Konfiguruję moje paski boczne WordPress dla motywu HTML5 i naprawdę chcę używać before_widget i after_widget prawo.

Moje pytanie Jest Takie: który z dwóch wzorców znaczników jest bardziej odpowiedni? Poniższy kod jest całkowicie poza elementem <article>.

Opcja 1: poza sekcjami

<aside id="sidebar">
    <section id="widget_1"></section>
    <section id="widget_2"></section>
    <section id="widget_3"></section>
</aside>

Opcja 2: Div z Asides

<div id="sidebar">
    <aside id="widget_1"></aside>
    <aside id="widget_1"></aside >
    <aside id="widget_1"></aside >
</div>

Przypuszczam, że pomocnicze pytanie brzmi, co nagłówek użyć dla każdego tytułu widgetu. Jeśli zawijam każdy widget w a <section> wtedy <h1> wydaje się Najbardziej odpowiednie. Jeśli używam <aside>, nie jestem pewien.

Wszystkie opinie mile widziane. Zwolennicy diabła zachęcani.

66

html semantic-markup

Author: Braiam, 2011-12-06

Source

6 answers

Update 17 / 07 / 27: ponieważ jest to najczęściej głosowana odpowiedź, powinienem ją zaktualizować, aby zawierała aktualne informacje lokalnie(z linkami do odnośników).

Od spec ^[1]:

Element obok reprezentuje sekcję Strony, która składa się z treści, które są stycznie związane z treścią wychowywania sekcjonowanie treści, a które można uznać za odrębne od tego treść. Takie sekcje są często reprezentowane jako sidebars in printed typografia.

Świetnie! Dokładnie tego szukamy. Ponadto najlepiej sprawdzić również <section>.

Element section reprezentuje ogólną sekcję dokumentu lub podanie. Sekcja w tym kontekście jest grupowaniem tematycznym treść. Każda sekcja powinna być zidentyfikowana, zazwyczaj poprzez włączenie nagłówek (element h1-h6) jako potomek elementu sekcji.

...

Ogólna zasada jest taka, że sekcja element jest odpowiedni tylko wtedy, gdy jego zawartość byłaby wyraźnie wymieniona w zarysie dokumentu.

Doskonale. Właśnie tego szukamy. W przeciwieństwie do <article> ^[2]<section> pozwala na powiązane treści, które nie są samodzielne lub wystarczająco ogólne dla elementu <div>.

Jako takie, spec wydaje się sugerować, że użycie opcji 1, <aside> z <section> dziećmi jest najlepsze praktyka.

Referencje

25

Author: David Bradbury,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-26 20:40:58

Spójrz na poniższy przykład ze specyfikacji HTML5 o aside.

Wyjaśnia, że obecnie (październik 2012) zaleca się grupowanie widżetów wewnątrz elementów aside. Następnie każdy widget jest tym, co najlepiej go reprezentuje, nav, serie blockquotes itp

Poniższy Wyciąg pokazuje jak można używać blogrolli i inne strony na blogu:

<body>
 <header>
  <h1>My wonderful blog</h1>
  <p>My tagline</p>
 </header>
 <aside>
  <!-- this aside contains two sections that are tangentially related
  to the page, namely, links to other blogs, and links to blog posts
  from this blog -->
  <nav>
   <h1>My blogroll</h1>
   <ul>
    <li><a href="http://blog.example.com/">Example Blog</a>
   </ul>
  </nav>
  <nav>
   <h1>Archives</h1>
   <ol reversed>
    <li><a href="/last-post">My last post</a>
    <li><a href="/first-post">My first post</a>
   </ol>
  </nav>
 </aside>
 <aside>
  <!-- this aside is tangentially related to the page also, it
  contains twitter messages from the blog author -->
  <h1>Twitter Feed</h1>
  <blockquote cite="http://twitter.example.net/t31351234">
   I'm on vacation, writing my blog.
  </blockquote>
  <blockquote cite="http://twitter.example.net/t31219752">
   I'm going to go on vacation soon.
  </blockquote>
 </aside>
 <article>
  <!-- this is a blog post -->
  <h1>My last post</h1>
  <p>This is my last post.</p>
  <footer>
   <p><a href="/last-post" rel=bookmark>Permalink</a>
  </footer>
 </article>
 <article>
  <!-- this is also a blog post -->
  <h1>My first post</h1>
  <p>This is my first post.</p>
  <aside>
   <!-- this aside is about the blog post, since it's inside the
   <article> element; it would be wrong, for instance, to put the
   blogroll here, since the blogroll isn't really related to this post
   specifically, only to the page as a whole -->
   <h1>Posting</h1>
   <p>While I'm thinking about it, I wanted to say something about
   posting. Posting is fun!</p>
  </aside>
  <footer>
   <p><a href="/first-post" rel=bookmark>Permalink</a>
  </footer>
 </article>
 <footer>
  <nav>
   <a href="/archives">Archives</a> —
   <a href="/about">About me</a> —
   <a href="/copyright">Copyright</a>
  </nav>
 </footer>
</body>

11

Author: Waiting for Dev...,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-06 09:32:40

Bazując na tym diagramie HTML5 , myślę, że to może być najlepszy znacznik:

<aside class="sidebar">
    <article id="widget_1" class="widget">...</article>
    <article id="widget_2" class="widget">...</article>
    <article id="widget_3" class="widget">...</article>
</aside> <!-- end .sidebar -->

Myślę, że jest jasne, że {[1] } jest odpowiednim elementem, o ile jest poza głównym <article> elementem.

Teraz myślę, że <article> jest również odpowiedni dla każdego widgetu na boku. W słowa W3C :

Element artykułu reprezentuje samodzielną kompozycję w dokumentu, strony, aplikacji lub witryny, a więc w zasada, niezależnie dystrybuowalne lub wielokrotnego użytku, np. w syndykacji. To może to być post na forum, artykuł w magazynie lub gazecie, wpis na blogu, komentarz użytkownika, interaktywny widget lub gadżet, lub dowolny inny niezależny element treści.

7

Author: mrwweb,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-04-19 19:19:31

Książka HTML5 Guidelines for Web Developers: Structure and semantic for Documents zasugerowała ten sposób (Opcja 1):

<aside id="sidebar">
    <section id="widget_1"></section>
    <section id="widget_2"></section>
    <section id="widget_3"></section>
</aside>

Wskazuje również, że możesz używać sekcji w stopce. Tak więc sekcja może być używana poza rzeczywistą zawartością strony.

2

Author: alds,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-07-24 20:11:56

Bok został od tego czasu zmodyfikowany tak, aby zawierał również treści wtórne.

HTML5 Doctor ma świetny writeup na to tutaj: http://html5doctor.com/aside-revisited/

Fragment:

Z nową definicją pomijania, ważne jest, aby pozostać świadomym jego kontekstu. >W przypadku użycia w elemencie artykułu, zawartość powinna być konkretnie związana >z tym artykułem (np. słowniczek). W przypadku użycia poza elementem artykułu, zawartość >powinna odnosić się do witryna (np. blogroll, grupy dodatkowe > nawigacja, a nawet Reklama, jeśli ta treść jest związana ze stroną).

0

Author: Kray,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-19 00:14:34

score 61 · Accepted Answer

Pierwsza ze wszystkich stron ma być używana tylko do oznaczania zawartości powiązanej z treścią główną, a nie do ogólnego paska bocznego. Drugi , po jednym tylko dla każdego paska bocznego

Będziesz miał tylko jeden bok dla każdego paska bocznego. Elementy paska bocznego są div lub sekcje wewnątrz boku.

Wybrałbym Wariant 1: pomijając sekcje

<aside id="sidebar">
    <section id="widget_1"></section>
    <section id="widget_2"></section>
    <section id="widget_3"></section>
</aside>

Oto spec https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside

Ponownie użyj sekcji tylko jeśli mają nagłówek lub footer w nich, w przeciwnym razie użyj zwykłego div.