Пользовательские теги... почему бы и нет?

Я нашел сайт с руководством по добавлению пользовательских тегов в html, так же, как люди делают, т.е. работают с новыми тегами HTML5. Должен признаться, я думаю, было бы здорово добавить свои собственные теги, упростить "сканирование" кода и найти то, что вы ищете. Но каждый сайт, который я нашел об этом, люди говорят, что это нехорошо.... но почему это не хорошо?

Пример html с классом:

<ul class="commentlist">
    <li class="comment odd">
    <div class="1">
        <div class="avatar">
            <img src="http://placehold.it/60x60" width="60" height="60" />
        </div>
        <div class="metadata">
            <div class="name">Name</div>
            <p>response1</p>
        </div>
    </div>
    <ul class="children">
        <li class="comment even">
            <div class="2">
                <div class="avatar">
                    <img src="http://placehold.it/60x60" width="60" height="60" />
                </div>
                <div class="metadata">
                    <div class="name">Name</div>
                    <p>response1a</p>
                </div>
            </div>
        </li>
        <li class="comment odd">
            <div class="3">
                <div class="avatar">
                    <img src="http://placehold.it/60x60" width="60" height="60" />
                </div>
                <div class="metadata">
                    <div class="name">Name</div>
                    <p>response1b</p>
                </div>
            </div>
        </li>
    </ul>
</li>

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

<clist>
<ccommentbox class="odd">
    <ccomment class="1">
        <cavatar>
            <img src="http://placehold.it/60x60" width="60" height="60" />
        </cavatar>
        <cdata>
            <cname>Name</cname>
            <ctext>response1</ctext>
        </cdata>
    </ccomment>
    <cchildren>
        <ccommentbox class="even">
            <ccomment class="2">
                <cavatar>
                    <img src="http://placehold.it/60x60" width="60" height="60" />
                </cavatar>
                <cdata>
                    <cname>Name</cname>
                    <ctext>response1a</ctext>
                </cdata>
            </ccomment>
        </ccommentbox>
        <ccommentbox class="odd">
            <ccomment class="3">
                <cavatar>
                    <img src="http://placehold.it/60x60" width="60" height="60" />
                </cavatar>
                <cdata>
                    <cname>Name</cname>
                    <ctext>response1b</ctext>
                </cdata>
            </ccomment>
        </ccommentbox>
    </cchildren>
</ccommentbox>

Ответы

Ответ 1

Пользовательские теги не злы

просто подумайте об этом:

  • Они не распознаются в IE 6-8 по умолчанию → вам нужно использовать JavaScript для представления каждого настраиваемого тега, который вы используете на странице, например: document.createElement('custom-tag') Это означает, что ваш веб-сайт будет отображаться корректно с включенным JavaScript на
  • В большинстве браузеров ваши пользовательские теги будут обрабатываться как встроенные элементы типа <span>, это означает, что вам нужно написать CSS, чтобы объявить их как custom-tag { display: block }
  • Я не нашел ресурса, который мог бы доказать, что пользовательские теги оказывают негативное влияние на поисковые системы. Фактически Google выпустил Angular.js, который продвигает пользовательские теги (<pane> и <tab>) в своих примерах на .
  • Большинство редакторов HTML будут отмечать ваши пользовательские теги как недопустимые HTML, потому что они не входят в официальную спецификацию.

Подводя итог:

  • Используйте специальные теги, когда есть важные элементы, которые имеют больше значение <div> и не существует HTML 4/5 эквивалент. Это особенно верно для веб-приложений, которые проанализировать DOM для специальных тегов/атрибутов/классов для создания компоненты (например, Angular.js).
  • Если все, что вы создаете, это простой веб-сайт с обычным контентом, к стандартному HTML. Вы хотите, чтобы ваш сайт работал и без Включен JavaScript.
  • Если вы создаете веб-приложение, где пользовательские теги могут действительно помочь сделать источник чище и выразить специальную семантику, использовать их. Все негативные последствия, упомянутые выше (JavaScript должен быть включено/объявление CSS) не будет иметь значения для этих случаев. Такой же правила применяются к пользовательским атрибутам.

Подробнее об этой теме: совместимость IE для Angular.js

Ответ 2

Существует несколько причин, почему вы не должны этого делать.

  • Сначала:. Создавая собственные теги, вы теряете функциональность тегов, например ul and li. Ваши пользовательские теги будут просто разделяющими div, и это не даст вам результатов, которые вы ищете. Да, вы можете стилизовать теги, чтобы дублировать эти функции, но зачем тратить все это время на то, что уже делает браузер.

  • Вторые: Люди с ограниченными возможностями не смогут использовать ваш сайт, потому что он не будет соответствовать стандартным HTML. Те, кто слепые, будут использовать вспомогательные технологии, которые читают html и представляют содержание в устной форме.

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

Ответ 3

Элементы, определенные в HTML, имеют семантику. Они могут быть поняты браузерами (особенно полезными, если у них нет поддержки CSS), программами для чтения с экрана, поисковыми системами и любым другим пользовательским агентом, а затем выражаются пользователю.

Ваши собственные элементы бессмысленны.

Ответ 4

Я думаю, вы хотите использовать XSLT, чтобы преобразовать ваш XML в действительный HTML. Если вы вводите свой собственный тег, вы больше не пишете HTML, но, вероятно, XML или SGML.

Ответ 5

Ну, с одной стороны, вам нужно будет определить CSS для всех тех пользовательских элементов, которые будут вести себя так, как вы хотите (например, сделать <ccommentbox> похожим на список), что вызывает ненужный CSS. Это также затрудняет понимание поисковыми роботами вашего сайта.