Czy powinienem używać niestandardowych tagów na stronie HTML do podświetlania słów?

Chciałbym wiedzieć, czy stosowanie niestandardowych tagów na stronie HTML do pewnych niestandardowych celów jest zgodne z prawem lub legalne.

Na przykład:

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

Chcę podkreślić „consectetur adipiscing elit” jako ważny i „nisi arcu accumsan arcu”, jak podkreślono.

Więc w HTML umieściłbym:

Lorem ipsum dolor sit amet, <important> consectetur adipiscing elit </important>. Nullamsequat, felis sit amet suscipit laoreet, <highlighted> nisi arcu accumsan arcu </highlighted>, vel pulvinar odio magna suscipit mi.

oraz w CSS:

important {
 background: red
 color: white;
}

highlighted {
 background: yellow;
 color: black;
}

Ponieważ jednak nie są to prawidłowe tagi HTML, czy to w porządku?

Nie, to nie jest dobra praktyka. Powinieneś używać już semantycznych, znaczących znaczników - być może <em>w tym przypadku - i stosować style CSS, aby osiągnąć swoje wymagania projektowe.

Twoje pytanie dotyczy tego, czy jest to „ dobra praktyka czy legalne ”.

Po pierwsze: jest to w pewnym sensie legalne - przynajmniej tolerowane. Przeglądarki zawsze były zaprogramowane do radzenia sobie z tagami, których nie rozumieją, nawet jeśli oznacza to, że po prostu je ignorują. Ten kod HTML:

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

Pojawi się tak, jakby to była każda przeglądarka:

Niektóre pogrubienie i kursywa.

Co więcej, większość przeglądarek pozwoli ci stylizować ten element w CSS. Więc jeśli dodasz następującą definicję CSS:

slanted { font-style: italic; }

większość przeglądarek będzie teraz renderować w następujący sposób:

Niektóre pogrubienie i kursywa .

Naprawdę: spróbuj sam . Nawiasem mówiąc, jest to sztuczka, której twórcy stron internetowych starają się zapewnić, aby nowe tagi HTML5 wyświetlały się poprawnie w starszych przeglądarkach.

Nie jest to jednak pełny obraz. Pełna odpowiedź brzmi „ nie”, nie jest to dobra praktyka . Być może zauważyłeś moje użycie wyrażenia „ większość przeglądarek”. Niestety wszystkie wersje przeglądarki Internet Explorer wcześniejszej niż IE9 nie implementują tego zachowania. W IE8 i wcześniejszych powyższy kod nadal będzie wyglądał następująco:

Niektóre pogrubienie i kursywa.

W Dive Into HTML5 znajduje się wyjątkowo szczegółowy opis problemu , w którym znajdziesz także szczegółowe informacje o obejściu. Jednak obejście wymaga JavaScript, więc nie jest to czyste rozwiązanie HTML i nie będzie działać we wszystkich scenariuszach.

Krótka odpowiedź: trzymaj się tylko standardowych elementów HTML i stylizuj je według własnego uznania w CSS.

Jeśli chcesz zachować semantykę z <important/>określonych powodów, możesz użyć XSL do przekształcenia niestandardowych tagów w prawidłowy HTML. Możesz przeczytać więcej na ten temat tutaj:

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

Nadal nie możesz mieć <important/>końcowego wyniku HTML, ale możesz go automatycznie przekształcić w coś takiego <span class="important"....

Istnieje tutaj wiele odpowiedzi wyjaśniających, dlaczego nigdy nie należy tworzyć własnych tagów niestandardowych. Prawdopodobnie wszystkie są nieprawidłowe.

Analiza WHATWG niestandardowych tagów stwierdza, że ​​są one akceptowalne, zgodne ze standardami (ponieważ obsługa nierozpoznanych tagów jest dobrze zdefiniowana) i bardziej dostępne niż, na przykład, stylizowanie ogólnego div.

<x-accordion> </x-accordion> nie jest gorszy niż <div class = "harmonijka"> </div> w każdym sensie mechanicznym. W przypadku braku definicji „akordeonu x” (lub obsługi modelu komponentowego) oba oznaczają to samo, oba mogą być stylizowane w ten sam sposób. Jeden to HTMLUnknownElement, drugi to HTMLDivElement, a ich powierzchnia API jest identyczna.

To, co powinieneś zrobić, czego OP nie zrobił, to poprzedzić wszystkie niestandardowe tagi „x-” zgodnie z konwencją. Wyraźnie oznacza to, że ten tag ma być lokalny dla twojego dokumentu i pozwala uniknąć konfliktów z przyszłymi elementami specyfikacji.

Niektórzy twierdzą, że ponieważ niektóre popularne przeglądarki nie obsługują tagów niestandardowych w sposób zgodny ze standardami, nie należy ich używać. Jednak zachowanie niezgodnych przeglądarek jest własnym problemem i najlepiej nie zmusza cię do pisania znaczników nie semantycznych. Istnieją zarówno rozwiązania JavaScript, jak i inne niż JavaScript, które powinny być stosowane tylko w tych niezgodnych przeglądarkach, które chcesz w szczególności obsługiwać.

To powiedziawszy, jeśli znacznik istnieje w specyfikacji (<mark>), która wyraźnie obejmuje semantyczne znaczenie utworzonego znacznika (<highlight>), to z pewnością lepiej jest użyć istniejącego znacznika.

Możesz użyć <em />iz <strong />niestandardowym CSS, aby zmienić sposób jego wyświetlania.

Silny, odnosi się do większego znaczenia.

Nacisk odnosi się do zwiększonego nacisku.

Z praktycznego punktu widzenia nie trzeba używać nowych tagów do podświetlania. Można użyć emlub itagi jeśli wolisz kursywy jako domyślny (non-renderingu i CSS) stronglub bjeśli wolisz pogrubienie jako domyślne. Jeśli z jakiegoś powodu wolisz domyślny rendering jako zwykły tekst, tzn. Bez podświetlania, użyj span. W każdym przypadku możesz użyć classatrybutu, aby odróżnić to użycie od innych zastosowań, które możesz mieć dla znaczników.

Specyfikacje HTML i wersje robocze (HTML5) są niejasne w odniesieniu do semantyki tych elementów, ale nie musi to powodować poważnego bólu głowy.

Nie, chociaż dozwolone jest dodawanie nowych znaczników z innej przestrzeni nazw w XHTML, przetwarzanie nieokreślonych znaczników HTML jest zdecydowanie odradzane.

Cóż, to legalne, że nie zostaniesz aresztowany za to. Ale jeśli zabójcy z W3C pojawią się u twoich drzwi, nie zdziw się.

Po pierwsze, inni deweloperzy nie będą wiedzieć, co mają na myśli. W przypadku <important>i <highlight>są, ale jeśli użyjesz czegoś takiego, powiedzmy, <set>możesz wiedzieć, że masz na myśli zestaw matematyczny, ale ktoś inny czytający Twój kod może pomylić go z czymś innym. Bez specyfikacji, która mogłaby dać odpowiedź, mogłoby być wiele zamieszania.

Po drugie, co jeśli W3C zdecyduje, że <important>element jest dobrym pomysłem, ale uważa, że ​​powinno to oznaczać pilne powiadomienie, takie jak

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

Więc jesteś pieprzony. Przeglądarki i inni programiści będą raczej zdezorientowani. Prawdopodobnie zmuszą cię do parsowania kodu z wyrażeniami regularnymi, dopóki nie oszalejesz. I wszyscy wiemy, jak to się okazuje.

Po trzecie, IE <9 nie pozwala stylizować nieznanych elementów bez małego włamania. Nic wielkiego, ale irytujące.

Wreszcie w tym przypadku <important>i <highlight>już istnieją! <strong>i <mark>są tym, czego szukasz. Zgodnie ze specyfikacją HTML5

Silny element ma duże znaczenie dla jego zawartości.

i

Element znacznika reprezentuje ciąg tekstu w jednym dokumencie oznaczonym lub wyróżnionym w celach informacyjnych ...

Jeśli nie używasz go do „celów odniesienia”, <span>dobrze byłoby z klasą.

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

To jest wersja 1.5612.

Autorzy nie mogą używać elementów, atrybutów lub wartości atrybutów, które są niedozwolone w niniejszej specyfikacji lub innych mających zastosowanie specyfikacjach, ponieważ czyni to znacznie trudniejszym do rozszerzenia języka w przyszłości.

Ignorowanie wszystkich innych opinii tutaj.

To nie jest dobra praktyka z dwóch bardzo ważnych powodów:

Po pierwsze, jest całkowicie możliwe, że w pewnym momencie komitet normalizacyjny zdecyduje się na umieszczenie tagu o nazwie, <important>który ostatecznie będzie go wykańczał. Jasne, może to trochę potrwać ... Ale możliwe, że będziesz tracić czas na wyrywanie go później.

Po drugie (jest to prawdziwy powód) programista, który dziedziczy twój kod, albo będzie ciągle powtarzał „wtf” przy twoim niestandardowym podejściu, jednocześnie wyciągając to wszystko, lub, co równie możliwe, będzie całkowicie zdezorientowany tym, czym jesteś zrobiłem i po prostu przestałem frustrować.

Więc bądź miły. Nigdy nie wiadomo, może kiedyś poprosisz jednego z nich o pracę.

Nie, nie możesz tworzyć własnych tagów HTML, ponieważ musiałbyś wtedy zaimplementować je we wszystkich głównych przeglądarkach. Obecnie, gdy przeglądarki znajdą nierozpoznany tag, ignorują wszystko, więc jeśli nie chcesz, aby twoja przeglądarka tworzyła nową tag jest bezcelowy i nawet wtedy działałyby tylko w przeglądarce.

Możesz spróbować przesłać dla nich skrzynkę użytkową do w3c, ale wątpię, by trafił gdziekolwiek.

Nie, to nie jest dobra praktyka z wszystkich powodów podanych przez wszystkie inne odpowiedzi. Zamiast powtarzać te kwestie, chciałbym przedstawić opcję, której nie widziałem w tych odpowiedziach!

W przypadku braku tagów, których znaczenie semantyczne pasuje do twoich celów, możesz użyć kombinacji CSS i nowego data-*atrybutu w specyfikacji HTML 5. Oczywiście będzie to działać z większością wybranych tagów.

Przykład:

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.

Chociaż nie jest to idealne rozwiązanie, ponieważ nie ma dobrze zdefiniowanego znaczenia semantycznego dla data-*atrybutów, pozwoli to przynajmniej zapewnić dodatkowe informacje tym, którzy znają znaczenie twojego data-typeatrybutu.