Какую комбинацию тегов я должен использовать?

Question

В моей форме у меня есть 3 стиля текста: styleA (размер 16 и полужирный, больше похож на заголовок) styleB (размер 16, нормальный вес, обычный текст) и styleC (размер 14 и курсив, примечание в конце).

Должны ли styleA и styleB использовать теги <h?>, а styleC использовать тег <p>?Или styleA должен использовать тег <h?>, styleB использовать тег <p>, а styleC использовать тег <small>?Или есть какая-то другая комбинация, которую я должен использовать?

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

Спасибо!

Редактировать: Просто чтобы уточнить, весь этот текст будет в форме во всплывающем окне (AJAX).Весь текст будет в теге <form>.Поэтому я бы предпочел избегать тегов body / div.

Answer 1

Вот только с моей головы ...

HTML 4 или XHTML 1

• styleA должен быть заголовком, вероятно, заголовком уровня 1 <h1> или уровня 2 <h2> в зависимости от характера содержимого, которое он охватывает (статья или вся страница?).

• styleB определенно должен быть серией <p> элементов, содержащих ваш фактический контент.

• styleC может быть специальным пунктом. Некоторые примеры того, как это сделать, включают <p><small> или <p><cite> или <p class="footnote">.

HTML5 (на случай, если вы захотите попробовать)

• styleA должен быть заголовком в <header>.

• styleB должен быть последовательностью <p> элементов в <section>.

• styleC преуспел бы как <p> в <footer>.

Answer 2

• Если это заголовок, присвойте ему один из h1, h2, h3, h4, h5, h6 в зависимости от того, что вам нужно.
• Стандартный текст может быть в любом теле, p, li, a, div, span.
• Акцент / выделение жирным шрифтом / примечания могут применяться в em, i, b, small, sup, sub

Идея состоит в том, чтобы классы представляли вариант использования.Поэтому, если вы используете класс для текста заголовка, соедините его с тегом заголовка.

Answer 3

Я заметил, что вы упомянули, что вы разрабатываете форму.Я удивлен, что никто не упомянул об этом, но важно использовать теги <label> и <fieldset> / <legend>, если вы хотите создатьправильно семантическая HTML-форма.

Итак, ваш StyleA может иметь больше смысла как <legend> внутри <fieldset>, а не как тег <h1>.Ваш StyleB, если он описывает элемент управления, определенно должен быть <label>.Взгляните на некоторые примеры HTML на страницах W3C, на которые я ссылался выше, чтобы узнать, как правильно использовать эти теги.

Примечание в конце будет в теге <p>, возможно, скакой-то класс.Более длинные информационные примечания в форме будут также в тегах абзаца.

Вот статья из A List Apart , которая демонстрирует метод упорядоченного списка для элементов управления и правильный семантический HTML с меткой и набором полейтеги.

Answer 4

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

Answer 5

Я бы пошел

• <h1> для стиля A
• <p> для стиля B
• <small> для styleC

Из того, что вы описываете, тег отражает, как текст в них используется, хотя я мог бы рассмотреть <cite> для styleC, поскольку <small> - это скорее визуальное описание, а не семантическое описание, как <cite>.(Я думал, что есть специальный тег для сносок, но, думаю, я думал о <tfoot>)

Answer 6

Вы можете использовать следующий CSS для определения тегов h1 и p и создания класса CSS note:

Стиль A: h1 { font-size: 16px; font-weight: bold; }

Стиль B: p { font-size: 16px; }

Стиль C: .note { font-size: 14px; font-style: italic; }