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

Ответ 1

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

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

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

UPDATE:

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

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

Ответ 2

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

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

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

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

Ответ 3

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

Ответ 4

UPDATE (потому что все ответы старые):

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

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

Ответ 5

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

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

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

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

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

Ответ 6

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

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

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

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

Ответ 7

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

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

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

Или я что-то не хватает?

Ответ 8

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

Ответ 9

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

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

Вместо:

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

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

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

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

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

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