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

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

25
задан rekire 18 January 2012 в 11:07
поделиться

2 ответа

Пользовательские теги не являются злом

, просто учтите это:

  • Они не распознаются в 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

31
ответ дан 28 November 2019 в 21:05
поделиться

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

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

5
ответ дан 28 November 2019 в 21:05
поделиться