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

в моем 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> семантически верно?

9 ответов


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

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

<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> теги.

обновление:

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


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

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

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

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


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


обновление (потому что все ответы старые):

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

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


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

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

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

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

FYI, то, что вы предлагаете, в значительной степени является XML.


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

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

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

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

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

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

<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, нужно только добавить в заголовок темы.php): -

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

или я что-то пропустила?


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


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

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

вместо:

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

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

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

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

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

то же самое происходит с new HTML5-теги