Разница 2 тегов HTML

253

27 октября 2018, 02:00

В чем разница тега HTML <article> и <section>? Какую в них хранить информацию? Могут ли они хранить в себе теги <header> и footer?

Answer 1

Множество тегов были добавлены в стандарт HTML, чтобы разметка стала более понятной для устройств наподобие "screen reader" и роботов, которые сканируют страницы. Цель сделать разметку "более семантичной". Устройство должно сразу понять: где навигация, где основа, где контент.

Была сделана попытка уйти от div, или по крайней мере предоставить альтернативу. Но из-за достаточной сложности вёрстки (дизайна, совместимости и т.д) это не получилось на 100%, совместимый, чистый код, с ограниченными вложениями и правильной семантикой, создавать трудно.

<article> - элемент контента, содержания
<section> - структурный элемент, отдельная секция, разметка

Универсальность элементов создала множество трактовок использования. Так например header и footer могут использоваться в разных элементах (с некоторыми ограничениями). И article и section могут содержать header и footer.

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet"/> 
 
<!-- многоуровневое вложение элементов для стилизации --> 
 
<section class="hero is-info"> 
 <div class="hero-body"> 
   <div class="container"> 
      <h1 class="title">Hero</h1> 
   </div> 
 </div> 
</section> 
 
<!-- пример article --> 
<article class="forecast content"> 
    <h1>Weather forecast for Seattle</h1> 
    <article class="day-forecast"> 
        <h2>03 March 2018</h2> 
        <p>Rain.</p> 
    </article> 
    <article class="day-forecast"> 
        <h2>04 March 2018</h2> 
        <p>Periods of rain.</p> 
    </article> 
    <article class="day-forecast"> 
        <h2>05 March 2018</h2> 
        <p>Heavy rain.</p> 
    </article> 
</article> 
 
<!-- Пример с использование section --> 
 
<article class="content"> 
    <hgroup> 
        <h1>Fishing for Beginners</h1> 
        <h2>A getting-started guide</h2> 
    </hgroup> 
    <section> 
        <h1>Introduction</h1> 
        <p>People have been catching fish for food since before recorded history...</p> 
    </section> 
    <section> 
        <h1>Equipment</h1> 
        <p>The first thing you'll need is a fishing rod or pole that you find comfortable and is strong enough for the kind of fish you're expecting to try to land...</p> 
    </section> 
</article>