Использование пользовательских тегов HTML

Question

В моем html мне было любопытно, было ли семантически правильно использовать уникальные идентификаторы, такие как <toys> </toys> для хранения изображения, а не <h2>.Например:

Желательно ли иметь: <toys class="grid_4 push_2">&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">&nbsp</h1>

с помощью css:

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

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

Answer 1

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

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

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

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

Answer 2

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

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

<div class="toys grid_4 push_2">&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

Answer 3

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

Answer 4

ОБНОВЛЕНИЕ (потому что все ответы старые):

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

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

Answer 5

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

Answer 6

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

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

<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]-->

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

Answer 7

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

Примерно так:

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

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

Answer 8

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

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

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

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

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

Answer 9

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

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

Вместо:

<h1 class="grid_4 push_2">&nbsp</h1>

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

<h1 class="toys">&nbsp</h1>

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

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

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

Answer 10

Если ваш тип документа установлен на XHTML, у вас все будет в порядке.Но, как правило, это недопустимо для типов документов HTML.