Вопрос:
Например, в HTML 4.01,
1) встроенные элементы вообще не могут включать другие элементы блока (например: a <span> или <a> не должны включать никаких <div>.) Но это правило более прощает, так как большинство браузеров не изменят HTML как и в правиле 2 ниже. (И многие браузеры в настоящее время будут обрабатывать желаемый результат <div> внутри тега <a>.)
2) <p> элементы не могут содержать элемент <p>. Если перед закрытием предыдущего элемента <p> появляется какой-либо <p>, предыдущий будет немедленно закрыт. Это правило выглядит более строгим, поскольку оно изменяет структуру HTML-документа.
Правильны ли правила выше, и существуют ли другие правила, указывающие на элемент, не могут включать другие элементы? (как отпрыски).
Ответ №1
Вы говорите о HTML5? Так как эта спецификация должна заменять любой другой в это время, мы будем придерживаться этого.
Я не буду проходить через каждый отдельный элемент, но если вам нужно что-то посмотреть, вот ссылка:
http://www.w3.org/TR/html5-author/
В разделе, посвященном “Модели содержимого”,
описание ожидаемого содержимого элемента
находится здесь: http://www.w3.org/TR/html5-author/content-models.html
Вы можете увидеть некоторые примеры в спецификациях для определенных элементов:
http://www.w3.org/TR/html5-author/the-html-element.html#the-html-element (элемент html):
A head, за которым следует элемент body.
Содержание
- Конкретные примеры
- a
- span
- br
- Ваши вопросы
- Правильны ли правила выше?
- Первое правило (inline vs. block)
- Второе правило (p, содержащее p)
- Любые другие правила?
- В резюме
Конкретные примеры
- http://www.w3.org/TR/html5-author/the-a-element.html#the-a-element
- http://www.w3.org/TR/html5-author/the-span-element.html#the-span-element
- http://www.w3.org/TR/html5-author/the-br-element.html#the-br-element
a
Из первой ссылки (на элементе a) мы узнаем, что ее модель содержимого Transparent, но только если есть no потомок с интерактивным контентом.
Изучая определения “Прозрачный”, мы видим, что a наследует свою Content Model от своего родителя. Это означает, что ваше первоначальное определение неверно, и a действительно может содержать div, но только если его родитель может. В приведенных документах даже есть пример вложенных элементов модели содержимого “Прозрачный”.
Так как a не может содержать элементов модели “Интерактивный контент”, он вообще не может содержать элемент button. Это имеет смысл, потому что будет конфликт, какой элемент активно реагирует на клик.
span
Когда мы посмотрим на вторую ссылку, span, мы видим, что ее модель контента – “Фразинг контента”, которая в основном представляет текст и разметку для текста на уровне абзаца. Определение не является полностью конкретным, но оно включает в себя руководство:
Большинство элементов, которые классифицируются как фразирование контента, могут содержать только элементы, которые сами по себе относятся к фразовому контенту, а не к содержимому потока.
Так как div не имеет модели “Фраза содержания” ( “Содержимое потока” ), span не может содержать ее. Это означает, что span должен следовать приведенному выше правилу и содержать только любые другие элементы “Фраза содержания” и/или встроенный контент или текст. Если это правило нарушено, оно будет конкретно указано в описании элемента “Content Model” (помните специальные правила для элемента a “Интерактивный контент”.) span не имеет.
br
Третья ссылка br говорит, что модель содержимого “Пусто”. К сожалению, W3C не содержит конкретного определения для этого, но я думаю, что он довольно очевиден: он вообще не может содержать потомков. Даже текстовые узлы. Любой элемент “Empty” Content Model не имеет закрывающего тега (вы должны писать его как <br> не как <br></br>).
Ваши вопросы
Правильны ли правила выше?
Первое правило (inline vs. block)
То, что вы сказали, вводит в заблуждение. HTML не имеет понятия элементов inline vs. block. Это стили CSS. Большинство браузеров имеют настройку по умолчанию для стиля display как inline или block в зависимости от того, является ли это соответственно модель контента “Фразинг” или “Поток” (как правило, нет ничего сложного и быстрого это) или просто традиционно.
Если вы хотите сказать, что элементы “Phrasing Content” не могут содержать элементы “Flow Content”, тогда вы будете правы, потому что это конкретно в спецификации. Это также работает практически потому, что span не может содержать div (как вы указываете).
Однако, говоря, что a не должен включать никаких div, это неверно. a может включать div, пока его родители могут. Если a содержится в span, он не может содержать div. Однако, если a содержится в body или другом div, он может.
Что касается того, что браузеры “прощающие”, это очень удобно для многих разработчиков, которые не могут потратить время на создание допустимого HTML, но это может быть болью для тех из нас, кто хочет потратить время. Браузеры обычно не изменяют “структуру HTML”, как вы говорите, – что они изменяют, это DOM. Кроме того, node, что спецификация веб-поставщика немного отличается от спецификации “Веб-автор”, которую я опубликовал выше, но мы являемся авторами.
Второе правило (p, содержащее p)
Это верно из-за важного момента, который я забыл: Context.
Контексты, в которых этот элемент можно использовать:
Где ожидается содержимое потока.
Так как p – “Фразинг содержимого”, это означает, что другой p не может быть помещен внутри p, потому что ожидается “Фразинг содержимого”, а не “Содержимое потока”.
Любые другие правила?
Спецификация HTML5 содержит огромное количество элементов, поэтому я просто не могу вдаваться в все эти детали здесь. Я подробно рассказал о span и a содержимом vs div, а также p, потому что вы специально их внесли. Посмотрите, как долго этот ответ!
Что вам нужно сделать, так это взглянуть на все те элементы, о которых у вас есть вопросы в самой спецификации. Взгляните на разделы Контекст и Content Model, чтобы узнать, действительно ли ваше использование этого элемента.
В резюме
Обратитесь к спецификации, когда у вас возник вопрос о том, как этот элемент должен работать. Чтобы ответить на вопросы о том, как вы должны использовать элемент (относительно его контейнера и содержимого), посмотрите:
- Контексты, в которых этот элемент можно использовать:
- Модель контента:
Это говорит вам, что может содержать элемент, то, что он может содержать, и когда.
Если у вас есть вопросы о том, действителен ли ваш HTML-код, вы всегда можете использовать очень приятную службу проверки разметки W3C:
Если вы используете Chrome, вы можете взглянуть на Chrome Inspector (F12) и сравнить выходной DOM с исходным HTML-кодом. Например, вы заметите, что Chrome автоматически закрывает вложенные теги p при создании DOM.
Ответ №2
На основе отредактированного сообщения –
<a> теперь рассматривается как элемент уровня блока, так как html5 –
независимо от того, какой стандарт вы отмечаете на странице, браузер, скорее всего, обработает элемент, как если бы он html5, поэтому работайте оттуда, а не назад.
<a> не может содержать <a> или любой элемент, который должен взаимодействовать с (входы/кнопки).
<hX> не может содержать тег <h_> X или выше (с точки зрения иерархии).
т.е. <h3> не может содержать <h1> или <h2> или <h3>
Если вы напишете его таким образом, контур закроет контур, пока не достигнет уровня иерархии.
<h1></h1> <h2></h2> <h3></h3> <h2></h2> // starts a new branch of H2s, in terms of outline <h1></h1> <h2></h2> <h3></h3> <h1></h1> // closes the entire previous branch and all leaves, and starts a new outline
<ul> и <ol> могут ТОЛЬКО содержать <li> в качестве непосредственных потомков.
<li> может содержать все, что вы хотите (кроме <li> или других узлов списка), включая другие упорядоченные/неупорядоченные/определения списки…
… но элементы <ul> и <ol> могут иметь только <li> в качестве своих детей первого поколения.
То же самое дело с <dl> с <dt> и <dd> узлами.
Большая часть остальной части – либо здравый смысл (не помещайте элементы в теги <script>, теги <img>, теги <br>, теги <meta>, теги <legend> и т.д.)…
… или у них все еще возникают изломы (например, что фигура /figcaption может содержать и правильный формат для <picture> и т.д.).
Ответ №3
Что касается вашего второго правила (в HTML 4.01), это немного сильнее: элемент P не может содержать элементы уровня блока (включая сам P),
