Nie udało mi się znaleźć ostatecznej odpowiedzi na pytanie, czy tagi niestandardowe są prawidłowe w HTML5, na przykład:
<greeting>Hello!</greeting>
Nie znalazłem nic w specyfikacji w ten czy inny sposób:
http://dev.w3.org/html5/spec/single-page.html
I tagi niestandardowe nie wydają się sprawdzać poprawności za pomocą walidatora W3C.
html
custom-element
d13
źródło
źródło
Odpowiedzi:
Specyfikacja elementów niestandardowych jest dostępna w Chrome i Operze i staje się dostępna w innych przeglądarkach . Umożliwia rejestrowanie niestandardowych elementów w formalny sposób.
Elementy niestandardowe są częścią większej specyfikacji W3 o nazwie Składniki sieciowe , wraz z szablonami, importami HTML i Shadow DOM.
Jednak z tego doskonałego przewodnika dla programistów Google na temat niestandardowych elementów v1:
Niektóre zasoby
źródło
Jest to możliwe i dozwolone:
http://www.w3.org/TR/html5/infrastructure.html#extensibility-0
Ale jeśli zamierzasz dodać interaktywność, musisz unieważnić dokument (ale nadal w pełni funkcjonalny), aby obsługiwać IE 7 i 8.
Zobacz http://blog.svidgen.com/2012/10/building-custom-xhtml5-tags.html (mój blog)
źródło
Uwaga: Poniższa odpowiedź była poprawna, kiedy została napisana w 2012 roku. Od tego czasu sytuacja potoczyła się nieco dalej. Specyfikacja HTML definiuje teraz dwa typy elementów niestandardowych - „autonomiczne elementy niestandardowe” i „niestandardowe elementy wbudowane”. Te pierwsze mogą iść wszędzie, gdzie oczekuje się frazowania treści; czyli większość miejsc wewnątrz ciała, ale nie np. elementy potomne elementów ul lub ol, lub w elementach tabeli innych niż td, th lub caption. Te ostatnie mogą iść wszędzie tam, gdzie może iść element, który przedłużają.
Jest to w rzeczywistości konsekwencja akumulacji modelu zawartości elementów.
Na przykład element główny musi być
html
elementem.html
Element może zawierać tylko pierwiastek głowy a następnie przez element nadwozia.body
Element może zawierać tylko zawartość przepływu , gdzie zawartość przepływu jest zdefiniowany jako elementy: a, abbr, adres, obszar (jeśli jest potomkiem elementu mapy), artykuł, na bok, dźwięk, b, bdi, bdo, blockquote, br, przycisk, płótno, cytat, kod, polecenie, datista, del, szczegóły , dfn, div dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, etykieta, mapa, znak, matematyka, menu, miernik, nawigacja, noscript, obiekt, ol, wyjście, p, pre, progress, q, ruby, s, samp, skrypt, sekcja, wybierz, mały, rozpiętość, silny, styl ( jeśli obecny jest atrybut o zasięgu), sub, sup, svg, table, textarea, time,u, ul, var, wideo, wbr i teksti tak dalej.
W żadnym momencie model treści nie mówi „możesz umieścić dowolne elementy w tym jednym”, co byłoby konieczne w przypadku niestandardowych elementów / znaczników.
źródło
Podstawowe niestandardowe elementy i atrybuty
Niestandardowe elementy i atrybuty są poprawne w HTML, pod warunkiem, że:
x-
data-
Na przykład
<x-foo data-bar="gaz"/>
lub<br data-bar="gaz"/>
.Powszechną konwencją dla elementów jest
x-foo
;x-vendor-feature
jest polecany.Dotyczy to większości przypadków, ponieważ prawdopodobnie rzadko programista potrzebowałby całej mocy związanej z rejestracją ich elementów. Składnia jest również odpowiednio poprawna i stabilna. Bardziej szczegółowe wyjaśnienie znajduje się poniżej.
Zaawansowane niestandardowe elementy i atrybuty
Począwszy od 2014 roku istnieje nowy, znacznie ulepszony sposób rejestrowania niestandardowych elementów i atrybutów. Nie działa w starszych przeglądarkach, takich jak IE 9 lub Chrome / Firefox 20. Ale pozwala korzystać ze standardowego
HTMLElement
interfejsu, zapobiegać kolizjom, używać nie-x-*
i nienazwanychdata-*
nazw, a także definiować niestandardowe zachowanie i składnię dla przeglądarki . Wymaga trochę fantazyjnego JavaScript, jak wyszczególniono w poniższych linkach.Skały HTML5 - Definiowanie nowych elementów w HTML
WebComponents.org - Wprowadzenie do elementów niestandardowych
W3C - Składniki internetowe: elementy niestandardowe
Odnośnie ważności podstawowej składni
Używanie
data-*
niestandardowych nazw atrybutów przez pewien czas było całkowicie poprawne, a nawet działa ze starszymi wersjami HTML.W3C - HTML5: Rozszerzalność
Jeśli chodzi o niestandardowe (niezarejestrowane) nazwy elementów, W3C zdecydowanie je odradza i uznaje je za niezgodne. Ale przeglądarki są wymagane do ich obsługi, a
x-*
identyfikatory nie będą powodować konfliktów z przyszłymi specyfikacjami HTML, ax-vendor-feature
identyfikatory nie będą powodować konfliktów z innymi programistami. Niestandardowego DTD można użyć do obejścia dowolnych wybrednych przeglądarek.Oto kilka istotnych fragmentów oficjalnych dokumentów:
W3C - HTML5: Dokumenty
zgodne WhatWG - HTML Standard: DOM Elements
źródło
Chciałbym zaznaczyć, że słowo „ważne” może mieć w tym kontekście dwa różne znaczenia, z których każde jest potencjalnie, hmm, ważne.
Czy dokument HTML z niestandardowymi tagami należy uznać za prawidłowy HTML5? Odpowiedź na to pytanie brzmi „nie”. Specyfikacja wymienia dokładnie jakie tagi są prawidłowe w jakich kontekstach. Dlatego walidator HTML nie akceptuje dokumentu ze znacznikami niestandardowymi lub ze standardowymi znacznikami w niewłaściwych miejscach (np. Znacznik „img” w nagłówku).
Czy dokument HTML z niestandardowymi znacznikami będzie analizowany i renderowany w standardowy, jasno określony sposób w różnych przeglądarkach? Tutaj, być może zaskakująco, odpowiedź brzmi „tak”. Mimo że dokument nie byłby technicznie uważany za prawidłowy HTML5, specyfikacja HTML5 dokładnie określa , co przeglądarki powinny zrobić, gdy zobaczą niestandardowy znacznik: krótko mówiąc, niestandardowy znacznik zachowuje się trochę jak
<span>
- to nic nie znaczy i nic nie robi domyślnie, ale może być stylizowany przez HTML i dostępny w javascript.źródło
Niestandardowe elementy HTML są rozwijającym się standardem W3, do którego przyczyniałem się, który umożliwia deklarowanie i rejestrowanie niestandardowych elementów w analizatorze składni, możesz przeczytać specyfikację tutaj: W3 Web Components Specyfikacja niestandardowych elementów . Ponadto Microsoft obsługuje bibliotekę (napisaną przez byłych twórców Mozilli), o nazwie X-Tag - sprawia, że praca z komponentami sieciowymi jest jeszcze łatwiejsza.
źródło
dom.webcomponents.enabled
dotrue
.Udzielić zaktualizowanej odpowiedzi odzwierciedlającej nowoczesne strony.
Tagi niestandardowe są ważne, jeśli:
1) Zawierają myślnik
2) Są osadzonymi plikami XML
Zakłada się, że używasz doctype HTML5
<!doctype html>
Biorąc pod uwagę te proste ograniczenia, warto teraz dołożyć wszelkich starań, aby znaczniki HTML były prawidłowe (przestań zamykać tagi jak
<img>
i<hr>
, jest to głupie i niepoprawne, chyba że użyjesz typu XHTML, którego prawdopodobnie nie potrzebujesz).Biorąc pod uwagę, że HTML5 wyraźnie określa zasady analizowania, zgodna przeglądarka będzie w stanie obsłużyć każdy rzucony na nią znacznik, nawet jeśli nie jest on ściśle poprawny.
źródło
Cytując z sekcji Rozszerzalność specyfikacji HTML5 :
Jeśli więc używasz serializacji XML HTML5, możesz zrobić coś takiego:
Jeśli jednak używasz składni HTML, masz znacznie większe możliwości w zakresie tego, co możesz zrobić.
Ale te instrukcje są przede wszystkim skierowane do dostawców przeglądarek, którzy prawdopodobnie zapewnią styl wizualny i funkcjonalność dla dowolnych niestandardowych elementów, które zdecydują się stworzyć.
Jednak dla autora, chociaż osadzenie niestandardowego elementu na stronie (przynajmniej w serializacji XML) może być legalne, nie dostaniesz nic więcej niż węzeł w DOM. Jeśli chcesz, aby element niestandardowy faktycznie coś zrobił lub był renderowany w specjalny sposób, powinieneś przyjrzeć się specyfikacji Elementy niestandardowe .
Aby uzyskać bardziej delikatny podkład na ten temat, przeczytaj wprowadzenie do składników sieci Web , które zawiera również informacje o Shadow DOM i innych powiązanych specyfikacjach. Te specyfikacje są jeszcze projekty pracuje w tej chwili - można zobaczyć aktualny stan tutaj - ale są one aktywnie rozwijany.
Na przykład prosta definicja
greeting
elementu może wyglądać mniej więcej tak:Mówi to przeglądarce, aby wyświetlała treść elementu w cudzysłowach i poprzedzona tekstem „Simon mówi:”, który ma styl szary. Zazwyczaj taka niestandardowa definicja elementu jest przechowywana w osobnym pliku HTML, który importujesz za pomocą łącza.
Chociaż możesz również dołączyć go w linii, jeśli chcesz.
Stworzyłem roboczą demonstrację powyższej definicji za pomocą biblioteki wypełniaczy Polymer, którą można zobaczyć tutaj . Zauważ, że używa to starej wersji biblioteki Polymer - nowsze wersje działają zupełnie inaczej. Jednak ze względu na to, że specyfikacja jest wciąż w fazie rozwoju, i tak nie polecam go używać w kodzie produkcyjnym.
źródło
po prostu używaj, co chcesz, bez deklaracji domeny
dodaj swój własny styl (display: block) i będzie działał z każdą nowoczesną przeglądarką
źródło
data-*
atrybuty są poprawne w HTML5, a nawet w HTML4, wszystkie przeglądarki internetowe ich przestrzegają. Dodawanie nowych tagów jest technicznie w porządku, ale nie jest zalecane tylko dlatego, że:Używam znaczniki niestandardowe tylko w miejscach, które Google nie obchodzi, bo ecample w iframe silnik gry, zrobiłem
<log>
znacznik, który zawierał<msg>
,<error>
a<warning>
- ale poprzez JavaScript tylko. Według walidatora było to w pełni poprawne. Działa nawet w Internet Explorerze ze swoim stylem! ;]źródło
<inventory>
,<item type="potion" sprite="2">
- więc lepiej być nazywany SGML + CSS zamiast HTML, mimo że elementy HTML, które mają definicję work as is - Przyciski, listy, ...Niestandardowe tagi nie są prawidłowe w HTML5. Ale obecnie przeglądarki obsługują je do analizowania, a także można ich używać za pomocą css. Jeśli więc chcesz używać niestandardowych tagów dla bieżących przeglądarek, możesz to zrobić. Ale wsparcie może zostać odebrane, gdy przeglądarki wdrożą standardy W3C wyłącznie w celu parsowania treści HTML.
źródło
<center>
i<marquee>
?Wiem, że to pytanie jest stare, ale studiowałem ten temat i chociaż niektóre z powyższych stwierdzeń są poprawne, nie są to jedyne sposoby tworzenia niestandardowych elementów. Na przykład:
działałoby idealnie dobrze (do tej pory w nowszych wersjach Google Chrome, IE, FireFox i mobilnego Safari). Wszystko czego potrzebujesz to tylko znak alfabetu (az, AZ), aby rozpocząć znacznik, a następnie możesz użyć dowolnego ze znaków innych niż alfabet. Jeśli jest w CSS, musisz użyć „\” (ukośnik odwrotny), aby znaleźć element, taki jak wymagałby Kwerendy \ ^ {...}. Ale w JS nazywasz to tak, jak to widzisz. Mam nadzieję, że to pomoże. Zobacz przykład tutaj
-Mink CBOS
źródło