Apakah ada cara untuk membuat tag html Anda sendiri di HTML5?

114

Saya ingin membuat sesuatu seperti

<menu>
    <lunch>
        <dish>aaa</dish>
        <dish>bbb</dish>
    </lunch>
    <dinner>
        <dish>ccc</dish>
    </dinner>
</menu>

Bisakah itu dilakukan di HTML5? Saya tahu saya bisa melakukannya dengan

<ul id="menu">
    <li>
        <ul id="lunch">
            <li class="dish">aaa</li>
            <li class="dish">bbb</li>
        </ul>
    </li>
    <li>
        <ul id="dinner">
            <li class="dish">ccc</li>
        </ul>
    </li>    
</ul>

tapi jauh lebih sulit dibaca :(

html 
— Raanan Avidor
sumber
2
apa yang sedang Anda coba lakukan? apa yang Anda cari mungkin bisa diselesaikan oleh divs dengan nama kelas
— geowa4
11
Anda juga dapat melihat XML + XSLT untuk melihat apakah itu lebih sesuai dengan kebutuhan Anda. Itu memungkinkan Anda untuk mengubah (bagian xslt) satu dokumen XML (milik Anda) menjadi yang lain (html)
— Michael Haren
1
Wow, saya memposting ini lama sekali :) Mengingat seberapa baik kinerja getElementById () dibandingkan dengan mengambil nama tag, dan bagaimana hal-hal seperti SVG menyediakan serangkaian fungsionalitas baru bersama dengan semantiknya, saya pikir tag kustom memiliki lebih sedikit kegunaan daripada saya mungkin awalnya berpikir. Terima kasih semuanya untuk semua komentar dan jawaban yang bijaksana!
— Costa
1
kemungkinan duplikat dari Apakah elemen khusus valid HTML5?
— zzzzBov
— John Wu

Jawaban:

155

Anda dapat menggunakan tag kustom di browser, meskipun tidak HTML5 (lihat Apakah elemen kustom valid HTML5? Dan spesifikasi HTML5 ).

Anggaplah Anda ingin menggunakan elemen tag khusus yang disebut <stack>. Inilah yang harus Anda lakukan ...

LANGKAH 1

Normalisasikan atributnya di CSS Stylesheet Anda (pikirkan css reset) - Contoh:

 stack{display:block;margin:0;padding:0;border:0; ... }

LANGKAH 2

Untuk membuatnya berfungsi di versi lama Internet Explorer, Anda perlu menambahkan skrip ini ke head (Penting jika Anda membutuhkannya untuk bekerja di versi IE yang lebih lama!):

 <!--[if lt IE 9]> 
 <script> document.createElement("stack"); </script>
 <![endif]-->

Kemudian Anda dapat menggunakan tag kustom Anda dengan bebas.

<stack>Overflow</stack>

Jangan ragu untuk mengatur atribut juga ...

<stack id="st2" class="nice"> hello </stack>
— Timothy Perez
sumber
21
Tepat sekali. Bukan ide yang fantastis. Tapi sangat benar. Anda dapat membuat seluruh pasukan tag Anda sendiri di halaman Anda, dan membuat semuanya kompatibel dengan IE6, hanya dengan menambahkan array dari semua nama tag yang ingin Anda gunakan, dan kemudian membuat masing-masing di dalam for-loop , di kepala halaman Anda, sebelum Anda mulai menggunakan salah satu dari mereka. Begitulah cara html5shim bekerja di tempat pertama. Bersiaplah untuk berusaha menata mereka di IE lama. Selain itu, meskipun menurut saya ini tidak masalah untuk penggunaan internal, sebenarnya saya tidak ingin mengajar orang untuk melakukan sesuatu. Sama sekali.
— Norguard
13
Saya setuju, menulis tag Anda sendiri bukan untuk menjadi lemah hati. Pastikan Anda mengujinya secara menyeluruh. Saya ingin mengatakan satu hal ... jangan menulis CSS untuk IE6. Membuang-buang sumber daya sepenuhnya dan memungkinkan penggunaan lebih lanjut dari produk mengerikan yang bahkan tidak didukung oleh Microsoft.
— Timothy Perez
2
@alexwells - Chrome, FF, Safari, IE 7-9
— Timothy Perez
5
Catatan yang sangat penting: Meskipun browser mendukung pembuatan elemen kustom, ini tidak secara resmi didukung oleh standar HTML5. Secara teknis , elemen khusus adalah verboten. Anda dapat melakukannya, dan membuat HTML Anda terlihat bagus dan penting secara semantik, tetapi Anda melanggar standar jika Anda melakukannya - jika Anda peduli. :)
— Randolpho
11
Terkadang ... standar baru perlu ditetapkan. ;-)
— Timothy Perez
26

Saya tidak begitu yakin dengan jawaban ini. Seperti yang baru saja saya baca: "TAG KHUSUS SELALU DIIZINKAN DALAM HTML."

http://www.crockford.com/html/

Intinya di sini, HTML itu didasarkan pada SGML. Tidak seperti XML dengan doctypes dan schema, HTML tidak menjadi tidak valid jika browser tidak mengetahui satu atau dua tag. Pikirkan <marquee>. Ini belum ada dalam standar resmi. Jadi, saat menggunakannya membuat halaman HTML Anda "secara resmi tidak disetujui", itu juga tidak merusak halaman.

Lalu ada <keygen>, yang dulunya khusus Netscape, dilupakan di HTML4 dan ditemukan kembali dan sekarang ditentukan di HTML5. Dan sekarang kami juga memiliki atribut tag khusus, seperti data-XyZzz = "..." yang diizinkan di semua tag HTML5.

Jadi, meskipun Anda tidak boleh menciptakan seluruh salad markup kustom yang tidak ditentukan milik Anda sendiri, memiliki tag kustom di HTML tidak sepenuhnya dilarang. Namun demikian, kecuali Anda ingin mengirimkannya dengan Tipe Konten + xml atau menyematkan namespace XML lainnya, seperti SVG atau MathML. Ini hanya berlaku untuk HTML yang dibatasi SGML.

— mario
sumber
2
Yang juga menarik di sini: librador.com/2009/10/20/Styling-undefined-tag-names-in-HTML "Anda dapat menggunakan nama tag apa pun di HTML, dan itu akan menjadi bagian dari DOM dan dapat diberi gaya."
— mario
5
“Jadi, saat menggunakannya membuat laman html Anda" resmi tidak disetujui ", laman itu juga tidak rusak.” - um, coba gaya elemen yang Anda temukan di Internet Explorer. Ini tidak akan berhasil. Anda mungkin tidak menganggapnya rusak, tetapi fakta bahwa tag kustom tidak valid dan tidak berfungsi di Internet Explorer, saya tidak melihat bagaimana Anda dapat membantah bahwa tag "diizinkan".
— Paul D. Waite
6
Maksudku, dia tidak mendukung pernyataannya dengan apapun. Hanya karena Douglas Crockford mengatakannya, bukan berarti itu benar.
— Paul D. Waite
8
Inilah yang dikatakan spesifikasi : "Spesifikasi ini tidak menentukan bagaimana agen pengguna menangani ... elemen ... tidak ditentukan dalam dokumen ini. [...] kami merekomendasikan perilaku berikut: Jika agen pengguna menemukan elemen itu tidak mengenali, ia harus mencoba untuk membuat konten elemen. [...] penulis dan pengguna tidak boleh bergantung pada perilaku pemulihan kesalahan tertentu "- IMHO ini berarti bahwa Crockfor salah, untuk sekali.
— pengguna123444555621
4
@Costa: HTML berguna karena ini sekumpulan arti yang disepakati untuk tag. Misalnya, browser membuat tautan dapat diklik karena kami telah setuju (melalui spesifikasi HTML ) bahwa <a>tag adalah tautan ke laman lain. Anda dapat membuat salad markup Anda sendiri, tetapi itu tidak akan berarti bagi orang lain kecuali Anda sendiri. Untuk tujuan tertentu, itu mungkin baik-baik saja, tetapi Anda tidak benar-benar menggunakan HTML lagi.
— Paul D. Waite
6

Seperti yang disarankan Michael di komentar, apa yang ingin Anda lakukan sangat mungkin, tetapi nomenklatur Anda salah. Anda tidak "menambahkan tag ke HTML 5", Anda membuat jenis dokumen XML baru dengan tag Anda sendiri.

Saya melakukan ini untuk beberapa proyek di pekerjaan terakhir saya. Beberapa saran praktis:

  1. Ketika Anda mengatakan Anda ingin "menambahkan ini ke HTML 5," saya berasumsi apa yang Anda maksud adalah Anda ingin halaman ditampilkan dengan benar di browser modern, tanpa harus melakukan banyak pekerjaan di sisi server. Ini dapat dilakukan dengan memasukkan "instruksi pemrosesan stylesheet" di bagian atas file xml, seperti <? Xml-stylesheet type = "text / xsl" href = "menu.xsl"?>. Ganti "menu.xsl" dengan jalur ke lembar gaya XSL yang Anda buat untuk mengubah tag kustom Anda menjadi HTML.

  2. Peringatan: File Anda harus dalam format dokumen XML yang baik, lengkap dengan header XML <xml version = "1.0">. XML lebih pemilih daripada HTML tentang hal-hal seperti tag yang tidak cocok. Selain itu, tidak seperti HTML, tag peka huruf besar-kecil. Anda juga harus memastikan bahwa server web mengirimkan file dengan jenis mime yang sesuai "application / xml". Seringkali server web akan dikonfigurasi untuk melakukan ini secara otomatis jika ekstensi file adalah ".xml", tetapi periksa.

  3. Peringatan Besar: Akhirnya, menggunakan transformasi XSL otomatis browser, seperti yang telah saya jelaskan, paling baik hanya untuk debugging dan untuk aplikasi terbatas di mana Anda memiliki banyak kendali. Saya berhasil menggunakannya dalam menyiapkan intranet sederhana di tempat kerja terakhir saya, yang paling banyak hanya diakses oleh beberapa lusin orang. Tidak semua browser mendukung XSL, dan browser yang tidak memiliki implementasi yang sepenuhnya kompatibel. Jadi, jika halaman Anda akan dirilis ke "liar", yang terbaik adalah mengubah semuanya menjadi HTML di sisi server, yang dapat dilakukan dengan alat baris perintah, atau dengan tombol di banyak editor XML.

— Dan Menes
sumber
5

Membuat nama tag Anda sendiri di HTML tidak mungkin / tidak valid. Untuk itulah XML, SGML, dan bahasa markup umum lainnya.

Apa yang mungkin Anda inginkan adalah

<div id="menu">
    <div id="lunch">
        <span class="dish">aaa</span>
        <span class="dish">bbb</span>
    </div>
    <div id="dinner">
        <span class="dish">ccc</span>
    </div>
</div>

Atau bukannya <div/>dan <span/>sesuatu seperti <ul/>dan <li/>.

Untuk membuatnya terlihat dan berfungsi dengan benar, cukup hubungkan beberapa CSS dan Javascript.

— LukeN
sumber
5
Tidak, tidak. SGML dibuat selama ini sebelum XML muncul.
— Quentin
1
Apakah ada yang menggunakan SGML biasa hari ini? Entah orang menggunakan HTML atau XML dan banyak turunannya, tetapi saya belum pernah melihat SGML di alam liar! Bagaimanapun, saya akan memperbarui jawaban saya.
— LukeN
Saya yakin masih ada beberapa orang yang menggunakan Docbook SGML untuk dokumentasi. Beberapa tahun yang lalu pasti ada banyak.
— Ken
5

Saya hanya ingin menambahkan pada jawaban sebelumnya bahwa ada arti menggunakan hanya tag dua kata untuk elemen khusus. Mereka tidak boleh distandarkan.

Misalnya, Anda ingin menggunakan tag <icon>, karena Anda tidak suka <img>, dan Anda juga tidak menyukai <i>...

Perlu diingat bahwa Anda bukan satu-satunya. Mungkin di masa mendatang, w3c dan / atau browser akan menentukan / menerapkan tag ini.

Saat ini, browser mungkin akan menerapkan gaya asli untuk tag ini dan desain situs web Anda mungkin rusak.

Jadi saya menyarankan untuk menggunakan (menurut contoh ini) <img-icon>.

Faktanya, tag <menu>didefinisikan dengan baik, yaitu tidak digunakan, tetapi ditentukan. Ini harus berisi <menuitem>yang berperilaku seperti <li>.

— long-lazuli
sumber
4

Tag kustom dapat digunakan di Safari, Chrome, Opera, dan Firefox, setidaknya sejauh menggunakannya sebagai pengganti "class = ...".

hijau {color: green} di css bekerja untuk

<green>This is some text.</green>
— Chas
sumber
Anda benar @chas tetapi metode ini tidak disarankan, dan itu akan termasuk dalam kategori "Peretasan dan Trik" ...
— Piyush Kumar Baliyan
2

Untuk menyematkan metadata, Anda dapat mencoba menggunakan mikrodata HTML , tetapi bahkan lebih panjang daripada menggunakan nama kelas.

<div itemscope>
    <p>My name is <span itemprop="name">Elizabeth</span>.</p>
</div>

<div itemscope>
    <p>My name is <span itemprop="name">Daniel</span>.</p>
</div>
— Ionuț G. Stan
sumber
2

Selain menulis lembar gaya XSL, seperti yang saya jelaskan sebelumnya, ada pendekatan lain, setidaknya jika Anda yakin bahwa Firefox atau browser XML lengkap lainnya akan digunakan (yaitu, BUKAN Internet Explorer). Lewati transformasi XSL, dan tulis lembar gaya CSS lengkap yang memberi tahu browser cara memformat XML secara langsung. Keuntungannya di sini adalah Anda tidak perlu belajar XSL, yang oleh banyak orang dianggap bahasa yang sulit dan berlawanan dengan intuisi. Sisi negatifnya adalah CSS Anda harus menentukan gaya dengan sangat lengkap, termasuk apa itu node blok, apa yang sebaris, dll. Biasanya, saat menulis CSS, Anda dapat berasumsi bahwa browser "mengetahui" itu <em>, misalnya, adalah node sebaris, tetapi tidak tahu apa yang harus dilakukan dengan <dish>.

Akhirnya, sudah beberapa tahun sejak saya mencoba ini, tetapi ingatan saya adalah bahwa IE (setidaknya beberapa versi sebelumnya) menolak untuk menerapkan stylesheet CSS langsung ke dokumen XML.

— Dan Menes
sumber
Ya, saya pikir IE masuk ke mode rendering XML khusus, dan cukup banyak menunjukkan kepada Anda versi dokumen XML yang sudah dipoles dan bisa dilipat.
— Paul D. Waite
2

Inti dari HTML adalah bahwa tag yang disertakan dalam bahasa memiliki arti yang disepakati, yang dapat digunakan oleh semua orang di dunia dan mengambil keputusan dasar - seperti gaya default, atau membuat tautan dapat diklik, atau mengirimkan formulir saat Anda mengeklik <input type="submit">.

Tag buatan seperti milik Anda bagus untuk manusia (karena kita bisa belajar bahasa Inggris dan dengan demikian tahu, atau setidaknya menebak, apa arti tag Anda), tetapi tidak begitu baik untuk mesin.

— Paul D. Waite
sumber
1

Seperti yang dikatakan Nick, tag kustom tidak didukung oleh versi HTML apa pun.

Tapi, itu tidak akan memberikan kesalahan jika Anda menggunakan markup seperti itu di HTML Anda.

Sepertinya Anda ingin membuat daftar. Anda dapat menggunakan daftar tidak berurutan <ul>untuk membuat elemen rool, dan menggunakan <li>tag untuk item di bawahnya.

Jika bukan itu yang ingin Anda capai, harap tentukan dengan tepat apa yang Anda inginkan. Kita bisa mendapatkan jawabannya.

— Kirtan
sumber
2
Ini tidak akan memberi Anda kesalahan di browser, tetapi anehnya IE menangani CSS pada tag yang tidak dikenal.
— ceejayoz
Hmmm, sekarang saya tidak tahu itu! Saya tahu bahwa nama CSS yang tidak dikenal ditangani dengan aneh (itu adalah kesalahan). Tapi, apakah Anda yakin itu menangani tag yang tidak dikenal dengan aneh juga? Bukankah itu hanya membuat mereka tanpa teks di <>tag?
— Kirtan
1
Anda tidak dapat menerapkan CSS ke elemen yang tidak diketahui di Internet Explorer. Coba gaya <abbr>elemen di IE 7. Ini tidak akan berhasil, karena IE 7 tidak diimplementasikan <abbr>(meskipun itu dalam standar!). Saya tertawa kecil ketika orang secara membabi buta mengatakan bahwa kode non-standar tidak akan menyebabkan kesalahan apa pun. Bagaimana Anda tahu itu tidak akan menyebabkan kesalahan? Cukup sulit mendapatkan kode standar untuk bekerja, apalagi kode non-standar.
— Paul D. Waite
1
Paul, lihat html5shim untuk solusi Anda. Anda tidak akan mendapatkan keuntungan dari fungsionalitas khusus, tetapi jika Anda mencari sebuah kontainer, yang perlu Anda lakukan hanyalah memunculkan document.createElement ("MyNewTagName"); ke kepala (atau setidaknya di atas di mana Anda ingin versi gaya tag itu berada). Bahkan buat array dari mereka, dan lakukan iterasi, membuatnya di JS - tidak perlu lampiran DOM, cukup buat satu dan buang. Bersiaplah untuk menatanya seolah-olah tata letak blok dan 100% tidak diketahui.
— Norguard
1

Polymer atau X-tag memungkinkan Anda membuat tag html Anda sendiri. Ini didasarkan pada "shadow DOM" browser asli.

— vinyll
sumber
1

Anda cukup melakukan beberapa gaya css khusus, ini akan membuat tag yang akan membuat warna latar belakang menjadi merah:

redback {background-color:red;}
 

<redback>This is red</redback>
Luaskan cuplikan

— TorKitten
sumber
1

Dalam beberapa keadaan, mungkin terlihat seperti membuat nama tag Anda sendiri berfungsi dengan baik.
Namun, ini hanya kesalahan penanganan rutin browser Anda yang sedang bekerja. Dan masalahnya, browser yang berbeda memiliki rutinitas penanganan kesalahan yang berbeda!

Lihat contoh ini.
Baris pertama berisi dua elemen yang dibuat, whatdan ever, dan diperlakukan berbeda oleh browser yang berbeda. Teks muncul dengan warna merah di IE11 dan Edge, tetapi berwarna hitam di browser lain.
Sebagai perbandingan, baris kedua serupa, kecuali hanya berisi elemen HTML yang valid, dan karenanya akan terlihat sama di semua browser.

body {color:black; background:white;} /* reset */

what, ever:nth-of-type(2) {color:red}
code, span:nth-of-type(2) {color:red}
<p><what></what> <ever>test</ever></p>

<p><code></code> <span>test</span></p>
Luaskan cuplikan

Masalah lain dengan elemen yang dibuat-buat adalah Anda tidak akan tahu seperti apa masa depan. Jika Anda membuat sebuah situs web beberapa tahun yang lalu dengan nama tag seperti picture, dialog, details, slot, templatedll, mengharapkan mereka untuk berperilaku seperti bentang, apakah Anda dalam kesulitan sekarang!

— Tuan Lister
sumber
1

Anda dapat menggunakan ini:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>MyExample</title>
  <style>
    bloodred {color: red;}
  </style>
</head>
<body>
  <bloodred>
    this is BLOODRED (not to scare you)
  </bloodred>
</body>
<script>
  var btn = document.createElement("BLOODRED")
</script>
</html>
— Lawrence Turcotte
sumber
0

Saya menemukan artikel ini tentang membuat tag HTML kustom dan membuat instance-nya. Ini menyederhanakan proses dan memecahnya menjadi istilah yang dapat dipahami dan digunakan siapa pun dengan segera - tetapi saya tidak sepenuhnya yakin sampel kode yang dikandungnya valid di semua browser, jadi peringatan emptor dan uji secara menyeluruh. Namun demikian, ini adalah pengantar yang bagus untuk memulai.

Elemen Kustom: Mendefinisikan elemen baru dalam HTML

— kode-sushi
sumber
-1 

<head>
  <lunch>
    <style type="text/css">
      lunch{
        color:blue;
        font-size:32px;
        }
      </style>
    </lunch>
  </head>

<body>
  <lunch>
    This is how you create custom tags like what he is asking for its very simple just do what i wrote it works yeah no js or convoluted work arounds needed this lets you do exactly what he wrote.
    </lunch>
  </body>
Luaskan cuplikan

— Rezoundr
sumber
Cemerlang. Adakah ide mengapa ini tidak disukai atau diterima?
— rnso
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.