Должны ли элементы HTML-списка содержать <h#> теги?

Question

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

<ol> 
    <li> 
    <h2>The First Item</h2> 
    <p>a descriptive paragraph</p> 
    </li> 
    <li> 
    <h2>The Second Item</h2> 
    <p>a descriptive paragraph</p> 
    </li> 
    <li> 
    <h2>The Third Item</h2> 
    <p>a descriptive paragraph</p> 
    </li> 
</ol> 

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

Answer 1

Это действительно зависит от того, что вы пытаетесь выполнить. html - все о том, как хорошо выглядеть. Во всяком случае, мне это кажется прекрасным. Мне также нравится этот маленький тег.

<ol> 
    <li> 
     <fieldset> 
     <legend><b>The Fist Item:</b></legend> 
     a descriptive paragraph 
     </fieldset> 
    </li> 
</ol> 

Answer 2

Семантически это немного избыточно, но это прекрасно, если это имеет смысл с вашим контентом.

Answer 3

Спросите себя, действительно ли это список. Если это так, на мой взгляд, то, что вы делаете, прекрасно. Также смотрите на CSS Счетчики и нумерация: http://webdesign.about.com/od/css2/a/aa032807.htm

Answer 4

Если ваш список не в определенном порядке, используйте неупорядоченный список. Вы даже можете рассмотреть использование вложенных списков, но в этом случае, однако, я бы пошел с использованием списка определений.

http://jsfiddle.net/SmqFK/

Answer 5

Он действует в любой версии HTML. Но действительность - формальная концепция, которая допускает всевозможные глупости.

На практике, ol means a numbered list of items. Это не абстрактное понятие списка, упорядоченная последовательность. Например, абзац логически представляет собой последовательность утверждений, а последовательные абзацы составляют последовательность на более высоком уровне. Даже буквы слова - упорядоченная последовательность. Мы по-прежнему не используем для них ol. Мы используем ol, чтобы перечислить подробный список довольно коротких элементов с нумерацией с помощью браузера, например, в рецепте или списке покупок или в списке аргументов, поддерживающих идею. Нет определенного верхнего предела длины элемента, за исключением того, что чем дольше они получаются, тем меньше они подходят для представления их в виде пронумерованного списка.

Таким образом, шансы на то, что если ваши элементы списка нуждаются в заголовках, вы не должны использовать список. С практической стороны, если вы используете h2 как первый элемент внутри liol, тогда номер позиции по умолчанию будет отображаться гораздо меньшим шрифтом, чем заголовок (и в нормальном весе, а не полужирный). Всякий раз, когда рендеринг по умолчанию смехотворно странный, вы должны спросить себя, используете ли вы HTML-разметку так, как это было действительно предназначено для использования.

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

<div class="foo"> 
    <div class="bar"> 
    <h2>The First Item</h2> 
    <p>a descriptive paragraph</p> 
    </div> 
    <div class="bar"> 
    <h2>The Second Item</h2> 
    <p>a descriptive paragraph</p> 
    </div> 
    <div class="bar"> 
    <h2>The Third Item</h2> 
    <p>a descriptive paragraph</p> 
    </div> 
</div> 

Заменить foo и bar названиями, которые отражают содержание, или родовыми названиями, как section и subsection. (Это частично зависит от стиля вкуса и кодирования, отчасти зависит от того, собираетесь ли вы использовать аналогичную разметку для контента с различными значениями.)

В качестве альтернативы вы можете использовать разметку section в соответствии с черновиками HTML5, но это вызывает проблемы, поскольку некоторые старые браузеры вообще не признают, и он не имеет реальных преимуществ с точки зрения функциональности или внешнего вида (хотя это, как и все, может измениться).

Использование div с помощью классов позволяет легко их легко стирать (или обрабатывать в JavaScript) без нагрузки специального рендеринга по умолчанию (в виде нумерованного списка с полями), который вам в первую очередь необходимо предотвратить.

Если вы хотите, чтобы элементы были пронумерованы, наиболее надежный способ - наиболее очевидный способ: поместить числа в заголовки, например. <h2>1 The First Item</h2>. Если вы считаете, что гибкость в разработке, а именно возможность переупорядочивания частей, добавление и удаление деталей без ручного изменения номеров, достаточно важна, чтобы оправдать отсутствие номеров в самых старых браузерах, вы можете использовать CSS (автоматическая нумерация и сгенерированный контент), чтобы вставить номера чисел.