{i>HyperText Markup Language<i}, atau HTML, adalah bahasa markup standar untuk menjelaskan struktur dokumen yang ditampilkan di web. HTML terdiri dari serangkaian elemen dan atribut yang digunakan untuk menandai semua komponen dokumen untuk menyusunnya dengan cara yang bermakna.
Dokumen HTML pada dasarnya adalah pohon simpul, termasuk elemen HTML dan simpul teks. Elemen HTML menyediakan semantik dan pemformatan untuk dokumen, termasuk pembuatan paragraf, daftar dan tabel, serta penyematan gambar dan kontrol formulir. Setiap elemen dapat memiliki beberapa atribut yang ditetapkan. Banyak elemen dapat memiliki konten, termasuk elemen dan teks lainnya. Elemen lainnya kosong, dengan tag dan atribut yang menentukan fungsinya.
Ada beberapa kategori elemen, termasuk {i>metadata<i}, bagian, teks, semantik {i>inline<i}, formulir, interaktif, media, komponen, dan {i>scripting<i}. Kita akan membahas sebagian besarnya dalam rangkaian ini. Pertama-tama, apa yang dimaksud dengan elemen?
Elemen
HTML terdiri dari serangkaian elemen, yang Anda gunakan untuk mengapit, atau menggabungkan, bagian-bagian konten yang berbeda untuk membuatnya muncul atau bertindak dengan cara tertentu. Elemen HTML ditunjukkan oleh tag, yang ditulis menggunakan tanda kurung sudut (< dan >).
Judul halaman kita adalah heading, level satu, yang kita gunakan tag <h1>. Judul sebenarnya, "Workshop Machine Learning", adalah konten dari elemen kita. Konten berada di antara tag terbuka dan penutup. Semuanya—tag pembuka, tag penutup, dan konten—adalah elemennya.
Tag penutup adalah tag yang sama dengan tag pembuka, yang diawali dengan garis miring.
Elemen dan tag bukanlah hal yang sama persis, meskipun banyak orang menggunakan istilah tersebut secara bergantian. Nama tag adalah konten dalam tanda kurung. Tag menyertakan tanda kurung. Dalam kasus ini, <h1>. "Elemen" adalah tag pembuka dan penutup, serta semua konten di antara tag tersebut, termasuk elemen tersarang.
<p>This paragraph has some
<strong><em>strongly emphasized</em></strong>
content</p>
Elemen paragraf ini memiliki elemen lain yang ditumpangkan di dalamnya. Saat elemen bertingkat, penting bahwa elemen tersebut disarangkan dengan benar. Tag HTML harus ditutup dalam urutan terbalik saat dibuka. Pada contoh di atas, perhatikan bagaimana <em> dibuka dan ditutup dalam tag <strong> pembuka dan penutup, dan <strong> terbuka dan tertutup dalam tag <p>.
Browser tidak menampilkan tag. Tag digunakan untuk menafsirkan konten halaman.
HTML sangat, sangat memaafkan. Misalnya, jika kita menghilangkan tag </li> penutup, tag penutup akan tersirat.
<ul>
<li>Blendan Smooth
<li>Hoover Sukhdeep
<li>Toasty McToastface
</ul>
Meskipun tidak valid untuk tidak menutup <li>, itu bukan praktik yang baik. </ul> penutup bersifat wajib. Jika tag penutup daftar yang tidak diurutkan dihilangkan, browser akan mencoba menentukan akhir dari daftar dan item daftar Anda, tetapi Anda mungkin tidak setuju dengan keputusan tersebut.
Spesifikasi untuk setiap elemen mencantumkan apakah tag penutup bersifat wajib atau tidak. "Tidak ada tag yang tidak diizinkan" dalam spesifikasi berarti tag pembuka dan tag penutup diperlukan. Spesifikasi menyediakan daftar semua tag penutup yang diperlukan.
Jika <em> atau <strong> pada contoh sebelumnya belum ditutup, browser mungkin akan menutup elemen tersebut atau tidak untuk Anda. Tidak menutup <em> hanya akan menyebabkan konten mungkin dirender secara berbeda dari yang Anda inginkan. Jika </ul> dihilangkan dan tag berikutnya adalah tag penutup untuk penampung induk dari daftar, Anda akan beruntung. Di sisi lain, jika berupa tag <h1> pembuka, browser akan menganggap header sebagai bagian dari daftar, termasuk mewarisi gaya. Beberapa tag penutup yang dihilangkan menyebabkan masalah yang lebih besar: tidak menutup sebagian tag, seperti <script>, <style>, <template>, <textarea>, dan <title>, akan merusak konten berikutnya seperti yang ditunjukkan dalam contoh berikut.
Memiliki beberapa konten yang dicetak miring secara tidak sengaja atau memiliki judul yang diindentasi tidak akan merusak bisnis Anda. Sebagian besar konten Anda tampak tanpa gaya di area teks 200x300 karena Anda lupa menambahkan </textarea> atau tidak muncul sama sekali karena Anda lupa menutup </style> membuat situs tidak dapat digunakan.
Dalam beberapa kasus, browser akan menyertakan elemen meskipun tag tidak ada dalam markup. Karena elemen dapat tersirat, elemen dapat muncul bahkan ketika tag tidak ada. Browser akan menambahkan <body></body> di sekitar konten dan <tbody></tbody> di sekitar baris tabel, meskipun Anda tidak menambahkannya. Dengan demikian, meskipun valid untuk menghilangkan tag, sebaiknya jangan. Selain itu, seperti yang telah disebutkan, pastikan mereka bertingkat dengan benar. Anda akan berterima kasih sebagai pemelihara markup, dan siapa pun yang mengerjakan basis kode Anda.
Ada dua jenis elemen: diganti dan tidak diganti.
Elemen yang tidak diganti
Paragraf, header, dan daftar yang di-markup di bagian sebelumnya tidak diganti. Elemen yang tidak diganti memiliki tag pembuka dan (terkadang opsional) penutup yang mengelilinginya dan dapat menyertakan teks serta tag lainnya sebagai sub-elemen. Tag pelengkap ini dapat mengubah frasa atau gambar menjadi {i>hyperlink<i}, dapat membuat kalimat menjadi {i>header<i}, dapat memberikan penekanan pada kata-kata, dan sebagainya.
Elemen yang diganti dan kosong
Elemen yang diganti akan digantikan oleh objek, baik itu widget antarmuka pengguna grafis (UI) untuk sebagian besar kontrol formulir, atau file gambar raster atau skalabel untuk sebagian besar gambar. Digantikan oleh objek, masing-masing item dilengkapi dengan tampilan default. Bergantung pada jenis objek dan browser, gaya yang berlaku akan terbatas. Misalnya, sebagian besar browser memungkinkan penataan gaya terbatas widget UI dan elemen pseudo terkait. Dalam kasus gambar raster, tinggi, lebar, pemotongan, dan penyaringan mudah dilakukan dengan CSS, tetapi tidak banyak yang lain. Di sisi lain, grafik vektor yang dapat diskalakan, menggunakan bahasa markup berdasarkan XML yang mirip dengan HTML sepenuhnya dapat diskalakan (kecuali jika berisi gambar raster). Mereka juga dapat ditata sepenuhnya. Perhatikan bahwa kemampuan untuk menata gaya SVG tersemat dari CSS yang ditautkan ke file HTML yang menyematkannya bergantung pada bagaimana SVG disiapkan.
Dalam contoh ini, dua elemen yang diganti <img> dan <input> diganti dengan konten non-teks: masing-masing gambar dan objek antarmuka pengguna grafis.
<input type="range">
<img src="switch.svg" alt="light switch">
Output HTML di atas:
Elemen yang diganti dan elemen {i>void<i} sering kali bingung. Elemen kosong adalah elemen yang menutup sendiri dan diwakili oleh satu tag. Ini berarti tidak ada tag penutup untuk elemen kosong. Atau, Anda dapat menyertakan garis miring di akhir tag, yang menurut banyak orang membuat markup lebih mudah dibaca. Melanjutkan contoh ini, kita menutup sendiri tag dengan garis miring:
<input type="range"/>
<img src="switch.svg" alt="light switch"/>
Garis miring di akhir adalah istilah lawas: ini adalah cara untuk menunjukkan bahwa elemen tersebut menutup sendiri dan tidak akan ada tag akhir atau penutup yang cocok.
Elemen kosong tidak boleh berisi konten teks atau elemen bertingkat. Elemen yang kosong mencakup <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <source>, <track>, dan <wbr>.
Sebagian besar elemen yang diganti adalah elemen kosong, tetapi tidak semuanya. Elemen video, picture, object, dan iframe diganti, tetapi tidak kosong. Semuanya dapat berisi elemen atau teks lain, sehingga semuanya memiliki tag penutup.
Sebagian besar elemen void diganti; tetapi sekali lagi, tidak semua, seperti yang kita lihat pada base, link, param, dan meta. Mengapa memiliki elemen kosong, yang tidak dapat memiliki konten, yang tidak diganti dan dengan demikian tidak merender apa pun ke layar? Untuk memberikan informasi tentang konten. Informasi ini disediakan oleh atribut elemen.
Atribut
Anda mungkin telah melihat contoh <img> dan <input> memiliki lebih dari sekadar jenis elemen di tag pembukanya. Bit tambahan dari pasangan nama/nilai yang dipisahkan spasi (meskipun terkadang menyertakan nilai bersifat opsional) disebut atribut. Atributlah yang membuat HTML
begitu andal. Kita akan membahas ratusan atribut dan nilai atribut dalam rangkaian ini, tetapi di sini kita hanya akan membahas atribut dan nilai tersebut secara umum dan cara menyertakannya.
Atribut memberikan informasi tentang elemen. Atribut tersebut, seperti tag pembuka lainnya, tidak akan muncul di dalam konten, tetapi membantu menentukan bagaimana konten akan terlihat oleh pengguna yang berpenglihatan dan tidak berpenglihatan (teknologi pendukung dan mesin telusur).
Atribut hanya muncul di tag pembuka. Tag pembuka selalu dimulai dengan jenis elemen. Jenis dapat diikuti dengan nol atribut atau lebih, yang dipisahkan oleh satu atau beberapa spasi. Sebagian besar nama atribut diikuti dengan tanda sama dengan yang menyamakannya dengan nilai atribut, yang diawali dan diakhiri dengan tanda kutip.
Dalam contoh ini, kita memiliki link anchor dengan dua atribut. Kedua atribut ini telah mengonversi konten "Pendaftaran" menjadi link anchor internal yang men-scroll ke atribut id="register" di tab browser saat ini ketika link diklik, diketuk, atau diaktifkan dengan keyboard atau perangkat lain.
Atribut menentukan perilaku, penautan, dan fungsi elemen. Kita akan membahas atribut lainnya di bagian Attributes dalam rangkaian tutorial ini. Untuk saat ini, perhatikan bahwa beberapa atribut bersifat global—yang berarti atribut tersebut dapat muncul dalam tag pembuka elemen apa pun. Sebagian hanya berlaku untuk beberapa elemen, tetapi tidak semuanya, dan elemen lainnya bersifat khusus, yang hanya relevan untuk satu elemen.
Sebagian besar atribut merupakan pasangan nama/nilai. Atribut Boolean, yang nilainya benar, salah, atau sama dengan nama atribut, dapat disertakan sebagai atribut saja: nilai tersebut tidak diperlukan.
<img src="switch.svg" alt="light switch" ismap />
Gambar ini memiliki tiga atribut: src, alt, dan ismap. Atribut src digunakan untuk menyediakan lokasi aset gambar SVG. Atribut alt menyediakan teks alternatif yang menjelaskan konten gambar. Atribut ismap bersifat Boolean, dan tidak memerlukan nilai. Ini hanya untuk menjelaskan apa itu atribut. Kami akan membahas atribut ini secara lebih mendetail di bagian gambar.
Meskipun mengutip atribut tidak selalu wajib, terkadang demikian. Jika nilai mencakup spasi atau karakter khusus, maka tanda kutip diperlukan. Karena alasan ini, kutipan selalu direkomendasikan. Satu atau beberapa spasi di antara atribut jika nilai atribut dikutip tidak benar-benar diperlukan, tetapi agar aman, dan untuk keterbacaan, kutipan dan spasi direkomendasikan dan dihargai.
HTML tidak peka huruf besar/kecil, tetapi beberapa nilai atribut peka huruf besar/kecil. Nilai yang ditentukan dalam spesifikasi tidak peka huruf besar/kecil. String yang tidak ditentukan sebagai kata kunci umumnya peka huruf besar/kecil, termasuk nilai id dan class.
Perlu diperhatikan bahwa jika nilai atribut peka huruf besar/kecil dalam HTML, nilai tersebut juga akan peka huruf besar/kecil saat digunakan sebagai bagian dari pemilih atribut di CSS dan JavaScript.
Agar markup lebih mudah dibaca, sebaiknya, tetapi tidak wajib, markup HTML menggunakan huruf kecil untuk semua nama elemen dan nama atribut dalam tag, dan kutip semua nilai atribut. Jika Anda pernah mendengar istilah "markup gaya XML", ini, dan elemen kosong yang menutup sendiri dengan garis miring di akhir, adalah maknanya.
Tampilan elemen
Tampilan default elemen semantik ditetapkan oleh stylesheet agen pengguna. Sebagian besar browser menggunakan stylesheet sebenarnya untuk tujuan ini, sementara yang lain menyimulasikannya dalam kode. Hasil akhirnya sama. Walaupun beberapa batasan pada stylesheet agen pengguna ditetapkan oleh spesifikasi HTML, browser memiliki banyak jarak, yang berarti ada beberapa perbedaan di antara browser.
Elemen yang Anda pilih, dan oleh karena itu, tag yang Anda gunakan, harus sesuai untuk konten yang Anda tampilkan, karena tag memiliki makna semantik. Semantik atau role elemen penting bagi teknologi pendukung dan, dalam kasus tertentu, mesin telusur. HTML harus digunakan untuk menyusun konten, bukan untuk menentukan tampilan konten. Penampilan adalah ranah CSS. Meskipun banyak elemen yang mengubah tampilan konten, seperti <h1>, <strong>, dan <em>, memiliki makna semantik, penampilan tersebut dapat dan umumnya akan diubah dengan gaya penulis.
<h1>This header has both <strong>strong</strong> and <em>emphasized</em> content</h1>
Elemen, atribut, dan JavaScript
Document Object Model (DOM) adalah representasi data dari struktur dan konten dokumen HTML. Saat browser mengurai HTML, browser membuat objek JavaScript untuk setiap elemen dan bagian teks yang ditemukan. Objek ini masing-masing disebut node—node elemen dan node teks.
Terdapat antarmuka untuk menentukan fungsi setiap elemen HTML. HTML DOM API menyediakan akses ke dan kontrol setiap elemen HTML melalui DOM, yang menyediakan antarmuka untuk elemen HTML dan semua class HTML yang mewarisinya. Antarmuka HTMLElement mewakili elemen HTML dan semua node turunannya. Setiap elemen lainnya mengimplementasikannya melalui antarmuka yang mewarisinya. Setiap antarmuka yang mewarisi memiliki konstruktor, metode, dan properti. Melalui properti HTMLElement yang diwariskan, Anda dapat mengakses setiap atribut global, serta peristiwa input, pointer, transition, dan animation. Melalui subjenis elemen individual, seperti HTMLAnchorElement dan HTMLImageElement, Anda dapat mengakses metode dan nilai atribut khusus elemen.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang HTML
Elemen HTML digunakan untuk penataan gaya.
Pilih elemen yang diganti.
<img><p><ul><input>Pilih semua pernyataan yang benar.