Чи слід використовувати нестандартні теги на сторінці HTML для виділення слів?

Я хотів би знати, чи є доброю практикою чи законним використання нестандартних тегів на HTML-сторінці для певних спеціальних цілей.

Наприклад:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam posleat, felis sit amet suscipit laoreet, nisi arcu accumsan arcu, vel pulvinar odio magna suscipit mi.

Я хочу виділити "consectetur adipiscing elit" як важливий та "nisi arcu accumsan arcu" як виділений.

Отже, в HTML я б поставив:

Lorem ipsum dolor sit amet, <важливо> consectetur adipiscing elit </important>. Nullam posleat, felis sit amet suscipit laoreet, <освітлений> nisi arcu acumsan arcu </highlight>, 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 користувацьких тегів робить висновок, що вони прийнятні, сумісні із стандартами (оскільки обробка нерозпізнаних тегів чітко визначено) та більш доступні, ніж, наприклад, стилізація загального ключа.

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

Те, що ви повинні зробити, чого не зробив ОП, - це префікс усіх спеціальних тегів з "x-" за умовою. Це чітко вказує на те, що ви маєте намір цей тег бути локальним для вашого документа та уникає конфліктів із майбутніми специфічними елементами.

Деякі стверджують, що оскільки певні популярні браузери не обробляють спеціальні теги відповідно до стандартів, вам не слід їх використовувати. Однак поведінка невідповідних браузерів є власною проблемою, і бажано не змусить вас писати несемантичну розмітку. У цій проблемі є як рішення Javascript, так і не Javascript, які слід застосовувати лише для тих невідповідних браузерів, які ви хочете спеціально підтримувати.

Все, що сказано, якщо тег існує в специфікації (<mark>), яка чітко охоплює смислове значення створеного вами тегу (<highlight>), то, безумовно, краще використовувати існуючий тег.

Ви можете використовувати <em />та за <strong />допомогою спеціального CSS, щоб змінити спосіб відображення.

Сильний, відноситься до більш сильного значення.

Наголос, відноситься до підвищеного наголосу.

З практичної сторони не потрібно використовувати нові теги для виділення. Ви можете використовувати emабо iтеги, якщо ви віддаєте перевагу курсиву в якості відображення за замовчуванням (не CSS) і, strongабо bякщо ви віддаєте перевагу напівжирним шрифтом як за замовчуванням. Якщо з якоїсь причини ви віддаєте перевагу візуалізації за замовчуванням як звичайний текст, тобто відсутність підсвічування, використовуйте 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

Сильний елемент представляє важливе значення для його змісту.

і

Елемент позначення являє собою пробіг тексту в одному документі, позначеному або виділеним для довідок ...

Якщо ви не використовуєте його для "довідкових цілей", <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атрибута.