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

20

Я хотел бы знать, является ли хорошей практикой или законным использование нестандартных тегов на странице 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, это нормально?

rcs20
источник
56
<span class=..>?
Джейк Бергер
12
По определению, если они являются пользовательскими, они не являются тегами HTML (которые стандартизированы). Это просто элементы, которые не имеют конкретного значения.
Одед
14
<em>в основном твой <important>и <mark>твой <highlight>.
Питер C
3
Ты прав. Спецификация HTML5 гласит, <strong>что больше подходит для важности, чем <em>есть. Виноват.
Питер С.

Ответы:

50

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

Уайетт Барнетт
источник
3
Предположительно, он не знаком с занятиями. Синтаксис: HTML <em class="myclass">sample text</em>CSS. .myclass: { background: red; etc. } Вы можете давать классы большинству тегов, а не только em. Обычно divили spanдля текста. Смотрите также
BlueRaja - Дэнни Пфлюгофт
@ BlueRaja-DannyPflughoeft - классы, разбросанные по всему коду, - неправильный способ справиться с этим. Вы могли бы лучше использовать селекторы потомков с классом или двумя на контейнерах.
Уайетт Барнетт
14

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

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

Марк Уитакер
источник
Это не законно. Спецификация определяет, какие элементы разрешены. Возможность браузеров восстанавливаться после ошибок автора не делает ошибки автора правильными.
Квентин
Где я могу найти это не законно? Я попытался найти в спецификациях HTML, но не смог найти хорошую ссылку.
Диббеке
2
@DavidDorward Да, я понимаю вашу точку зрения. Я имел в виду, что браузеры гарантируют, что они не сломаются, когда увидят неизвестный тег, а не гарантируют отсутствие, скажем, закрытого тега. Так что, возможно, правильный термин здесь «допустимый», а не юридический. Я обновил ответ соответственно.
Марк Уитакер
@DavidDorward это абсолютно законно. W3C даже зашел так далеко в спецификации HTML5, что установил, что «интерфейс HTMLUnknownElement должен использоваться для элементов HTML, которые не определены в этой спецификации». Если бы это не было законно, они бы заявили об этом. Я думаю, что возникает вопрос о том, являются ли UnknownElement или микроформаты лучшим семантическим подходом для Интернета. Независимо от того, что лучше, оба законны.
конопля
1
Из спецификации : В отличие от предыдущих версий спецификации HTML, эта спецификация в некоторых деталях определяет необходимую обработку недействительных документов, а также допустимых документов. Однако, хотя обработка недействительного контента в большинстве случаев четко определена, требования к соответствию для документов по-прежнему важны
Квентин
8

Если вам необходимо сохранить семантику <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"....

FrustratedWithFormsDesigner
источник
8

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

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

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

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

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

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

конопля
источник
Если кто-то хочет пометить какой-нибудь текст (например, «Dm7»), чтобы щелчок по нему заставлял анимированный аккордеон сыграть ре минорную седьмую аккорд, будет ли подход «x-аккордеон» подходить? Если Javascript для аккордеона потребуется дополнительная информация, как это лучше всего записать? Как <x-accordion data-notes="D2 D3 F3 A3 C4">Dm7</x-accordion>?
суперкат
5

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

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

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

CaffGeek
источник
4

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

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

Юкка К. Корпела
источник
7
-1 Это плохой совет. emИ strongметки должны быть использованы , когда это семантически правильно сделать так, не тогда , когда вы хотите , полужирным шрифтом или курсивом. Вы можете изменить презентацию с помощью CSS.
Рассерженная шлюха
2

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

Dibbeke
источник
2

Ну, это законно, потому что тебя не арестуют за это. Но если у вашей двери появятся убийцы из 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>с классом все будет в порядке.

Питер С
источник
2

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

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

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

Zhao
источник
1
Это начало отличного ответа; однако, чтобы быть замечательным, было бы полезно добавить некоторые причины, по которым было написано руководство. Кроме того, добавление альтернативных стратегий, которые допускают тот же эффект, но соответствуют директиве, часто рассматривается благоприятно.
JustinC
1

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

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

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

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

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

Не я
источник
0

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

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

Ryathal
источник
0

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

В случае отсутствия существующих тегов, семантическое значение которых соответствует вашим целям, вы можете использовать комбинацию 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атрибута.

Энди Хант
источник