Семантическая практика HTML

Question

Я читал о семантическом HTML онлайн ...

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

Если вы используете <h1> вместо <div class="header"> и <h2> вместо, и так далее, Google и другие поисковые системы будут интерпретировать ваши заголовки как важные заголовки на вашей странице.Таким образом, когда люди ищут слова в ваших заголовках и подзаголовках, ваша страница будет считаться более актуальной (и иметь более высокий рейтинг).Кроме того, он намного короче и чище.

Итак, ниже это семантика,

<h1>My Website Name</h1>
<h2>My Website Tagline </h2>

Что об этом ниже?

<div id="header">
  <h1><span class="hide">My Website Name</span></h1>
  <h2><span class="hide">My Website Tagline</span></h2>
</div>

Я склонен комбинироватьh теги с тегами div и span, как указано выше - это на практике считается отсутствием семантики ?

Причина, по которой у меня есть диапазон с классом hide, заключается в том, что я хочу отобразитьлоготип сайта вместо текста.Так что используйте CSS, чтобы установить фон h1 как изображение, а затем скрыть текст.это неправильная практика?

Тогда, если я не использую div, что я могу использовать, чтобы создать квадрат вокруг h1 и h2?

Насколько я знаю, html 5 - этоеще не полностью готов, мы не должны использовать <header> пока, мы должны ??

Спасибо.

Answer 1

Я бы сделал что-то вроде следующего, если бы собирался использовать HTML5:

<header>
  <hgroup>
    <h1>My Website Name</h1>
    <h2>My Website Tagline</h2>
  </hgroup>
</header>

Не забудьте добавить display: block; к элементам HTML5 и createElement для IE в CSS. Элемент header показывает, что блок является заголовком, а элемент hgroup должен показать, что второй элемент h * является подзаголовком, поэтому его не следует учитывать при расчете уровней заголовка в документе.

Если вы еще не хотите использовать HTML5, вы можете использовать div вместо новых элементов и использовать имена элементов HTML5 в качестве значения класса. Это облегчит переключение, когда вы будете чувствовать себя комфортно, используя HMTL5 на живом сайте.

Вам не нужно использовать элементы span. Вы можете использовать такие хитрости, как использование большого отрицательного отступа текста в CSS, чтобы скрыть текст с экрана.

Answer 2

Если вы хотите отобразить логотип вместо текста, используйте изображение. Google скажет так (даже если они не знают разницы между тегом и атрибутом).Слоганы, кстати, не являются подзаголовками (а название сайта (и, следовательно, логотип) обычно является только заголовком на главной странице).

<div id="header">
  <h1><img src="foo.png" alt="My Website Name"></h1>
  <p><img src="foo.png" alt="My Website Tagline"></p>
</div>

Answer 3

К сожалению, Internet Explorer 8 не распознает много тегов HTML5, и когда я его протестировал, мне не удалось установить значения CSS, например, для тега

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

Как примечание, Google не любит скрытый текст, и если у вас его много, он сочтет его обманчивым кодированием. Один из них, вероятно, подходит, но вам лучше использовать атрибут alt в теге image.

Answer 4

Я согласен с @David Dorward, строка тега должна быть в теге p.

Ваш пример (обтекание элементов заголовка div) вполне приемлемо, хотя я бы хотелПоднимите небольшую осторожность: будьте осторожны, чтобы вы не привыкли заворачивать все в теги div.Например:

<div class="content">
    <div class="list">
        <ul>
            <li>something</li>
            <li>something</li>
            <li>something</li>
        </ul>
    </div>
</div>

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

<div class="content">
    <ul class="list">
        <li>something</li>
        <li>something</li>
        <li>something</li>
    </ul>
</div>

А затем просто стилизуйте ul чтобы выглядеть как div.

По вопросу отображения логотипа в виде изображения:

Если ваш логотип основан на тексте или содержит текст, вам будет лучшеотключить выполнение следующих действий:

HTML

<div id="header">
    <h1 class="logo">My Logo Text - My Website Tagline</h1>
</div>

CSS

.logo { text-indent:-9999px;background-image:url(thelogo.jpg) no-repeat;}
      /* Also add height and width based on your logo height and width */

Answer 5

Никто не говорил, что вам вообще не следует использовать DIV ... семантический HTML не означает, что в вашем коде не может быть тегов div или span. Это просто означает, что всякий раз, когда это возможно (есть определенный тег для определенного семантического значения), вы должны пытаться дать семантическое значение.

h2 не должен использоваться для слоганов, как кто-то еще уже предложил.

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