HTML5.Урок #4. Элементы article,section и aside

by @html_books
HTML5.Урок #4. Элементы article,section и aside

Элемент <article>

Элемент article представляет автономный, независимый контент, который может использоваться и распространяться отдельно от своей страницы или сайта. Это может быть сообщение на форуме, журнал или статья из газеты или блога, комментарий, интерактивный виджет или гаджет или любой другой независимый элемент контента. Элемент <article> заменил элемент <div>, широко использовавшийся в HTML4 вместе с атрибутами id или class.

<article> 
   <h1>Заголовок статьи</h1> 
   <p>Содержимое элемента article</p>
</article>

Элемент <article> можно помещать внутрь другого элемента <article>. Такой вложенный элемент представляет контент, связанный с элементом снаружи. Например, комментарии к статье в блоге могут быть элементами <article>, вложенными в другой элемент <article>, который представляет саму статью.



Элемент <section>

Элемент <section> - это логический контейнер страницы или статьи. С его помощью содержимое элемента article разбивается на блоки, или разделы. Домашняя страница, к примеру, может содержать: раздел с представлением компании, раздел с новостями и ещё один раздел с контактами. Каждый блок <section> должен быть правильно указан: обычно проставляются теги заголовка (h1-h6), которые оформляются как его дочерние элементы.

<article>
   <h1>Добро пожаловать!</h1>
   <section>
      <h1>Заголовок</h1>
      <p>Некоторый контент</p>
</section>
</article>

Если нужно оформить контент элемента <section> в отдельный раздел, рекомендуется использовать элемент <article>.




Элемент <aside>

Элемент <aside> служит для представления второстепенного или сопутствующего контента. Это контент, независимый от основного контента, но напрямую с ним связанный. Он обычно располагается в боковых панелях страницы. Когда тег <aside> используется внутри тега <article>, контент <aside> должен иметь непосредственное отношение к контенту <article>.

<article>
   <h1>Подарки на любой вкус!</h1>
   <p>На этом веб–сайте Вы найдёте лучшие в мире подарки!</p>
   <aside>
      <p>Доставка в течение 24 часов.</p>
   </aside>
</article>

Когда тег <aside> используется вне тега <article>, его контент должен иметь непосредственное отношение к окружающему его контенту.

June 10, 2018
by @html_books