Apakah elemen khusus HTML5 valid?

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.

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 tipe baru elemen DOM yang dapat ditentukan oleh penulis. Tidak seperti dekorator , yang stateless dan sementara, elemen khusus dapat merangkum status dan menyediakan antarmuka skrip.

Elemen khusus adalah bagian dari spesifikasi W3 yang lebih besar yang disebut Komponen Web , bersama dengan Templat, Impor HTML, dan Shadow DOM.

Komponen Web memungkinkan penulis aplikasi Web untuk mendefinisikan widget dengan tingkat kekayaan visual dan interaktivitas yang tidak mungkin dengan CSS saja, dan kemudahan komposisi dan penggunaan kembali tidak mungkin dengan pustaka skrip saat ini.

Namun, dari penelusuran yang luar biasa ini melalui artikel tentang Google Developers tentang Custom Elements v1:

Nama elemen khusus harus mengandung tanda hubung ( -). Jadi <x-tags>,, <my-element>dan <my-awesome-app>semuanya adalah nama yang valid, sementara <tabs>dan <foo_bar>tidak. Persyaratan ini agar pengurai HTML dapat membedakan elemen khusus dari elemen biasa. Itu juga memastikan kompatibilitas maju ketika tag baru ditambahkan ke HTML.

Beberapa sumber daya

• Contoh Komponen Web tersedia di https://WebComponents.org
• WebComponents.js berfungsi sebagai polyfill untuk Komponen Web hingga didukung di mana-mana. Lihat juga halaman github WebComponents.js & tabel dukungan browser web .

Itu mungkin dan diizinkan:

Agen pengguna harus memperlakukan elemen dan atribut yang tidak mereka pahami sebagai netral semantik; meninggalkan mereka di DOM (untuk prosesor DOM), dan menata mereka sesuai dengan CSS (untuk prosesor CSS), tetapi tidak menyimpulkan makna dari mereka.

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)

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

The htmlelemen hanya dapat berisi Unsur kepala diikuti dengan elemen body.

The bodyelemen 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 Teks

dan seterusnya.

Model konten mengatakan "Anda dapat meletakkan elemen apa pun yang Anda suka di yang ini", yang akan diperlukan untuk elemen / tag khusus.

Atribut dan Elemen Kustom Dasar

Elemen dan atribut khusus valid dalam HTML, asalkan:

• Nama elemen adalah huruf kecil dan dimulai dengan x-
• Nama atribut adalah huruf kecil dan mulai dengan data-

Misalnya, <x-foo data-bar="gaz"/>atau <br data-bar="gaz"/>.

Konvensi umum untuk elemen adalah x-foo; x-vendor-featuredirekomendasikan.

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 HTMLElementantarmuka 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 dan x-vendor-featurepengidentifikasi 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:

"Spesifikasi yang berlaku MUNGKIN mendefinisikan konten dokumen baru (misalnya elemen foobar) [...]. Jika sintaks dan semantik dokumen HTML5 yang sesuai tidak berubah oleh penggunaan spesifikasi yang berlaku, maka dokumen tersebut tetap menjadi HTML5 yang sesuai dokumen."

"Agen pengguna harus memperlakukan elemen dan atribut yang mereka tidak pahami sebagai netral semantik; membiarkannya di DOM (untuk prosesor DOM), dan menata mereka sesuai dengan CSS (untuk prosesor CSS), tetapi tidak menyimpulkan makna apa pun dari mereka."

"Agen pengguna tidak bebas untuk menangani dokumen yang tidak sesuai sesuka hati; model pemrosesan yang dijelaskan dalam spesifikasi ini berlaku untuk implementasi terlepas dari kesesuaian dokumen input."

"Antarmuka HTMLUnknownElement harus digunakan untuk elemen HTML yang tidak ditentukan oleh spesifikasi ini."

W3C - HTML5: Menyesuaikan Dokumen
WhatWG - HTML Standard: DOM Elements

Saya ingin menunjukkan bahwa kata "valid" dapat memiliki dua arti berbeda dalam konteks ini, yang salah satu di antaranya berpotensi, um, valid.

1. 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).

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

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.

Untuk memberikan jawaban yang diperbarui yang mencerminkan halaman modern.

Tag khusus valid jika salah satunya,

1) Mereka mengandung tanda hubung

<my-element>

2) Mereka tertanam XML

<greeting xmlns="http://example.com/customNamespace">Hello!</greeting>

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.

Mengutip dari bagian Extensibility dari spesifikasi HTML5 :

Untuk fitur tingkat markup yang dapat terbatas pada serialisasi XML dan tidak perlu didukung dalam serialisasi HTML, vendor harus menggunakan mekanisme namespace untuk menentukan ruang nama kustom di mana elemen dan atribut non-standar didukung.

Jadi jika Anda menggunakan serialisasi XML dari HTML5, legal bagi Anda untuk melakukan sesuatu seperti ini:

<greeting xmlns="http://example.com/customNamespace">Hello!</greeting>

Namun, jika Anda menggunakan sintaks HTML Anda jauh lebih terbatas dalam apa yang dapat Anda lakukan.

Untuk fitur tingkat markup yang dimaksudkan untuk digunakan dengan sintaks HTML, ekstensi harus dibatasi pada atribut baru dari bentuk "fitur x-vendor-fitur" [...] Nama elemen baru tidak boleh dibuat.

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 greetingelemen mungkin terlihat seperti ini:

<element name="greeting">
  <template>
    <style scoped>
      span { color:gray; }
    </style>
    <span>Simon says:</span>
    <q><content/></q>
  </template>
</element>

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.

<link rel="import" href="greeting-definition.html" />

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.

cukup gunakan apa pun yang Anda inginkan tanpa deklarasi dom

<container>content here</container>

tambahkan gaya Anda sendiri (tampilan: blok) dan itu akan berfungsi dengan browser modern apa pun

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:

1. Ini mungkin bertentangan dengan sesuatu yang ditambahkan di masa depan, dan
2. Membuat dokumen HTML tidak valid kecuali ditambahkan secara dinamis melalui JavaScript.

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! ;]

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.

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:

<button id="find">click me</button>
<Query? ?attach="find" ?content="alert( find() );" ?prov="Hello there :D" >
I won't be displayed :D
</Query?>

<style type="text/css">

[\?content] {

display: none;

}

</style>

<script type="text/javascript">

S = document.getElementsByTagName("Query?")[0];

Q = S.getAttribute("?content");

A = document.getElementById( S.getAttribute("?attach") );

function find() {

  return S.getAttribute("?prov");

}

(function() {

A.setAttribute("onclick", Q);

})();

</script>

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