Блог

В моем HTML мне было любопытно, семантически правильно ли использовать уникальные идентификаторы, такие как <toys> вместо <h1> . Например:

Я хотел иметь:

 <toys class="grid_4 push_2">amp;nbsp;</toys>
  

С помощью CSS:

 toys {
  background: url("toys.png") no-repeat scroll 0 0 transparent;
  width: 181px;
  height: 93px;
  margin-top: -8px;
}
  

В настоящее время у меня есть:

 <h1 class="grid_4 push_2">amp;nbsp;</h1>
  

С помощью CSS:

 h1.push_2 {
  background: url("toys.png") no-repeat scroll 0 0 transparent;
  width: 181px;
  height: 93px;
  margin-top: -8px;
}
  

Является ли использование уникальных идентификаторов типа <toys> семантически правильным?

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

HTML5 уже является движущейся целью; браузеры внедряют спецификации и внедряют инновации разными темпами. Не существует единой вещи, называемой «допустимый HTML», по крайней мере, такой, которую стоит использовать. Если вы создаете общедоступную страницу для каждого пользователя и бота / сканера на планете, то вам уже нужно либо А) определить клиента и соответствующим образом настроить для сложных / продвинутых страниц, либо Б) сделать это действительно простым и понятный. С другой стороны, если вы размещаете его в локальной сети или скрываете за стеной входа в систему, или разрабатываете на самом переднем крае и планируете частые обновления в любом случае, тогда вы можете свободно вносить некоторые новшества по своему усмотрению. Разработчики браузеров и разработчики спецификаций учитывают их потребности, вы можете сделать то же самое.

Итак, если вам нужен пользовательский тег, выбирайте тщательно (здесь я укажу, что вероятность того, что он когда-либо станет частью официальной спецификации реализации браузера, совершенно ничтожна), затем дерзайте. Однако, чтобы заставить ваш CSS работать в IE, вам придется поступить так, как это делает html5shim, и вызвать document.createElement(‘toys’) в вашем javascript.

Я должен также добавить, что пользовательские элементы получают свои собственные стандарты и поддержку, но в настоящее время консенсус заключается в том, что все они должны иметь ‘-‘ в названии. Поэтому я бы порекомендовал что-то вроде ‘x-toys’ или ‘my-toys’ вместо просто ‘игрушки’. Лично я не в восторге от соглашения, но я понимаю причины.

Лучше избегать использования пользовательских тегов, поскольку вы никогда не знаете, когда эти теги могут стать стандартизированными и иметь специальное применение в будущем.

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

 <div class="toys grid_4 push_2">amp;nbsp</div>

.toys {
    background: url("toys.png") no-repeat scroll 0 0 transparent;
    width: 181px;
    height: 93px;
    margin-top: -8px;
}
  

В дополнение:

Если вы не используете стандартные html-теги при проектировании страниц, они не будут отображаться каким-либо организованным образом, когда стили отключены. В дальнейшем это не проблема, но если по какой-либо причине вам понадобилось просмотреть список «игрушек» без стилей, вам не повезло, если вы не используете теги <ul> или <ol> с <li> .

Обновить:

Как указал Флимзи в комментариях, пользовательские HTML-элементы теперь имеют свою собственную спецификацию W3C. Однако они еще не полностью поддерживаются.

• Спецификация: https://www.w3.org/TR/custom-elements /
• Поддержка: http://caniuse.com/#feat=custom-elements

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

ОБНОВИТЬ (поскольку все ответы старые):

Поскольку API веб-компонентов внедряется в каждом крупном браузере, на мой взгляд, вы не сможете избежать использования пользовательских тегов в будущем. Я думаю, веб-компоненты легко станут мейнстримом. На этом построена вся теория: пользовательские теги, пользовательские атрибуты, пользовательский JS, прикрепленный к этим элементам.

Итак, что я говорю: в наши дни неплохо использовать свои собственные теги, но вам все еще нужно подумать о создании, связанном с SEO.

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

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

 <span style="white-space:nowrap">bla bla bla</span>
  

каждый раз я помещаю свой неповрежденный текст в свои собственные теги и определяю в своей таблице стилей:

 nbr {
  white-space:nowrap;
}
  

итак

 <p> This is some text. <nbr>This is some more text.</nbr></p>
  

появится в одной строке, если есть место, в противном случае второе предложение появится в следующей строке. Или, если быть точным, во всех браузерах, кроме старых версий IE. Чтобы все было гладко, я добавил следующее в раздел каждой страницы [head] (в WordPress нужно добавить только в раздел темы header.php ):-

 <!--[if lt IE 9]> 
<script> document.createElement('nbr'); </script>
<![endif]-->
  

Или я что-то упускаю?

Да, это было бы семантически правильно.

Однако это недопустимый синтаксис, поскольку HTML имеет определенный набор тегов.

Вы можете обойти это в некоторых браузерах.

Тем не менее, в чем выгода от этого? Это действительно пошло бы на пользу только тому, кто должен поддерживать исходный код.

К вашему сведению, то, что вы предлагаете, в значительной степени похоже на XML.

Я согласен с @superUntiled, вы должны хорошо использовать селекторы CSS (классы и идентификаторы). Итак, если у вас есть объект типа «toy», вам следует создать класс для этого объекта. Тогда вы могли бы выбрать все свои cars с помощью CSS, просто используя селектор .toy .

Что-то вроде этого:

 <style>
.toy {
    color: red;
}
</style>

<p class="toy">My little car</p>
  

Я также согласен с оригинальным постером в том, что пользовательские элементы могли бы быть лучшим способом, чем классы и идентификаторы CSS. Например, у меня есть друг, который управляет своим инвентарем и контентом для своего веб-сайта в Google Таблицах. Вывод массива Google sheets представляет собой обычный текст. (Интерфейс HTML использует JS для извлечения содержимого из GSheets). Поэтому я устанавливаю пользовательские теги, такие как <sale> , для изменения цвета и стиля шрифта, чтобы мой друг, который не разбирается в программировании, мог просто вставить эти теги в Google sheet для настройки шрифта. Это потрясающе.

Если для вашего doctype установлено значение XHTML, все должно быть в порядке. Но обычно это недопустимо для типов документов HTML.

Вы не хотите создавать свои собственные теги.

HTML-теги определены в спецификации HTML.

Вместо:

 <h1 class="grid_4 push_2">amp;nbsp</h1>
  

Вы должны сделать что-то вроде:

 <h1 class="toys">amp;nbsp</h1>
  

Однако вы можете создавать свои собственные теги, если это XML.

Но, пожалуйста, обратите внимание, что не все браузеры поддерживают ваш тег, и вы не сможете оформить их с помощью CSS.

То же самое происходит с новыми тегами HTML5