Странная схема документа 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. My fantastic site
    1. Navigation
    2. Обо мне
    3. Чем я зарабатываю на жизнь
  2. Контакт

Это довольно просто. Навигация является подразделом <body>, поэтому отображается под <body> <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. My fantastic site
    1. Navigation
      1. About me
      2. Чем я зарабатываю на жизнь
  2. Контакт

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

Спасибо


html markup outline outliner
person Kuwiuwuw Kurwiow    schedule 03.07.2013    source источник

Ответы (3)


arrow_upward
0
arrow_downward

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

Кажется, это происходит, как только вы используете элемент root. (blockquote, details, dialog, fieldset, figure) сразу после h1 body.

Если я помещу корневой элемент раздела перед 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>
person unor    schedule 06.07.2013

arrow_upward
0
arrow_downward

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

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

person Rob W    schedule 03.07.2013
comment
Вы, кажется, это ошибка. Закрытие <figure> не помогает. - person Kuwiuwuw Kurwiow; 05.07.2013
comment
Для целей SEO теги H1 следует использовать один раз на странице. Извините за отсутствие разъяснений. - person Rob W; 02.12.2013

arrow_upward
0
arrow_downward

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

Чтобы убедиться в этом ответе, проверьте следующий фрагмент 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>
person MMKarami    schedule 13.08.2017