Как правильно использовать семантические элементы HTML в блоге?

Я прочитал много информации о w3schools . Он определяет

как:

Элемент

определяет раздел в документе. […] Домашняя страница обычно может быть разделена на разделы для введения, содержания и контактной информации.

Итак, в основном,

может быть

(введение) и

(контактная информация)?

Элемент

указывает заголовок для документа или раздела.

Итак, я могу разместить

внутри

? Но

может использоваться «для введения», поэтому в основном это заголовок? Такая же история с элементом

.

Вопросов

Как я должен использовать элементы?

  • Должен ли я использовать

    для названия

    или для части моего сайта, содержащего логотип и навигацию?

  • Должен ли я использовать

    для данных

    или для части моего веб-сайта, содержащей навигацию по авторскому праву и нижнему колонтитулу?

  • Должен ли я помещать

    вокруг тегов

    ?

Предположим, у меня есть простой веб-сайт, содержащий логотип, навигацию, несколько статей и текст нижнего колонтитула. Каким будет лучший способ разметки?

    My site   
My logo!

Article 1 title

Posted on Foo.Bar.2017

Article 2 title

Posted on Foo.Bar.2017

Article 3 title

Posted on Foo.Bar.2017

Copyright

Если я это сделаю, Nu HTML Checker говорит:

Предупреждение: Раздел не имеет заголовка. Рассмотрите возможность использования элементов h2-h6 для добавления идентифицирующих заголовков ко всем разделам.

Я не хочу, чтобы

указывал, что

содержит tags

. Должен ли я просто удалить

? Кажется, это гибкий тег, но я не могу найти подходящее место для его размещения.

Какая будет правильная разметка?

header / footer

Есть секционные материалы и корневые элементы секционирования . элементы header / footer всегда «принадлежат» к одному из этих элементов секционирования (контента / корня).

  
belongs to the 'body'
belongs to the 'article'
belongs to the 'article'
belongs to the 'body'
belongs to the 'body'
belongs to the 'body'

Обратите внимание: элемент div не является элементом секционирования, поэтому его дочерние элементы header / footer принадлежат к body (который является корневым элементом секционирования), а не к div .

Таким образом, вы можете использовать элементы header / footer для содержимого сайта, размещая их так, чтобы их ближайший родительский элемент секции был элементом body .

section

footer / footer может состоять из одного или нескольких элементов section , но это обычно имеет смысл, если header / footer (необычно) сложный.

В общем, когда имеет смысл использовать section ? Если у вас есть неявный раздел или требуется запись в контуре документа. См. Мои ответы:

  • как решить, какой элемент содержимого секционирования использовать (с тремя примерами разметки блога)
  • section в article против article в section (в контексте блога)
  • эмпирическое правило, когда использовать section

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

Заголовок не совпадает с заголовком. Вы используете тег

для своего заголовка (заголовок страницы) и

до

для заголовка (титры, субтитры и т. Д.). Это разница между заголовком и заголовками. Кроме того, ваша разметка кажется достаточно логичной, за исключением проблемы заголовка заголовка, и я бы не стал использовать

– тег для нижних колонтитулов страницы для отображения некоторых данных, таких как даты или авторы.

HTML5-семантика очень логична – содержимое

,

Но

может быть частью

. А раздел также может быть частью статьи. Поэтому я считаю, что если вы будете следовать логике HTML-тегов, вам не нужно много беспокоиться о семантике.

О, и ответить на ваш вопрос. Я бы сделал это так:

 

Article 1 title

Posted on Foo.Bar.2017

Article 2 title

Posted on Foo.Bar.2017

При необходимости вы можете использовать тег

, но я бы не стал (из-за совместимости)