HTML5 наброски вопросов - разделы и разграничение колонтитулов

Question

Я впервые правильно смотрю на теги HTML5 и придумала такую ​​структуру страницы (для сайта блога):

<header>
    <nav>
        <ul>
            <li>list 1</li>
            <li>list 2</li>
        </ul>
    </nav>
</header>
<main>
    <h1>Main page heading</h1>
    <article><h1>Post 1</h1></article>
    <article><h1>Post 2</h1></article>
    <div id=“sidebar”>
        <aside><h1>Aside heading</h1></aside>
    </div>
</main>
<footer>
    <aside><h1>Footer widget heading</h1></aside>
    <aside><h1>Footer widget heading</h1></aside>
</footer>

Когда я запускаю это через инструмент HTML outliner https://gsnedders.html5.org/outliner/ я получаю это:

1. Main page heading
    1. Untitled Section
    2. Post 1
    3. Post 2
    4. Aside heading
    5. Footer widget heading
    6. Footer widget heading

Не совсем так, как я думал, что это должно обрисовать в общих чертах.

Q1. Понятия не имею, почему я получаю "Секцию без названия" там. Игра вокруг предполагает, что это на самом деле относится к <nav>, Должен ли я беспокоиться о разделе без названия? Навигация не нуждается в заголовке, насколько я понимаю...

Q2. Очевидно, что структура моей страницы не дает желаемого эффекта. Я хотел дифференцировать <header> а также <footer> от <main> содержание страницы. Я понимаю, что эти теги не являются элементами секционирования как таковыми, но если нет, то для чего они нужны, особенно в случае <header> а также <footer>? Я понимаю, что <main> следует использовать там, где вы могли бы использовать <div id="main"> или же <div id="wrapper"> в прошлом и должен обозначать основную область страницы, которая именно это и делает.

Причина, по которой я не использовал <section> теги объясняются тем, что я понимаю, что их не следует использовать в качестве обёрток для оформления, а больше для "глав страницы". На этой странице нет глав (единственные автономные элементы уже выделены <article> а также <aside>) так что я не понял, почему я должен использовать <section>,

Я также пытался использовать <h1> теги в <header> а также <footer> которая, кажется, решает мою проблему.

<header>
    <h1>Site title</h1>
    <nav>
        <ul>
            <li>list 1</li>
            <li>list 2</li>
        </ul>
    </nav>
</header>
<main>
    <h1>Main page heading</h1>
    <article><h1>Post 1</h1></article>
    <article><h1>Post 2</h1></article>
    <div id=“sidebar”>
        <aside><h1>Aside heading</h1></aside>
    </div>
</main>
<footer>
    <h1>Footer heading</h1>
    <aside><h1>Footer widget heading</h1></aside>
    <aside><h1>Footer widget heading</h1></aside>
</footer>

Контур:

1.  Site title
    1.  Untitled Section
2.  Main page heading
    1.  Post 1
    2.  Post 2
    3.  Aside heading
3.  Footer heading
    1.  Footer widget heading
    2.  Footer widget heading

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

Я ценю чье-то время, чтобы прочитать весь этот вопрос. Если я просто слишком одержим этим изложением, дайте мне знать.

Answer 1

Типичная веб-страница (которая является частью веб-сайта) должна иметь заголовок сайта (а не заголовок основного контента) в качестве заголовка body секционирование корня. Зачем? Потому что такие вещи, как навигация, не должны входить в заголовок основного контента страницы.

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

Смотрите мой ответ с примерами ( еще один).

Q1. Понятия не имею, почему я получаю "Секцию без названия" там. Игра вокруг предполагает, что это на самом деле относится к <nav>, Должен ли я беспокоиться о разделе без названия? Навигация не нуждается в заголовке, насколько я понимаю...

Каждый раздел (разделение элементов контента, таких как section а также navи разделение корневых элементов, таких как body а также blockquote) "жаждет" заголовка. Если вы не предоставите один, outliner может отображать что-то вроде "раздела без названия". Это раздел, просто без заголовка. И нет, вам не о чем беспокоиться: заголовок не обязательно полезен / уместен для каждого раздела (примером может служить навигация).

Q2. […] Я понимаю, что эти теги не являются элементами секционирования как таковыми, но если нет, то для чего они нужны, особенно в случае и?

Каждый раздел может иметь header а также footer (а также address) элементы. Их работа? Разметить содержимое, которое не считается основным содержанием этого раздела. Итак header как дитя body заголовок всего документа, header как дитя article только заголовок этой статьи и т. д. ( см. примеры).

Не обязательно указывать нижний колонтитул (или использовать для него раздел). Просто с помощью footer Вы ясно дали понять, что содержание является нижним колонтитулом (в вашем случае) документа. Раздел / заголовок могут быть подходящими, если нижний колонтитул сложный, т. Е. Содержит много содержимого. Как у вас два aside элементы в нижнем колонтитуле, вы можете рассмотреть возможность добавления родителя (без названия) section который может представлять ваш нижний колонтитул или служить родителем группы для двух aside элементы (но если это имеет смысл, зависит от вашего фактического содержания).