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

Question

Я нашел сайт с руководством по добавлению пользовательских тегов в 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>

Answer 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

Answer 2

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

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

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

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

Answer 3

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

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

Answer 4

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

Answer 5

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