Dapatkah tag html menjadi apa saja?

Dalam tutorial ini, saya akan menunjukkan kepada Anda betapa mudahnya memperluas bahasa HTML dengan tag khusus. Tag khusus dapat digunakan untuk mengimplementasikan berbagai perilaku, sehingga merupakan cara yang sangat nyaman untuk menulis lebih sedikit kode dan membuat dokumen HTML Anda lebih sederhana

Table of Contents Show

Apa itu Tag HTML Khusus?
1. Membuat Proyek
2. Memodifikasi index. html
3. Mendaftarkan Tag Baru
Langkah 1. Pilih Nama yang Tepat
Langkah 2. Pilih Prototipe yang Tepat
4. Membuat Instansiasi Elemen Khusus
5. Menambahkan Markup ke Tag Khusus
6. Metode Siklus Hidup
7. Properti untuk Atribut
Bisakah saya menggunakan tag apa pun dalam HTML?
Manakah yang bukan merupakan tag HTML yang valid?
Apa aturan penulisan tag HTML?
Apakah semua tag HTML memiliki?

Untuk melangkah lebih jauh dengan tag khusus, lihat posting saya tentang membuat tag khusus yang dienkapsulasi dengan Shadow DOM

Perluas HTML Dengan Tag Khusus dan Shadow DOM
Divya Dev
13 November 2022

Apa itu Tag HTML Khusus?

Dengan HTML, Anda menggunakan tag

_36, misalnya, untuk menampilkan teks tebal. Jika Anda memerlukan daftar, gunakan tag

37 dengan tag turunannya

38 untuk setiap item daftar. Tag diinterpretasikan oleh browser dan, bersama dengan CSS, menentukan bagaimana konten laman web ditampilkan dan juga bagaimana perilaku bagian konten

Terkadang, hanya menggunakan satu tag HTML saja tidak cukup untuk fungsionalitas yang dibutuhkan dalam aplikasi web. Biasanya, ini diselesaikan dengan menggunakan beberapa tag HTML bersamaan dengan JavaScript dan CSS, tetapi solusi ini tidak begitu elegan.

Solusi yang lebih elegan adalah dengan menggunakan tag khusus—pengidentifikasi yang terlampir dalam

39 yang ditafsirkan oleh browser untuk merender fungsionalitas yang kami maksudkan. Seperti halnya tag HTML biasa, kita harus dapat menggunakan tag khusus beberapa kali pada laman, dan kita juga harus dapat memiliki atribut tag dan sub-tag untuk membantu fungsi tag khusus

Dalam istilah yang lebih sederhana, elemen khusus dapat digunakan untuk membuka kunci fitur berikut

mendefinisikan dan membangun elemen HTML baru
membangun elemen yang memperluas elemen lainnya
buat elemen yang dapat menyatukan fungsionalitas khusus dalam aplikasi Anda
gunakan elemen DOM yang ada dan perluas API mereka

Dalam posting ini, kita akan belajar tentang elemen khusus dengan membuat tag khusus yang disebut

40. Tag khusus ini akan menampilkan gambar Gravatar untuk alamat email tertentu.

41 API di browser modern memudahkan hal ini

1. Membuat Proyek

Untuk menerapkan dan menguji tag kita, kita perlu membuat beberapa hal

sebuah indeks. html untuk menggunakan tag khusus
sebuah codingdude-gravatar. js untuk menerapkan tag khusus

2. Memodifikasi index. html

Mari kita edit file index. html dan buat isinya seperti ini

<!DOCTYPE html>

<html>

<head>

    <script type="text/javascript" src="codingdude-gravatar.js"></script>

</head>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

___9

Jika kami memuat index. html di browser sekarang, hasilnya tidak terlalu mengesankan karena kita belum mengimplementasikan kode untuk tag kustom kita.

Satu hal yang perlu diperhatikan adalah browser ini sangat pemaaf, sehingga Anda dapat memiliki tag yang tidak dikenal di dokumen, dan browser akan mengabaikannya. Agar tag khusus kami benar-benar menampilkan gambar Gravatar untuk email saya, pertama-tama kami harus memahami cara kerja Gravatar

3. Mendaftarkan Tag Baru

Langkah 1. Pilih Nama yang Tepat

Untuk membuat tag khusus, Anda harus menggunakan

Argumen pertama di

43 adalah nama tag. Inilah yang telah kami sebutkan di file HTML. Nama harus selalu memiliki tanda hubung (-). Tag dengan nama seperti

_44 tidak valid. Ini memungkinkan parser harus dapat membedakan elemen biasa dari tag khusus.

Nama tag elemen khusus harus selalu memiliki tanda hubung (-)

Langkah 2. Pilih Prototipe yang Tepat

_43 memiliki objek opsional kedua. Objek ini digunakan untuk menyebutkan prototipe elemen baru. Secara default, elemen khusus mewarisi dari

46. Sepotong kode di atas setara dengan yang berikut ini

Jika Anda ingin membuat elemen khusus, yang memperluas elemen HTML lain, elemen asli harus diperluas di

43. Elemen khusus yang mewarisi elemen asli juga dikenal sebagai "jenis elemen khusus ekstensi".

Beberapa hal lagi yang harus diperhatikan

Anda tidak dapat mendaftarkan tag beberapa kali. Jika Anda mencoba ini, browser akan melontarkan
```
2
```
48
Tag elemen khusus tidak boleh menutup sendiri

4. Membuat Instansiasi Elemen Khusus

Semua aturan standar elemen HTML berlaku untuk elemen khusus. Sama seperti elemen standar, Anda dapat membuat elemen khusus di DOM menggunakan JavaScript, atau mendeklarasikannya dalam HTML

Mendeklarasikan elemen khusus dalam HTML

Membuat elemen khusus di DOM menggunakan JavaScript

<html>

Instansiasi elemen ekstensi tipe dalam HTML

<html>

Membuat elemen ekstensi tipe di DOM menggunakan JavaScript

<html>

5. Menambahkan Markup ke Tag Khusus

Menambahkan markup agak sederhana dalam tag khusus. Untuk memulainya, Anda perlu membuat kelas yang memperluas elemen induk HTML. Dalam kasus kami, kami akan memperpanjang

46. Di dalam

_46, kami akan menggunakan

51 untuk menambahkan pendengar acara dan menyesuaikan

52 dari tag khusus. Ingatlah untuk memanggil

_53 karena itu akan membantu mewarisi metode dan properti kelas induk. Selalu ingat,

_54 di dalam poin konstruktor ke elemen khusus yang dibuat

Berikut adalah ikhtisar sederhana tentang bagaimana komponen kita akan terlihat

<html>

<html>

________________________________________________________________________________________________________________________________________________________________________________________________________________________________

6. Metode Siklus Hidup

Sebelum Anda mulai menambahkan markup ke tag khusus, Anda harus mengetahui metode daur hidup yang terkait dengan tag khusus. Ada empat callback siklus hidup

CallbackPurpose

_51sebuah contoh elemen tag khusus dibuat

56sebuah contoh elemen tag khusus dimasukkan ke dalam dokumen

57sebuah contoh elemen tag khusus dihapus dari dokumen

58sebuah atribut dalam elemen tag khusus ditambahkan, dihapus, atau diperbarui

Kerangka tag khusus kami dengan panggilan balik ini akan terlihat sebagai berikut

<html>

<head>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

    <script type="text/javascript" src="codingdude-gravatar.js"></script>

<!DOCTYPE html>

    <script type="text/javascript" src="codingdude-gravatar.js"></script>

    <script type="text/javascript" src="codingdude-gravatar.js"></script>

    <script type="text/javascript" src="codingdude-gravatar.js"></script>

    <script type="text/javascript" src="codingdude-gravatar.js"></script>

<head>

Kami telah melihat cara menggunakan

51 dalam elemen khusus. Sekarang, mari gunakan metode panggilan balik lainnya dalam kode kita. Mari kita mulai dengan

_56

56 dapat digunakan untuk memeriksa atribut email di tag khusus kami. Segera setelah elemen ditambahkan ke dokumen, pemeriksaan ini akan dilakukan. Kami akan menggunakan fungsi

_63 untuk memeriksa apakah

64 memiliki atribut

65 atau tidak

<html>

</head>

<head>

<html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

    <script type="text/javascript" src="codingdude-gravatar.js"></script>

<head>

    <script type="text/javascript" src="codingdude-gravatar.js"></script>

<!DOCTYPE html>

    <script type="text/javascript" src="codingdude-gravatar.js"></script>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<head>

<!DOCTYPE html>

<head>

Saat tag khusus dimasukkan ke dalam HTML, Anda akan melihat sesuatu seperti ini

Namun, ketika atribut

_65 diatur dalam tag khusus, layar akan menjadi seperti berikut

<!DOCTYPE html>

_67

Browser akan memanggil metode siklus hidup

67 untuk semua atribut yang tercantum dalam larik

69. Tujuan di balik ini adalah untuk meningkatkan kinerja tag khusus. Misalnya, jika pengguna memutuskan untuk mengubah gaya, Anda tidak ingin

67 dipecat. Dalam kasus kami, kami ingin

_67 dipanggil hanya ketika email berubah. Untuk mencapai ini, kode akan muncul sebagai berikut

<html>

</head>

<head>

<html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

    <script type="text/javascript" src="codingdude-gravatar.js"></script>

<head>

    <script type="text/javascript" src="codingdude-gravatar.js"></script>

<!DOCTYPE html>

    <script type="text/javascript" src="codingdude-gravatar.js"></script>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<head>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<head>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

90______

Berdasarkan potongan kode di atas, peringatan akan terlihat setiap kali kita mengganti email

Panggilan balik dalam elemen khusus bersifat sinkron. Jika Anda memanggil

_72 pada elemen khusus, browser akan segera memicu

73.

_57

Terakhir dalam daftar metode siklus hidup kami adalah

57. Saat Anda menghapus elemen dari dokumen, metode ini akan dipanggil. Metode ini sangat berguna saat Anda ingin membersihkan efek yang disebabkan oleh tag khusus. Anda dapat menghapus tag khusus dengan mudah, menggunakan metode ________0______76

Namun, Anda harus sangat berhati-hati tentang bagaimana ________0______77 digunakan. Callback ini tidak akan pernah dipicu jika pengguna memilih untuk menutup tab atau browser

7. Properti untuk Atribut

Di aplikasi berbasis HTML apa pun, sangat umum bagi pengembang untuk menggunakan properti yang merefleksikan kembali DOM. Misalnya,

_78 adalah properti yang dapat digunakan untuk menyembunyikan suatu elemen, e. g.

_79 hanya akan menyembunyikan elemen dari DOM. Wajar bagi pengembang untuk menginginkan properti ini bekerja pada tag khusus juga.

Karena kami memperluas dari

_46, properti ini akan ada di elemen khusus secara default. Namun, perilaku properti ini dapat dimodifikasi. Sering kali, getter dan setter di kelas JavaScript digunakan untuk mengontrol properti.

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

    <script type="text/javascript" src="codingdude-gravatar.js"></script>

    <script type="text/javascript" src="codingdude-gravatar.js"></script>

    <script type="text/javascript" src="codingdude-gravatar.js"></script>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

<!DOCTYPE html>

Demo

Semua yang dibahas dalam posting ini dapat dicoba dalam demo berikut

Lihat Tag Kustom Pena oleh DDev (@divyaddev) di CodePen

Kesimpulan

Hore. Kami telah sampai pada akhir posting kami tentang cara membuat elemen khusus. Sekarang, Anda harus dapat membuat elemen khusus dan menggunakannya di markup HTML Anda. Cobalah. Anda akan tercengang melihat seberapa banyak yang bisa dicapai

Ini hanyalah awal dari cara kerja elemen khusus. Masih banyak lagi yang bisa dijelajahi dan dipelajari di area ini. Pantau terus ruang ini untuk postingan lainnya tentang elemen khusus dan konsep lanjutannya