Можете ли вы содержать столько , сколько хотите, в документе HTML 5?

ProgramBox

Можете ли вы содержать столько , сколько хотите, в документе HTML 5?

Post author:admin
Запись опубликована:10 мая, 2023
Post category:Вопросы по программированию

#html

#HTML

Вопрос:

Мне нравятся новые теги из стандарта HTML 5. Могу ли я использовать их более одного раза?

Например, 3 <nav> тега или два <sidebar> тега, и могу ли я придумать новые теги, подобные <fuu> ?

В xhtml у меня было:

 <div class="nav-wrap">
 <div class="nav">
   ...
 </div>
</div>

итак, я мог бы сделать что-то вроде:

 <nav class="wrap">
  <nav>  <!-- can <nav> have <li>'s ? -->
  ...
  </nav>
</nav>

Ответ №1:

<nav> Элемент определен в спецификации html5, а <sidebar> элемент — нет. Вы можете использовать столько <nav> элементов, сколько захотите (при условии, что они не вложены), но для остальных вам придется предоставить DTD и надеяться, что браузер, которым пользуются ваши пользователи, достаточно гибкий, чтобы принимать новые элементы.

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

<div class="sidebar"></div> достаточно хорош и будет рассматриваться как вторичный контент, если вы добавляете свой основной контент в <main> , что эффективно дает браузеру понять, что регион не является верхним, нижним колонтитулом или основным контентом, который на большинстве сайтов приравнивается к боковой панели.

Однако в большинстве случаев <aside> элемент подходит для использования в качестве боковой панели.

Согласно спецификации:

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

_{Курсив мой}

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

Ответ №2:

Элемент ‘nav’ следует использовать везде, где есть «основная» навигация, обычно это в заголовке вашего веб-сайта, но он также может быть в местах, где вы позволяете пользователю перемещаться по текущей странице.

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

Ответ zzzzBov не совсем корректен, поэтому позвольте мне попытаться привести более точный пример.

В качестве альтернативы «боковой панели» вам следует использовать тег «aside», который обычно содержит вторичный контент (например, боковую навигацию, ссылки, рекламу и тому подобное).

 <div class="sidebar"></div>

Семантически это не боковая панель, далеко не так. Элемент div используется как хук для стилизации или JavaScript и не имеет семантического значения, вот почему был введен элемент ‘aside’, пожалуйста, используйте его!

Если вам нужна оболочка только для оформления, тогда div идеально подходит (даже предпочтительнее).

Как правило, ваш HTML-код должен содержать элементы, которые описывают ваш контент. Обычно вы можете прочитать это вслух, и это будет иметь смысл.

Например: «У меня есть список элементов навигации сбоку моей страницы», будет переводиться как:

 <aside>
  <nav>
    <h1>Navigation</h1>
    <ul>
      <li><a href="/someplace">Link to someplace</li>
      <li><a href="/someplace-else">Link to someplace else</li>
    </ul>
  </nav>
</aside>

Итак, подведем итог: как правило, элемент nav используется в основных областях навигации, таких как навигация, найденная в заголовке веб-сайтов, а иногда и навигация, найденная для перехода по текущей странице.

Разделы страницы, которые не являются вашим основным контентом (но могут быть связаны), обычно помещаются в элемент «в стороне».

Надеюсь, это поможет!

1. aside не всегда является семантически правильным элементом для боковой панели.

2. Это правильно, но div в любом случае не имеет семантики. Боковой панели в целом не нужен новый элемент (div подойдет для управления его внешним видом), но содержимое боковой панели может извлечь выгоду из таких элементов, как aside и nav.

3. У A div нет неявной семантики, но у a [class] есть. class="sidebar" придает div некоторую значимость, поскольку теперь он принадлежит группе боковых панелей. Эта семантика обычно прозрачна для конечных пользователей, но важна для веб-разработки в целом. Когда <main> элемент обсуждался для включения, одним из факторов, определяющих его полезность, были данные с существующих сайтов, которые использовали такие классы, как .main , .content и т.д. По большей части используемые элементы были div s, но у них все еще была семантика.

4. Я понимаю, о чем вы говорите, но я не согласен со словом «семантический» в данном случае. На уровне пользователя и браузера divs и spans не передают никакой семантики, независимо от их классов. Для разработчиков это другое, но оно выражает «семантику» только как способ сообщить другим разработчикам, какова цель этого div / span. Основной элемент был включен в основном (без каламбура), чтобы отделить фактическое основное содержимое от остальной части потока, что уже сделала aria-roles. <div class="sidebar"> Не имеет другого значения в отношении доступности, например.

5. Просматривая некоторые свои старые ответы, я наткнулся на эту старую тему. После дальнейшего размышления я решил, что был неправ по целому ряду причин, большая часть из которых, по вашему мнению, заключается в том, что я неправильно использовал слово «семантический». Ранее я использовал его в общем смысле «значение», а не то, что на обычном жаргоне означает «автоматически интерпретируемое значение браузера для общего использования, помогающее пользователям».

Ответ №3:

Чаще всего неупорядоченный список ссылок помещается в ваш nav :

 <nav class="wrap">
  <ul>
    <li>...
  </ul>
</nav>

На вашей странице может быть столько nav элементов, сколько вам нужно, но вам не нужно заключать каждую ссылку или набор ссылок в nav — в nav элементе должна быть только «основная навигация». В этом посте доктора HTML5 есть хорошее введение в nav . HTML5.

Для боковых панелей нет необходимости изобретать свой собственный элемент, используйте для них aside элемент.

Вы можете создавать свои собственные элементы, и ваша разметка все равно будет работать в браузере, совместимом с HTML5, алгоритм токенизации HTML5 не заботится о том, какие имена тегов вы используете, пока они соответствуют правилам, но тогда вы не будете писать HTML5, так что это вроде как бессмысленно. Я рекомендую ознакомиться с разделом «Требования к соответствию для авторов» в начале спецификации, особенно с разделом «Случаи, которые, вероятно, являются опечатками»:

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