Стоит ли использовать нестандартные теги на странице HTML для выделения слов?

Я хотел бы знать, является ли хорошей практикой или законным использование нестандартных тегов на странице HTML для определенных пользовательских целей.

Например:

Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Нуллам конквата, фелис ​​сит амет сусципит лаореет, ниси арку аккумсан арку, вел пульвинар одио магна сусципит ми.

Я хочу выделить «consitteur adipiscing elit» как важный и «nisi arcu accumsan arcu», как выделено.

Так что в HTML я бы поставил:

Lorem Ipsum Dolor Sit Amet, <важный> участник, участвующий в элите </ важный>. Нуллам конквата, фелис ​​сит амет сусципит лаореет, <выделено> ниши арку аккумсан арку </ выделено>, vel pulvinar odio magna suscipit mi.

и в CSS:

important {
 background: red
 color: white;
}

highlighted {
 background: yellow;
 color: black;
}

Тем не менее, поскольку это недопустимые теги HTML, это нормально?

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

Ваш вопрос спросил, является ли это " хорошей практикой или законной ".

Во-первых: это законно - по крайней мере, терпимо. Браузеры всегда были запрограммированы на использование тегов, которые они не понимают, даже если это означает, что они просто игнорируют их. Этот HTML-код:

Some <b>bold</b> and some <slanted>italic</slanted>.

Появится так, как будто это каждый браузер:

Некоторые смелые и некоторые курсивом.

Кроме того, большинство браузеров позволяют стилизовать этот элемент в CSS. Так что, если вы добавите следующее определение CSS:

slanted { font-style: italic; }

большинство браузеров теперь будут отображаться следующим образом:

Некоторые смелые и некоторые курсивом .

На самом деле: попробуйте сами . Кстати, это хитрость, которую используют веб-разработчики, чтобы убедиться, что новые теги HTML5 правильно отображаются в старых браузерах.

Однако, это не совсем полная картина. Полный ответ - нет, это не очень хорошая практика . Возможно, вы заметили, что я использовал фразу « большинство браузеров». К сожалению, все версии Internet Explorer до IE9 не в состоянии реализовать это поведение. В IE8 и более ранних версиях приведенный выше код будет выглядеть так:

Некоторые смелые и некоторые курсивом.

В Dive Into HTML5 есть очень подробное описание проблемы , где вы также найдете подробности обходного пути. Однако для обходного пути требуется JavaScript, поэтому он не является чисто HTML-решением и не будет работать во всех сценариях.

Итак, короткий ответ: придерживайтесь только стандартных элементов HTML и стилизуйте их так, как вам нравится в вашем CSS.

Если вам необходимо сохранить семантику <important/>по определенным причинам, вы можете использовать XSL для преобразования ваших пользовательских тегов в действительный HTML. Вы можете прочитать больше на эту тему здесь:

http://www.w3.org/Style/XSL/WhatIsXSL.html

http://www.4guysfromrolla.com/webtech/081300-2.shtml

http://www.ibm.com/developerworks/xml/library/x-tiphtml/index.html

http://www.siteexperts.com/tips/xml/ts01/page5.asp

http://www.htmlgoodies.com/beyond/xml/converting-xml-to-html-using-xsl.html

Вы все еще не можете получить <important/>окончательный вывод HTML, но вы можете автоматически преобразовать его в нечто подобное <span class="important"....

Здесь довольно много ответов, объясняющих, почему вы никогда не должны создавать свои собственные пользовательские теги. Возможно, они все неверны.

WHATWG анализ пользовательских тегов делает вывод, что они приемлемы, соответствуют стандартам (поскольку обработка нераспознанных тегов четко определена) и более доступны, чем, например, стилизация универсального элемента div.

<x-accordion> </ x-accordion> не хуже, чем <div class = "accordion"> </ div> в любом механическом смысле. В отсутствие определения «x-accordion» (или поддержки компонентной модели) оба означают одно и то же, оба могут быть стилизованы одинаково. Один из них - HTMLUnknownElement, другой - HTMLDivElement, и их поверхность API идентична.

То, что вы должны сделать, чего не сделал OP, - это префикс всех пользовательских тегов с 'x-' в соответствии с соглашением. Это ясно указывает на то, что вы хотите, чтобы этот тег был локальным для вашего документа, и избегает конфликтов с будущими элементами спецификации.

Некоторые утверждают, что, поскольку некоторые популярные браузеры не обрабатывают пользовательские теги в соответствии со стандартами, вы не должны их использовать. Тем не менее, поведение несовместимых браузеров является собственной проблемой и, предпочтительно, не заставит вас писать несемантическую разметку. Есть как Javascript, так и не Javascript решения этой проблемы, которые должны применяться только к тем несовместимым браузерам, которые вы хотите специально поддерживать.

С учетом всего этого, если в спецификации существует тег (<mark>), который четко охватывает семантическое значение созданного вами тега (<highlight>), то, безусловно, предпочтительнее использовать существующий тег.

Вы могли бы использовать <em />и<strong /> с пользовательским CSS, чтобы изменить, как он отображается.

Сильный, относится к большей важности.

Акцент, относится к усилению акцента.

С практической точки зрения, нет необходимости использовать новые теги для выделения. Вы можете использовать emили iтег , если вы предпочитаете курсив , как (не CSS) рендеринг по умолчанию и strongили , bесли вы предпочитаете Bolding по умолчанию. Если по какой-то причине вы предпочитаете рендеринг по умолчанию как обычный текст, т.е. без выделения, используйте span. В каждом случае вы можете использовать classатрибут, чтобы отличать это использование от другого использования, которое вы могли бы использовать для разметки.

Спецификации HTML и (HTML5) черновики неясны в отношении семантики этих элементов, но это не должно вызывать какой-либо серьезной головной боли.

Нет, хотя разрешено добавлять новые теги из другого пространства имен в XHTML, обработка тегов HTML, которые не указаны, настоятельно не рекомендуется.

Ну, это законно, потому что тебя не арестуют за это. Но если у вашей двери появятся убийцы из W3C, не удивляйтесь.

Во-первых, другие разработчики не будут знать, что они имеют в виду. В случае <important>и <highlight>они есть, но если вы используете что-то вроде, скажем,<set> вы могли бы знать , вы имеете в виду математический набор, но кто - то читает код может перепутать его для чего - то еще. Без возможности дать ответ, может возникнуть путаница.

Во-вторых, что если W3C решит, что <important>элемент является хорошей идеей, но считает, что это должно означать срочное уведомление, например

<important>This site is going to be down for maintenance 2/29/2012.</important>

Тогда ты облажался. Браузеры и ваши коллеги-разработчики будут в замешательстве. Они, вероятно, заставят вас анализировать ваш код с помощью регулярных выражений, пока вы не сошли с ума. И мы все знаем, как это получается.

В-третьих, IE <9 не позволяет стилизовать неизвестные элементы без небольшого взлома. Не большая вещь, но раздражает.

Наконец, в этом случае <important>и так <highlight>уже существует! <strong>и <mark>это то, что вы ищете. Согласно спецификации HTML5

Сильный элемент представляет большую важность для его содержания.

и

Элемент mark представляет фрагмент текста в одном документе, помеченный или выделенный для справочных целей ...

Если вы не используете его в «справочных целях», то <span>с классом все будет в порядке.

http://www.w3.org/TR/html5/elements.html

Это ревизия 1.5612.

Авторы не должны использовать элементы, атрибуты или значения атрибутов, которые не разрешены настоящей спецификацией или другими применимыми спецификациями, поскольку это значительно усложняет расширение языка в будущем.

Игнорирование мнения всех остальных здесь.

Это не очень хорошая практика по двум очень важным причинам:

Во-первых, вполне возможно, что в какой-то момент комитет по стандартам решит включить названный тэг, <important>который в конечном итоге испортит вам его использование. Конечно, это может занять некоторое время. Но возможно, вы потратите время на то, чтобы потом его разорвать.

Во-вторых, (это реальная причина), программист, который наследует ваш код, либо будет постоянно говорить «wtf» при вашем нестандартном подходе, одновременно вытаскивая все это, либо, что в равной степени возможно, будет сильно смущен тем, что вы сделали и просто расстроились

Так что будь милым. Вы никогда не знаете, вы можете в конечном итоге попросить одного из них на работу в один прекрасный день.

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

Вы могли бы попытаться представить вариант использования для них в w3c, но я сомневаюсь, что он получится где угодно.

Нет, это не очень хорошая практика по всем причинам, указанным в других ответах. Вместо того, чтобы повторять эти пункты, я хотел бы представить вариант, которого я не видел в этих ответах!

В случае отсутствия существующих тегов, семантическое значение которых соответствует вашим целям, вы можете использовать комбинацию CSS и нового data-*атрибута в спецификации HTML 5. Конечно, это будет работать с большинством любых тегов, которые вы выберете.

Пример:

Lorem ipsum dolor sit amet, 
<span class="important" data-type="important">consectetur adipiscing elit</span>. 
Nullam consequat, felis sit amet suscipit laoreet, 
<span class="highlighted" data-type="highlighted">nisi arcu accumsan arcu</span>, 
vel pulvinar odio magna suscipit mi.

Хотя это и не идеальное решение, поскольку для data-*атрибутов нет четко определенного семантического значения , это, по крайней мере, позволит вам предоставить дополнительную информацию тем, кто знает значение вашего data-typeатрибута.