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

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

And here what I could do with custom tags, I think that would be much easier to find my way around, so why not:

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


person martindilling    schedule 18.01.2012    source источник
comment
Этот ответ может вас заинтересовать (не совсем ответ, но очень хорошо объясняет концепцию контекста тега и настройки) .   -  person Purag    schedule 18.01.2012
comment
Это действительно не так просто, как вы думаете.   -  person BoltClock    schedule 18.01.2012


Ответы (5)


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

просто задумайтесь над этим:

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

person DominikGuzei    schedule 26.09.2012
comment
Я не мог не согласиться. Я бы просто добавил это для тех, кого отталкивают неверные ответы некоторых редакторов и валидаторов. wheelcode.blogspot.com/2012/07/html-validation- is-bad.html - person Nathan Bubna; 03.01.2013
comment
Валидаторы HTML все еще могут быть полезны. Время от времени проверяйте свою страницу во время разработки, чтобы найти опечатки в разметке, такие как забытые незакрытые или несоответствующие элементы. Особенно, если ваш редактор не поддерживает вас в этом. Иногда эти ошибки не сразу отображаются в большинстве браузеров, но они могут причинить боль в длительных сеансах поиска, почему этот CSS не работает, как всегда. - person ygoe; 23.02.2014

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

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

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

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

person Erik Funkenbusch    schedule 18.01.2012
comment
Я сбрасываю ul и li и в любом случае определяю свой собственный стиль :\ но да, программы чтения с экрана, еще одна вещь, о которой я не думал :P - person martindilling; 18.01.2012
comment
Если речь идет исключительно о визуальных улучшениях, таких как группировка символов в длинных кодах (подумайте об IBAN или телефонных номерах), и вы не хотите использовать U+2009 и тому подобное для копирования и вставки, небольшой элемент <gap> для стиля letter-spacing не повредит, правильно? Лучше тогда <span class="gap">... - person ygoe; 23.02.2014
comment
@LonelyPixel - HTML является семантическим, а стиль визуальным. Дело в том, что ваши HTML-элементы определяют нечто большее, чем визуальное. Например, тег HTML5 <header> определяет, что его содержимое является частью заголовка, но не определяет, как этот заголовок должен выглядеть. Если что-то чисто визуальное, то оно относится к стилю. - person Erik Funkenbusch; 23.02.2014

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

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

person Quentin    schedule 18.01.2012

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

person Lie Ryan    schedule 18.01.2012
comment
На самом деле я не хочу его использовать, мне больше интересно, ПОЧЕМУ я не могу этого сделать. Что я испорчу, если буду его использовать: P Как и другие ответы: поисковые роботы, программы для чтения с экрана и усложнение работы кроссбраузерности: P - person martindilling; 18.01.2012

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

person Niet the Dark Absol    schedule 18.01.2012
comment
о, поисковые роботы xD не подумали об этом xD, но я уже сбросил списки, которые использую для комментариев, а затем заставил их вести себя так, как я хочу, поэтому я не вижу, что будет намного больше стилей :\ - person martindilling; 18.01.2012
comment
Я действительно не думаю, что поисковые системы получают от ‹div class=commentbox› больше, чем от ‹commentbox›. - person Nathan Bubna; 03.01.2013