Странная структура документа html5

Я прочитал несколько статей об алгоритме набросков html5, но эта меня смущает.

Если вы вставите следующую разметку в этот инструмент: http://gsnedders.html5.org/outliner/

<body>
    <nav>
        <h1>Navigation</h1>
        <ul>
            <li>...</li>
        </ul>
    </nav>
    <h1>My fantastic site</h1>
    <h2>About me</h2>
    <p>I am a man who lives a fascinating life. Oh the stories I could tell you...</p>
    <h2>What I do for a living</h2>
    <p>I sell enterprise-managed ant farms.</p>
    <h1>Contact</h1>
    <p>Shout my name and I will come to you.</p>
</body>

вы бы получили такой набросок:

  1. Мой фантастический сайт
    1. навигация
    2. Обо мне
    3. Чем я зарабатываю на жизнь
  2. контакт

Это довольно просто. Навигация является подразделом <body> таким образом появляется ниже <body>"s <h1>Как и все заголовки уровня h2.

Но взгляните на следующий пример:

<body>
    <nav>
        <h1>Navigation</h1>
        <ul>
            <li>...</li>
        </ul>
    </nav>
    <h1>My fantastic site</h1>
    <figure><img src="" alt="" /><figure>
    <h2>About me</h2>
    <p>I am a man who lives a fascinating life. Oh the stories I could tell you...</p>
    <h2>What I do for a living</h2>
    <p>I sell enterprise-managed ant farms.</p>
    <h1>Contact</h1>
    <p>Shout my name and I will come to you.</p>
</body>

я добавил <figure> элемент между <h1> а также <h2> и это, кажется, влияет на схему в соответствии с http://gsnedders.html5.org/outliner/.

Выход из планировщика:

  1. Мой фантастический сайт
    1. навигация
      1. Обо мне
      2. Чем я зарабатываю на жизнь
  2. контакт

Все заголовки уровня h2 теперь являются потомками <nav> вместо <body>, Кто-нибудь может объяснить, почему это происходит? Это какая-то ошибка в инструменте outliner?

Спасибо

Источник

3 ответа

Решение

Это похоже на ошибку для меня.

Похоже, это происходит, как только вы используете корневой раздел (blockquote, details, dialog, fieldset, figure) сразу после body"s h1,

Если я размещу корневой элемент секционирования перед h1, планировщик выдает ошибку (<type 'exceptions.AttributeError'>). Я использовал этот документ:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>

    <nav></nav>

    <blockquote></blockquote>

    <h1>My fantastic site</h1>

    <h2>About me</h2>

</body>
</html>
Источник

Это явно ошибка на этом сайте. Кроме того, ваше закрытие figure тег неверен и должен быть только один h1 на страницу.

Попробуйте проверить это на JSFiddle.net, и вы увидите, что он работает как положено. Кроме того, W3C Validator является хорошим местом для проверки вашего HTML5.

Источник

Основная проблема заключается в том, что ваш закрывающий тег забыт с вами. Из-за этой проблемы с субтитрами упомянутый сайт генерирует контур, рассматривая все последующие элементы после элемента figure как подмножество элемента figure. Это означает, что элемент фигуры становится их автором. Теперь из-за этого вывода этим сайтом все содержимое вашего документа после кондидера элемента figure в качестве содержимого корневого элемента Sectioning (blockquote, body, details, dialog, fieldset, figure). Как я уверен, вы знаете, что разделы и заголовки внутри этих элементов не способствуют очертаниям их предков. Заголовки в корневом элементе секционирования не будут включены в основную схему документа. Это означает, что вы можете иметь сложную иерархию заголовков внутри цитаты, не беспокоясь о том, как это повлияет на общую структуру документа.

Чтобы убедиться в этом ответе, пожалуйста, проверьте следующий HTML-фрагмент, вы увидите тот же результат:

<body>
    <nav>
        <h1>Navigation</h1>
        <ul>
            <li>...</li>
        </ul>
    </nav>
    <h1>My fantastic site</h1>
    <figure>
        <img src="" alt="" />
        <h2>About me</h2>
        <p>I am a man who lives a fascinating life. Oh the stories I could tell you...</p>
        <h2>What I do for a living</h2>
        <p>I sell enterprise-managed ant farms.</p>
        <h1>Contact</h1>
        <p>Shout my name and I will come to you.</p>
    </figure>
</body>

но я думаю это то что ты хотел

<body>
    <nav>
        <h1>Navigation</h1>
        <ul>
            <li>...</li>
        </ul>
    </nav>
    <h1>My fantastic site</h1>
    <figure>
        <img src="" alt="" />
    </figure>
    <h2>About me</h2>
    <p>I am a man who lives a fascinating life. Oh the stories I could tell you...</p>
    <h2>What I do for a living</h2>
    <p>I sell enterprise-managed ant farms.</p>
    <h1>Contact</h1>
    <p>Shout my name and I will come to you.</p>    
</body>
Источник
Другие вопросы по тегам