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

20

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?

rcs20
źródło
56
<span class=..>?
Jake Berger,
12
Z definicji, jeśli są niestandardowe, nie są tagami HTML (które są znormalizowane). Są to tylko elementy, które nie mają określonego znaczenia.
Oded
14
<em>jest w zasadzie twoje <important>i <mark>jest twoje <highlight>.
Peter C
3
Masz rację. Specyfikacja HTML5 mówi, że <strong>jest bardziej odpowiednia pod względem ważności niż <em>jest. Mój błąd.
Peter C

Odpowiedzi:

50

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.

Wyatt Barnett
źródło
3
Prawdopodobnie nie jest zaznajomiony z zajęciami. Składnia jest następująca: HTML <em class="myclass">sample text</em>CSS .myclass: { background: red; etc. } Możesz przypisywać klasy do większości tagów, nie tylko em. Zwykle divlub spando tekstu. Zobacz także
BlueRaja - Danny Pflughoeft,
@ BlueRaja-DannyPflughoeft - klasy rozrzucone po całym kodzie są niewłaściwym sposobem radzenia sobie z tym. Prawdopodobnie lepiej byś zrobił, używając selektorów potomnych z klasą lub dwoma na kontenerach.
Wyatt Barnett
14

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.

Mark Whitaker
źródło
To nie jest legalne. Specyfikacja określa, które elementy są dozwolone. Zdolność przeglądarek do odzyskiwania po błędach autora nie poprawia błędów autora.
Quentin,
Gdzie mogę znaleźć to nielegalne? Próbowałem wyszukać w specyfikacjach HTML, ale nie mogłem znaleźć dobrej referencji.
Dibbeke,
2
@DavidDorward Tak, rozumiem twój punkt widzenia. Miałem na myśli to, że przeglądarki gwarantują, że nie zepsują się, gdy zobaczą nieznany tag - w przeciwieństwie do braku gwarancji wokół, powiedzmy, niezamkniętego tagu. Być może więc poprawny termin jest „tolerowany”, a nie legalny. Odpowiednio zaktualizowałem odpowiedź.
Mark Whitaker
@DavidDorward jest to całkowicie legalne. W3C posunęło się nawet tak daleko w specyfikacji HTML5, aby dyktować, że „Interfejs HTMLUnknownElement musi być używany dla elementów HTML, które nie są zdefiniowane w tej specyfikacji”. Gdyby to nie było legalne, stwierdziliby to. Wydaje mi się, że powstaje pytanie, czy UnknownElement czy Microformats są lepszym podejściem semantycznym do sieci. Niezależnie od tego, co jest lepsze, oba są legalne.
konopie
1
Ze specyfikacji : W odróżnieniu od poprzednich wersji specyfikacji HTML, specyfikacja ta określa szczegółowo wymagane przetwarzanie nieważnych dokumentów, a także ważnych dokumentów. Jednak pomimo tego, że przetwarzanie nieprawidłowych treści jest w większości przypadków dobrze określone, wymagania dotyczące zgodności dokumentów są nadal ważne
Quentin
8

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"....

FrustratedWithFormsDesigner
źródło
8

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.

konopie
źródło
Jeśli ktoś chce zaznaczyć jakiś tekst (np. „Dm7”), aby kliknięcie go spowodowało, że animowany akordeon zagrał siódmy akord d-moll, czy podejście „akordeon x” byłoby dobrym rozwiązaniem? Jeśli JavaScript dla akordeonu wymagałby dodatkowych informacji, jak najlepiej to zanotować? Jak <x-accordion data-notes="D2 D3 F3 A3 C4">Dm7</x-accordion>?
supercat
5

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.

CaffGeek
źródło
4

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.

Jukka K. Korpela
źródło
7
-1 To zła rada. Znaczników emi strongnależy używać, gdy jest to poprawne semantycznie, a nie pogrubioną lub kursywą. Możesz zmienić prezentację za pomocą CSS.
DisgruntledGoat
2

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

Dibbeke
źródło
2

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ą.

Peter C.
źródło
2

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.

zhao
źródło
1
To początek świetnej odpowiedzi; jednak, aby być świetnym, pomocne byłoby dodanie kilku powodów, dla których napisano wytyczne. Również dodanie alternatywnych strategii, które pozwalają na taki sam efekt, ale pasują do wytycznych, jest często postrzegane pozytywnie.
JustinC,
1

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 ja
źródło
0

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.

Ryathal
źródło
0

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.

Andy Hunt
źródło