Можно ли использовать неизвестные теги HTML?
Поправьте меня, если я ошибаюсь, но AFAIK, неизвестные теги HTML в разметке (то есть теги, не определенные в спецификации HTML, как, скажем, <foobar>) в конечном итоге будет рассматриваться как обычный <div> в среде браузера HTML 5.
Я думаю: насколько эта практика поддерживается? Я имею в виду, если я использую неизвестные теги HTML в моей разметке, какие подводные камни я могу ожидать? Может ли в ближайшие несколько секунд на меня обрушится велоцираптор?
Я спрашиваю, почему эти теги <div> Я могу потенциально использовать эти теги более семантическим образом, чем, скажем, присваивать имена классов, которые идентифицируют модули. Взгляните на эту статью, например, .media класс Теперь, что если вместо написания этого CSS для цели .media Я ставлю это целью <media> вместо? На мой взгляд, это делает разметку более читабельной и понятной, но я признаю, что это не "правильный" HTML.
РЕДАКТИРОВАТЬ
Просто чтобы быть прозрачным, я нашел этот вопрос несколько лет назад. Это было закрыто как не по теме, но я чувствую, что у меня есть верный смысл в моей собственной формулировке. Я признаю, что это близкий дубликат, но это было сделано несколько лет назад, поэтому, возможно, произошли изменения в общей среде мнений веб-разработчиков по этой теме.
13 ответов
Вы всегда должны подходить к HTML, как это определено в соответствующей спецификации. "Определение" новых тегов - это немного экстремальный подход. Он может пройти проверку браузера, потому что он реализует различные сбои, но это не гарантируется. Вы в лучшем случае входите в страну неопределенного поведения. Не говоря уже о том, что вы не пройдете валидационные тесты, но вы, кажется, об этом знаете.
Если вы хотите быть более семантически выразительным в своей разметке, вы можете использовать HTML5, который определяет довольно много более описательных тегов для описания структуры вашей страницы вместо общего divы, которые должны быть добавлены idс или classэс.
В конце, короткий ответ: нет, это плохая практика, вы не должны этого делать, и в дальнейшем у вас могут возникнуть непредвиденные проблемы.
У user1309389 был очень хороший ответ, и я согласен с обращением к спецификации. Но я не согласен с их заключением, и я думаю, что они не правы по поводу вымышленных элементов, ведущих к "неопределенному поведению". Я хочу предложить альтернативный способ мышления, основанный на том, как спецификация и браузеры на самом деле обрабатывают выдуманные элементы.
Сейчас 2015 год, мы находимся на грани широкого применения спецификации CustomElement, и полифиллы легко доступны. Сейчас самое время задуматься о "создании своих собственных элементов". В ближайшем будущем вы сможете создавать новые элементы с собственным выбором тегов и поведения в полностью стандартном и поддерживаемом виде, который может понравиться каждому. Но до тех пор, пока это не произойдет во всех браузерах, и пока большинство людей не используют поддерживающие браузеры, вы можете воспользоваться тяжелой работой проектов Polymer или X-Tags, чтобы проверить будущее пользовательских элементов в почти стандартном и в основном -поддерживаемый способ, что немало людей могут любить. Это, вероятно, "правильная вещь", чтобы сделать. Но это не отвечает на ваш вопрос, и, откровенно говоря, я считаю, что "просто используйте X" или "не делайте X" менее полезно, чем "вот как спецификация покрывает это, и вот что делают браузеры". Итак, вот что я люблю.
Вопреки сердечной рекомендации (и иногда кричащей) большей части сообщества веб-разработчиков, я работал с "вымышленными" элементами в течение прошлого года, во всех моих производственных проектах, без полифилла, и у меня было нет неразрешимых вопросов (пока) и жалоб нет. Как? Опираясь на стандартное поведение HTMLUnknownElement, часть спецификации W3C, которая охватывает случай " готовых " элементов. Если браузер обнаруживает нераспознанный элемент HTML, существует четко определенный и недвусмысленный способ его обработки, и HTMLUnknownElement определяет это поведение, и вы можете основываться на нем. HTMLUnknownElement также должен быть достаточно мощным и корректным, чтобы "не ломать сеть" при обнаружении всех устаревших тегов, таких как <blink> тег. Не рекомендуется использовать HTMLUnknownElement, но в теории и на практике это абсолютно не повредит, если вы знаете, что делаете.
Так как же работает HTMLUnknownElement? Это просто расширение интерфейса HTMLElement, который является стандартным интерфейсом, лежащим в основе всех элементов HTML. Однако, в отличие от большинства других элементов, HTMLUnknownElement не добавляет никакого особого поведения - вы получаете необработанный элемент, не украшенный каким-либо особым поведением и не ограничивающий правила использования. Интерфейс HTMLDivElement работает практически точно так же, расширяя HTMLElement и почти не добавляя дополнительного поведения. Проще говоря, создание собственного элемента практически идентично использованию div или span.
Что мне нравится в элементах "макияжа", так это изменение мышления. Вы должны использовать или изобретать HTML-элементы, основываясь на нескольких факторах, начиная от того, насколько четко они делают разметку для чтения, до того, как браузер, программы чтения с экрана и поисковые системы анализируют ваш код, до того, насколько вероятно, что ваш код будет "правильным" для некоторых пользователей. объективная мера. Я экономно использую готовые элементы, но использую их в точности так, как описал Ричард, чтобы сделать вещи более значимыми для автора HTML, а не только для компьютерного сервиса, который извлекает метаданные. При последовательном использовании в команде может быть большая выгода, поскольку вымышленные элементы могут кратко выражать то, для чего они предназначены.
Мне особенно нравится использовать готовые элементы, чтобы указать, когда я буду использовать JS для определения дополнительного поведения для элемента. Например, если у меня есть элемент, в который будут добавлены / удалены дочерние элементы с помощью JS, я буду использовать готовый элемент в качестве подсказки, что этот элемент подвергается особому поведению. К тому же, я не использую готовый элемент, когда достаточно стандартного элемента. Ты увидишь <dynamic-list> жить счастливо рядом с <div> в моем коде.
Теперь о тех надоедливых валидаторах. Да, использование вымышленных элементов не является "допустимым" в том смысле, что оно не пройдет "валидатор". Но многие часто используемые функции, шаблоны и системы современной разработки HTML и JS не работают со всеми валидаторами W3C. Валидаторы - это не закон, а спецификация. И закон не является обязательным - реализации во всех браузерах. В течение многих лет полезность валидаторов уменьшалась, так как гибкость HTML увеличивалась, а браузеры изменили свои отношения к спецификации. Валидаторы отлично подходят для людей, которые не знакомы с HTML и нуждаются в руководстве. Но если вам удобно руководствоваться спецификациями и реализациями браузеров, нет причин беспокоиться о том, что валидатор провалится. Конечно, если вы будете следовать многим рекомендациям, предлагаемым Google, Apple, Microsoft и т. Д., Для реализации каких-либо экспериментальных функций, вы будете работать за пределами валидатора. Это абсолютно нормально, если вы делаете это осознанно и знаете достаточно о том, что делаете.
Поэтому, если вы собираетесь создавать свои собственные элементы и полагаться на HTMLUnknownElement, не просто относитесь к нему как к дикому западу. Вы должны следовать нескольким простым правилам.
Вы должны использовать дефис в названии вашего тега. Если вы это сделаете, вы гарантированно никогда не столкнетесь с будущей редакцией спецификации HTML. Так никогда не говори
<wrong>, всегда говори<quite-right>,Готовые элементы не могут быть самозакрывающимися - их нужно закрывать закрывающим тегом. Ты не можешь просто сказать
<wrong>или же<still-wrong />, ты должен сказать<totally-good></totally-good>,Вы должны определить
displayсвойство для вашего элемента в CSS, в противном случае поведение рендеринга не определено.
Вот и все. Если вы делаете это, вы должны хорошо использовать готовые элементы в IE9 и выше, полагаясь на сеть безопасности HTMLUnknownElement. Для меня преимущества намного, намного превышают затраты, поэтому я активно использовал этот шаблон. Я управляю сайтом SaaS, обслуживающим крупные промышленные корпорации, и до сих пор у меня не было никаких проблем или жалоб. Если вам необходимо поддерживать более старые версии IE, разумно держаться подальше от любой технологии "2015" или их грубых приближений и оставаться в безопасности в проторенных частях спецификации.
Итак, в итоге, ответ на ваш вопрос "да, если вы знаете, что делаете".
Нет. Вы не пройдете валидацию, вы получите случайные проблемы через браузер, и вы будете съедены указанными динозаврами. CSS - это ответ, если вы хотите, чтобы ваша страница работала предсказуемо.
Да, мы можем.
Существует новая спецификация о пользовательских элементах / тегах - http://w3c.github.io/webcomponents/spec/custom/.
Единственная проблема с этим - вы должны использовать js для регистрации вашего нового элемента.
Вы можете прочитать больше об этом на
https://developers.google.com/web/fundamentals/getting-started/primers/customelements
W3C говорит:
HTML5 поддерживает неизвестные теги как встроенные элементы, но он рекомендует стилизацию CSS для этого.
Вот источник: https://www.w3schools.com/html/html5_browsers.asp
Правило № 1 совместимости браузера: не допускайте ошибок. Независимо от того, сколько браузеров вы тестируете, всегда есть браузеры, которые вы не можете протестировать, например, потому что они еще не существуют.
Кроме того, неизвестные элементы будут рассматриваться как <span>не <div> большинством браузеров в настоящее время.
Если вам действительно нужна читаемость исходного кода (*), вам следует изучить XML+XSLT.
Таким образом, вы можете использовать все имена тегов, которые вы хотите, и заставить их вести себя так, как вам нравится, и вам не нужно беспокоиться о том, что <media> будет реальным элементом в будущей версии HTML.
Один хороший пример из реального мира - это элемент <picture>, Если веб-сайт когда-либо использовал <picture> и полагался на то, что этот элемент сам по себе не имеет стилей или специального содержания, у них сейчас проблемы!
(*) С XML + XSLT читаемость будет в части XML, а не в части XSLT, очевидно.
В моем случае я использую их в игровой графический интерфейс на базе Webkit, и все работает.
Обычно не рекомендуется, например, IE не применяет css-стили к неизвестным тегам.
Все остальные браузеры отображают неизвестные теги как inline-Элементы (что вызывает проблемы с вложенностью).
Я рекомендую вам следующую статью: http://diveintohtml5.info/ Есть раздел о неизвестных тегах.
Единственный недостаток, который меня беспокоит, это то, что если пользовательский тег, который я использую сейчас, станет официальным HTML-тегом в следующем году или даже позже?
Поэтому как насчет этого: вместо пользовательских тегов используйте "div" + собственный CSS-класс.
CSS-классы должны быть индивидуальными, определенно хорошо иметь свои собственные CSS-классы. Затем ваш div может иметь любое количество CSS-классов, связанных с ним, что делает семантический механизм еще более гибким, вы можете назвать его множественным наследованием.
Вместо div вы можете использовать span для той же цели. Я хотел бы использовать что-то более короткое на самом деле, скажем p, но, к сожалению, p имеет свое особое поведение, которое происходит, если вы не закрываете его.
Но определенно, если вы идете по пути выражения семантики с помощью CSS-классов, тогда это поможет использовать имя тега, которое является максимально коротким. Я хотел бы, чтобы было что-то короче, чем div, скажем, например, т для тега.
По умолчанию пользовательские элементы являются основными частями многих JavaScript-Framwork. Это современный JavaScript:
var XFoo = document.registerElement('x-foo', {
prototype: Object.create(HTMLElement.prototype)
});
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements https://www.html5rocks.com/en/tutorials/webcomponents/customelements/
Можно ли использовать неизвестные теги HTML? Если вы задаете неправильные вопросы, вы всегда получаете неправильные ответы. Если вы определяете свой неизвестный тег с помощью javascript как CustomeElement, ваш неизвестный тег больше не является частью определения HTML5 / HTML.
Да, вы можете использовать неизвестные теги, если вы определите тег в своем javascript.
В вашем примере вы говорите о <media>, это может быть здорово, но если html6 добавит этот тег для другого элемента, ваш код не будет ретро-совместимым.
Это плохая практика, и вы не должны это делать. Браузер отображает его как div в качестве резервного решения в большинстве случаев, но он не является действительным html и, следовательно, никогда не пройдет проверку на валидность.
Что не так с разумным использованием ваши вещи здесь - >. Он работал для сценариев еще во времена мелово-палеогеновой границы. К тому времени динозавры перестали быть проблемой, кроме летающих пернатых.