Главная › Справочники › Справочник HTML 5 › Теги HTML 5 ›

aside

Элемент aside в документе HTML 5 представляет вспомогательный или дополнительный раздел страницы, содержимое которого связано с остальным контентом страницы только косвенно, и его можно рассматривать в отрыве от остального содержимого страницы. Такие разделы в типографском деле часто представлены в виде врезок или боковых колонок.

Этот элемент может быть использован для типографического эффекта в качестве врезки, для объявлений, для группировки меню и другого содержимого сайта, которое не связано с основным содержимым страницы.

Следующий пример показывает, как тег aside используется для обозначения сноски на материал о Швейцарии в большой новостной статье о Европе.

<aside>
  <h1>Switzerland</h1>
  <p>Switzerland, a land-locked country in the middle of geographic
Europe, has not joined the geopolitical European Union, though it is
a signatory to a number of European treaties.</p>
</aside>

Следующий пример демонстрирует использование тега aside для обозначения врезанной цитаты в большой статье.

...

<p>He later joined a large company, continuing on the same work.
<q>I love my job. People ask me what I do for fun when I'm not at
work. But I'm paid to do my hobby, so I never know what to
answer. Some people wonder what they would do if they didn't have to
work... but I know what I would do, because I was unemployed for a
year, and I filled that time doing exactly what I do now.</q></p>

<aside>
  <q> People ask me what I do for fun when I'm not at work. But I'm
paid to do my hobby, so I never know what to answer. </q>
</aside>

<p>Of course his work — or should that be hobby? —
isn't his only passion. He also enjoys other pleasures.</p>

...

Следующий код показывает, как можно использовать элемент aside для определения набора меню блога и другого неосновного содержимого блога:

<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>