Saya tidak dapat menemukan jawaban pasti apakah tag khusus valid dalam HTML5, seperti ini:
<greeting>Hello!</greeting>
Saya tidak menemukan apa pun di spec dengan cara apa pun:
http://dev.w3.org/html5/spec/single-page.html
Dan tag khusus tampaknya tidak divalidasi dengan validator W3C.
html
custom-element
d13
sumber
sumber
Jawaban:
The Kustom Elements spesifikasi tersedia di Chrome dan Opera, dan menjadi tersedia di browser lain . Ini menyediakan sarana untuk mendaftarkan elemen khusus secara formal.
Elemen khusus adalah bagian dari spesifikasi W3 yang lebih besar yang disebut Komponen Web , bersama dengan Templat, Impor HTML, dan Shadow DOM.
Namun, dari penelusuran yang luar biasa ini melalui artikel tentang Google Developers tentang Custom Elements v1:
Beberapa sumber daya
sumber
Itu mungkin dan diizinkan:
http://www.w3.org/TR/html5/infrastructure.html#extensibility-0
Tetapi, jika Anda ingin menambahkan interaktivitas, Anda harus membuat dokumen Anda tidak valid (tetapi masih berfungsi penuh) untuk mengakomodasi IE 7 dan 8.
Lihat http://blog.svidgen.com/2012/10/building-custom-xhtml5-tags.html (blog saya)
sumber
NB Jawaban di bawah ini benar ketika ditulis pada tahun 2012. Sejak itu, banyak hal telah berubah. Spesifikasi HTML sekarang mendefinisikan dua jenis elemen khusus - "elemen khusus otonom" dan "elemen bawaan yang disesuaikan". Yang pertama dapat pergi ke mana saja konten ungkapan diharapkan; yang sebagian besar tempat di dalam tubuh, tetapi tidak misalnya anak-anak dari elemen ul atau ol, atau elemen tabel selain elemen td, th atau caption. Yang terakhir dapat pergi ke mana saja elemen yang mereka dapat dapat pergi.
Ini sebenarnya adalah konsekuensi dari akumulasi model konten elemen.
Misalnya, elemen root harus berupa
html
elemen.The
html
elemen hanya dapat berisi Unsur kepala diikuti dengan elemen body.The
body
elemen hanya dapat berisi konten Arus mana konten aliran didefinisikan sebagai unsur-unsur: a, abbr, address, area (jika turunan dari elemen peta), artikel, selain, audio, b, bdi, bdo, blockquote, br, tombol, kanvas, mengutip, kode, perintah, datalist, del, detail , dfn, div dl, em, embed, fieldset, gambar, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, in, kbd, keygen, label, peta, tandai, matematika, menu, meter, nav, noscript, objek, ol, output, p, pra, kemajuan, q, ruby, s, samp, skrip, bagian, pilih, kecil, bentang, kuat, gaya ( jika ada atribut scoped), sub, sup, svg, tabel, textarea, waktu,u, ul, var, video, wbr dan Teksdan seterusnya.
Model konten mengatakan "Anda dapat meletakkan elemen apa pun yang Anda suka di yang ini", yang akan diperlukan untuk elemen / tag khusus.
sumber
Atribut dan Elemen Kustom Dasar
Elemen dan atribut khusus valid dalam HTML, asalkan:
x-
data-
Misalnya,
<x-foo data-bar="gaz"/>
atau<br data-bar="gaz"/>
.Konvensi umum untuk elemen adalah
x-foo
;x-vendor-feature
direkomendasikan.Ini menangani sebagian besar kasus, karena itu bisa dibilang jarang bahwa pengembang akan membutuhkan semua kekuatan yang datang dengan mendaftarkan elemen mereka. Sintaksnya juga cukup valid dan stabil. Penjelasan lebih rinci ada di bawah ini.
Atribut dan Elemen Kustom Tingkat Lanjut
Pada 2014, ada cara baru yang lebih baik untuk mendaftarkan elemen dan atribut khusus. Ini tidak akan berfungsi di browser lama seperti IE 9 atau Chrome / Firefox 20. Tapi itu memungkinkan Anda untuk menggunakan
HTMLElement
antarmuka standar , mencegah tabrakan, menggunakan bukan-x-*
dan-bukan-data-*
nama, dan menentukan perilaku khusus dan sintaksis untuk browser untuk menghormati . Ini membutuhkan sedikit JavaScript yang mewah, seperti yang dijelaskan dalam tautan di bawah ini.HTML5 Rocks - Menentukan Elemen Baru di HTML
WebComponents.org - Pengantar Elemen Kustom
W3C - Komponen Web: Elemen Kustom
Mengenai Validitas Sintaks Dasar
Menggunakan
data-*
untuk nama atribut khusus telah benar-benar valid untuk beberapa waktu, dan bahkan berfungsi dengan versi HTML yang lebih lama.W3C - HTML5: Extensibility
Sedangkan untuk nama elemen kustom (tidak terdaftar), W3C sangat merekomendasikan untuk melawan mereka, dan menganggapnya tidak sesuai. Tetapi browser diperlukan untuk mendukungnya, dan
x-*
pengidentifikasi tidak akan bertentangan dengan spesifikasi HTML di masa depan danx-vendor-feature
pengidentifikasi tidak akan bertentangan dengan pengembang lain. DTD khusus dapat digunakan untuk mengatasi browser yang pilih-pilih.Berikut adalah beberapa kutipan yang relevan dari dokumen resmi:
W3C - HTML5: Menyesuaikan Dokumen
WhatWG - HTML Standard: DOM Elements
sumber
Saya ingin menunjukkan bahwa kata "valid" dapat memiliki dua arti berbeda dalam konteks ini, yang salah satu di antaranya berpotensi, um, valid.
Haruskah dokumen HTML dengan tag khusus dianggap HTML5 yang valid? Jawabannya jelas "tidak." Spesifikasi ini mencantumkan dengan tepat tag apa yang valid dalam konteks apa. Inilah sebabnya mengapa validator HTML tidak akan menerima dokumen dengan tag khusus, atau dengan tag standar di tempat yang salah (seperti tag "img" di header).
Apakah dokumen HTML dengan tag khusus akan diuraikan dan disajikan dengan cara standar dan jelas di seluruh browser? Di sini, mungkin secara mengejutkan, jawabannya adalah "ya." Meskipun dokumen tersebut secara teknis tidak akan dianggap sebagai HTML5 yang valid, spesifikasi HTML5 menentukan secara spesifik apa yang seharusnya dilakukan browser ketika mereka melihat tag khusus: singkatnya, tag kustom tersebut bertindak seperti a
<span>
- itu tidak berarti apa-apa dan tidak melakukan apa-apa oleh default, tetapi dapat ditata oleh HTML dan diakses oleh javascript.sumber
Elemen HTML khusus adalah standar W3 yang sedang berkembang yang telah saya berikan kontribusi yang memungkinkan Anda mendeklarasikan dan mendaftarkan elemen khusus dengan parser, Anda dapat membaca spek di sini: W3 Web Components Custom Elements spec . Selain itu, Microsoft mendukung perpustakaan (ditulis oleh mantan pengembang Mozilla), yang disebut X-Tag - ini membuat bekerja dengan Komponen Web menjadi lebih mudah.
sumber
dom.webcomponents.enabled
ketrue
.Untuk memberikan jawaban yang diperbarui yang mencerminkan halaman modern.
Tag khusus valid jika salah satunya,
1) Mereka mengandung tanda hubung
2) Mereka tertanam XML
Ini mengasumsikan Anda menggunakan doctype HTML5
<!doctype html>
Mempertimbangkan pembatasan sederhana ini sekarang masuk akal untuk melakukan yang terbaik untuk menjaga agar markup HTML Anda tetap valid (tolong berhenti menutup tag seperti
<img>
dan<hr>
, itu konyol dan salah kecuali Anda menggunakan DOCTYPE XHTML, yang Anda mungkin tidak perlu).Mengingat bahwa HTML5 dengan jelas mendefinisikan aturan parsing, browser yang patuh akan dapat menangani tag apa pun yang Anda lemparkan padanya meskipun itu tidak sepenuhnya valid.
sumber
Mengutip dari bagian Extensibility dari spesifikasi HTML5 :
Jadi jika Anda menggunakan serialisasi XML dari HTML5, legal bagi Anda untuk melakukan sesuatu seperti ini:
Namun, jika Anda menggunakan sintaks HTML Anda jauh lebih terbatas dalam apa yang dapat Anda lakukan.
Tetapi instruksi tersebut terutama diarahkan pada vendor browser, yang dianggap akan menyediakan gaya visual dan fungsionalitas untuk elemen kustom apa pun yang mereka pilih untuk dibuat.
Untuk seorang penulis, meskipun mungkin legal untuk menyematkan elemen khusus di halaman (setidaknya dalam serialisasi XML), Anda tidak akan mendapatkan apa pun selain sebuah simpul di DOM. Jika Anda ingin elemen kustom Anda benar-benar melakukan sesuatu, atau diberikan dengan cara khusus, Anda harus melihat spesifikasi Elemen Kustom .
Untuk primer yang lebih lembut pada subjek, baca Pengenalan Komponen Web , yang juga mencakup informasi tentang DOM Bayangan dan spesifikasi terkait lainnya. Spesifikasi ini masih dalam konsep saat ini - Anda dapat melihat status saat ini di sini - tetapi sedang dikembangkan secara aktif.
Sebagai contoh, definisi sederhana untuk
greeting
elemen mungkin terlihat seperti ini:Ini memberitahu browser untuk membuat konten elemen dalam tanda kutip, dan diawali dengan teks "Simon berkata:" yang ditata dengan warna abu-abu. Biasanya definisi elemen khusus seperti ini akan disimpan dalam file html terpisah yang akan Anda impor dengan tautan.
Meskipun Anda juga bisa memasukkannya secara inline jika Anda mau.
Saya telah membuat demonstrasi yang berfungsi dari definisi di atas menggunakan perpustakaan Polyfill Polymer yang dapat Anda lihat di sini . Perhatikan bahwa ini menggunakan versi lama dari perpustakaan Polymer - versi yang lebih baru bekerja sangat berbeda. Namun, dengan spesifikasi yang masih dalam pengembangan, ini bukan sesuatu yang saya sarankan untuk digunakan dalam kode produksi.
sumber
cukup gunakan apa pun yang Anda inginkan tanpa deklarasi dom
tambahkan gaya Anda sendiri (tampilan: blok) dan itu akan berfungsi dengan browser modern apa pun
sumber
data-*
atribut valid dalam HTML5 dan bahkan dalam HTML4 semua browser web yang digunakan untuk menghormatinya. Menambahkan tag baru secara teknis oke, tetapi tidak disarankan hanya karena:Saya menggunakan tag khusus hanya di tempat-tempat yang Google tidak peduli, untuk contoh di iframe mesin permainan, saya membuat
<log>
tag yang berisi<msg>
,<error>
dan<warning>
- tetapi melalui JavaScript saja. Dan itu sepenuhnya valid, menurut validator. Ia bahkan bekerja di Internet explorer dengan gaya! ;]sumber
<inventory>
,<item type="potion" sprite="2">
- jadi lebih baik untuk disebut SGML + CSS daripada HTML, meskipun begitu elemen HTML yang memiliki definisi bekerja apa adanya - Tombol, daftar, ...Tag khusus tidak valid dalam HTML5. Tetapi saat ini browser mendukung untuk menguraikannya dan Anda juga dapat menggunakannya menggunakan css. Jadi jika Anda ingin menggunakan tag khusus untuk browser saat ini maka Anda bisa. Tetapi dukungan dapat diambil begitu browser menerapkan standar W3C secara ketat untuk mem-parsing konten HTML.
sumber
<center>
dan<marquee>
?Saya tahu pertanyaan ini sudah lama, tetapi saya telah mempelajari subjek ini dan meskipun beberapa pernyataan di atas benar, mereka bukan satu-satunya cara untuk membuat elemen khusus. Sebagai contoh:
akan bekerja dengan sangat baik (di versi yang lebih baru dari Google Chrome, IE, FireFox, dan mobile Safari sejauh ini). Yang Anda butuhkan hanyalah karakter alfa (az, AZ) untuk memulai tag, dan kemudian Anda dapat menggunakan salah satu karakter non alpha setelahnya. Jika dalam CSS, Anda harus menggunakan "\" (backslash) untuk menemukan elemen, seperti membutuhkan Query \ ^ {...}. Tetapi di JS, Anda sebut saja bagaimana Anda melihatnya. Saya harap ini membantu. Lihat contoh di sini
-Mink CBOS
sumber