Какой тег следует использовать для элемента логотипа, если логотип является текстом?

Я прочитал, что<h1> tag не подходит для логотипа. Но если ваш логотип простой текст, что вы должны использовать? Я чувствую, что <p> и <span> также не подходят. Вот пример:

<header>
  <nav>
    <a id="logo" href=".">
      <span>Company Name</span>
    </a>
    <a id="linkOne" href="#thingOne">
      <img src="…">
    </a>
    <a id="linkTwo" href="#thingTwo">
      <img src="…">
    </a>
    <a id="linkThree" href="#thingThree">
      <img src="…">
    </a>
  </nav>
</header>

спасибо!

9
html semantic-markup

3 ответов

учитывая ваш пример разметки, вы, кажется, спрашиваете о ссылке в nav элемент. Если это так, вы не должны использовать элемент заголовка для него, потому что элемент заголовка будет помечать nav раздел (это, вероятно, не то, что вы хотите передать; если у вас будет заголовок в nav, Это, вероятно, должно быть что-то вроде "навигации").

в этом случае вам вообще не понадобится специальный элемент, просто перечислите ссылки в nav (идеально в пределах a ul):

<header>
  <nav>
    <ul>
      <li><a id="logo" href="." rel="home">Company Name</a></li>
      <li><a id="linkOne" href="#thingOne"><img src="…" alt="…"></a></li>
      <li><a id="linkTwo" href="#thingTwo"><img src="…" alt="…"></a></li>
      <li><a id="linkThree" href="#thingThree"><img src="…" alt="…"></a></li>
    </ul>
  </nav>
</header>

однако, если вы говорите об имени сайта, которое (как правило) отображается в баннере/заголовке сайта на каждой странице, используя h1 имеет смысл, потому что он представляет сайт, в котором должны быть все разделы страницы (например, навигация по всему сайту), и он дает контуру документа метку верхнего уровня (которая в противном случае не была бы указана). В таком случае он не должен быть частью nav; его ближайшая секция должна быть body срезания корень.

семантически не имеет значения, отображается ли имя/логотип сайта в виде изображения или текста. В случае изображения alt атрибут предоставляет эквивалентное содержимое в виде текста.

поэтому для логотипа сайта у вас может быть:

<body>
  <header>
    <h1><a href="/" rel="home"><img src="…" alt="ACME Inc."></a></h1>
  </header>
</body>

и для имени сайта у вас может быть:

<body>
  <header>
    <h1><a href="/" rel="home">ACME Inc.</a></h1>
  </header>
</body>
1

нет "семантического" способа (т. е. синтаксиса) разметки логотипа в HTML, поэтому на фундаментальном уровне нет правильного или неправильного способа. Тем не менее, я бы не использовал <h1> для логотипа, так как заголовок-теги должны структурировать ваш HTML.

Я обычно использую простой <div> или <a> с логотипом в качестве фонового изображения, потому что я думаю, что это хороший способ, чтобы скрыть это от читателей экране. Честно говоря, я не вижу большой ценности размещения логотипа в качестве <img> на <section> С раздел должна охватывать тематическую группировку содержания.

в вашем случае, я бы отформатировать <a> as inline-block и установите логотип в качестве фонового изображения.

8

Я считаю, что тег будет в основном от вас.

Я не вижу, почему это не должно быть h1, учитывая, что это обычный текст.

но анализируя ваше дело, вот что я бы сделал.

1. Используйте h1 и определите его как тег, который будет использоваться для отображения логотипа. Никогда больше он не должен использоваться в dom. 2. Создайте новый тег для логотипа, например . Они называются "пользовательские элементы". Это должно быть что-то вроде это: 
var logo = document.registerElement('com-logo', {
    prototype: Object.create(HTMLElement.prototype)
});

тогда вам придется отформатировать логотип с помощью CSS.

читать этой чтобы узнать немного больше о пользовательских элементов! :)

1