HTML элемент aside

HTML элемент aside — Боковая панель для содержания соответствующего контента
. Все HTML элементы.

HTML элемент aside: Пример кода

 <h2>HTML элемент aside: Пример создание боковой панели</h2>
Следующий пример показывает, как используется aside для выделения справочного материала по Швейцарии в гораздо более длинном новостном материале по Европе.
<aside>
 <h2>Швейцария</h2>
 <p>государство в Западной Европе. Граничит на севере с Германией, на юге — с Италией, на западе — с Францией, на востоке — с Австрией и Лихтенштейном. Название происходит от кантона Швиц, одного из трёх первоначальных кантонов Конфедерации.</p>
</aside>


 <h2>HTML элемент aside: Пример исползования aside с цитированием</h2>
Следующий пример показывает, как используется aside для разметки цитаты в более длинной статье.
...

<p>Позднее он присоединился к большой компании, продолжая ту же работу.
<q>Я люблю свою работу. Люди спрашивают меня, чем я занимаюсь когда не работаю.
Но мне платят за хобби, поэтому я не могу им ответить.
Некоторые люди задаются вопросом, что бы они сделали, если бы им не пришлось
работать ... я знаю, что я буду делать, потому что я был безработным целый год и
заполнил это время тем, чем занимаюсь сейчас.</q></p>

<aside>
 <q> Люди спрашивают меня, чем я занимаюсь когда не работаю. Но я
   Но мне платят за хобби, поэтому я не могу им ответить</q>
</aside>

<p>Конечно, его работа (или это хобби?) - это не его единственная страсть. Он также наслаждается другими удовольствиями.</p>

...
 
 <h2>Пример aside для боковой колонки блога</h2>
 Как оформить боковую колонку блога
<body>
 <header>
 <h1>Мой замечательный блог</h1>
 <p>Моя визитная карточка</p>
 </header>
 <aside>
 <!-- Этот aside содержит два раздела, которые связаны
     с другими страницами этого блога -->
 <nav>
 <h2>Мой блог</h2>
 <ul>
 <li><a href="https://blog.example.com/">Пример блога</a>
 </ul>
 </nav>
 <nav>
 <h2>Архивы</h2>
 <ol reversed>
 <li><a href="/last-post">My last post</a>
 <li><a href="/first-post">My first post</a>
 </ol>
 </nav>
 </aside>
 <aside>
 <!-- этот aside содержит цитаты из твиттера -->
 <h2>Twitter Feed</h2>
 <blockquote cite="https://twitter.example.net/t31351234">
 Я в отпуске, пишу свой блог.
 </blockquote>
 <blockquote cite="https://twitter.example.net/t31219752">
 Я скоро пойду в отпуск.
 </blockquote>
 </aside>
 <article>
 <!-- Сообщение блога -->
 <h2>Мои поздние записи</h2>
 <p>Это моя поздняя запись.</p>
 <footer>
 <p><a href="/last-post" rel=bookmark>Ссылка</a>
 </footer>
 </article>
 <article>
 <!-- Это тоже сообщение блога -->
 <h2>Моя ранняя запись</h2>
 <p>Это моя первая запись.</p>
 <aside>
 <!-- Это относится к сообщению в блоге, поскольку оно находится внутри
       элемента <article>; -->
 <h1>Запись</h1>
 <p>Пока я об этом думаю, я хотел сказать кое-что о
         ведении дневника. Блоггер - это весело!</p>
 </aside>
 <footer>
 <p><a href="/first-post" rel=bookmark>Ссылка</a>
 </footer>
 </article>
 <footer>
 <nav>
 <a href="/archives">Архивы</a> — <a href="/about">Обо мне</a> — <a href="/copyright">Copyright</a>
 </nav>
 </footer>
</body>

HTML элемент aside: атрибуты

globals