Схема HTML5 — заголовок страницы с заголовком вокруг логотипа

Мне было интересно, как лучше всего использовать тег заголовка вокруг моего логотипа на моем веб-сайте, особенно с тегами разделения HTML5.

Я читал на многих веб-сайтах и ​​форумах, что мне следует сделать следующее, если я хочу добавить заголовок вокруг своего логотипа:

<!DOCTYPE html>
<html>
    [...]
    <body>
        <div id="outer-wrapper">
            <header id="header" class="main-header clearfix">
                <h1>
                    <img src="logo" src="[...]" alt="text goes here" />
                </h1>
            </header>
            <div id="inner-wrapper">
                [...]
            </div>
        </div>
    </body>
</html>

Но теперь каждая страница моего сайта имеет в качестве основного заголовка текст, указанный в атрибуте alt логотипа, который, как я мог себе представить, не идеален. Я имею в виду, что тег H1 предназначен для предоставления «основной темы документа», но в большинстве случаев это не тот текст, который я указал в теге alt логотипа.
Однако, если тег alt логотипа содержит имя компания (потому что это логотип компании), я бы хотел, чтобы он был в заголовке (чтобы придать ему актуальность и важность), но не в заголовке h1.

Считаете ли вы, что следующее является допустимым решением этой проблемы:

<!DOCTYPE html>
<html>
    [...]
    <body>
        <div id="outer-wrapper">
            <header id="header" class="main-header clearfix">
                <h2>
                    <img src="logo" src="[...]" alt="text goes here" />
                </h2>
            </header>
            <div id="inner-wrapper">
                <article>
                    <h1>Main topic</h1>
                </article>
            </div>
        </div>
    </body>
</html>

html seo html-heading semantic-markup graphical-logo
person kije    schedule 16.09.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Оба фрагмента семантически одинаковы. При использовании элементов секционирования ранги заголовков часто (но не всегда) больше не имеют значения.

Вы можете проверить это самостоятельно, проверьте эти два фрагмента в планировщике HTML5 (например, в этом онлайн-демонстрация):

<body>
  <h1>document heading</h1>
  <article>
    <h2>main content heading</h2>
  </article>
</body>

<body>
  <h2>document heading</h2>
  <article>
    <h1>main content heading</h1>
  </article>
</body>

Они создают такой же план:

1. document heading
   1. main content heading

Однако спецификация HTML5 рекомендует авторам использовать элементы заголовков правильного ранга, поэтому следует придерживаться первого фрагмента.< br> Спецификация HTML5 не определяет, что (первый) элемент h1 будет особенно важным или что его следует использовать для «основной темы» документа. Спецификация определяет ранг, а не важность.

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

person unor    schedule 17.09.2015