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

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

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

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

Также стоит отметить, что пользовательские элементы получают свои собственные стандарты и поддержку, но на данный момент консенсус заключается в том, что в их именах должен быть дефис ('-'). Поэтому я бы рекомендовал использовать что-то вроде 'x-toys' или 'my-toys' вместо просто 'toys'. Лично мне не очень нравится эта конвенция, но я понимаю причины её существования.

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

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

<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. Однако они пока не имеют полной поддержки.

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

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

Обновление (поскольку все ответы устарели):

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

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

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

В вашем примере, чтобы контролировать переносы строк на страницах, вы используете собственный тег <nbr> и задаете ему стиль white-space: nowrap в CSS. Это действительно позволяет вам не повторять одно и то же свойство в каждом элементе, что делает код более чистым и управляемым.

К примеру, вы можете использовать:

<p> Это какой-то текст. <nbr>Это еще один текст.</nbr></p>

Если ширина позволяет, весь текст будет на одной строке, но если нет — вторая часть текста уйдет на новую строку, как вы и ожидали. Однако, как вы отметили, это может не сработать в старых версиях Internet Explorer, поэтому вы правильно сделали, добавив скрипт для создания элемента <nbr> в условном комментарии, чтобы обеспечить поддержку в этих браузерах.

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