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

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 :(

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>

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.

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.

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.

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

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>

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>

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.

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.

Ini bukan opsi dalam spesifikasi HTML mana pun :)

Anda mungkin dapat melakukan apa yang Anda inginkan dengan <div>elemen dan kelas, dari pertanyaan saya tidak yakin apa yang Anda cari, tetapi tidak, membuat tag Anda sendiri bukanlah pilihan.

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.

Anda dapat menambahkan atribut khusus melalui data HTML 5- Atribut. Misalnya: Pesan yang valid untuk HTML 5. Lihat http://ejohn.org/blog/html-5-data-attributes/ untuk mendapatkan detailnya.

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

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>

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>

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!

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>

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