Tutorial HTML / Sintaks HTML: tag, atribut, dan penyarangan

Sintaks HTML menentukan bagaimana elemen, tag, atribut, teks, dan komentar dituliskan dalam dokumen HTML. Sebagian besar elemen menggunakan tag awal dan tag akhir, atribut diletakkan di tag awal, dan elemen yang bersarang harus ditutup dalam urutan terbalik dari saat mereka dibuka.

Sintaks dasar elemen dan tag HTML

Sebuah elemen HTML biasanya ditulis dengan tag awal, konten, dan tag akhir.

<tagname>Isi</tagname>

• <tagname> adalah tag awal yang menandai titik di mana elemen dimulai.
• Isi adalah teks atau konten lain yang dimuat oleh elemen.
• </tagname> adalah tag akhir yang menandai titik di mana elemen berakhir.

Kode berikut membuat sebuah elemen p. Tag awalnya adalah <p>, kontennya adalah Sintaks HTML, dan tag akhirnya adalah </p>.

<p>Sintaks HTML</p>

Nama tag dalam sintaks HTML tidak sensitif terhadap huruf ASCII. Namun, penggunaan huruf kecil adalah konvensi yang umum karena membuat markup konsisten dan mudah dibaca.

Elemen kosong tidak memiliki tag penutup

Tidak semua elemen HTML menggunakan tag penutup. Elemen kosong tidak dapat memiliki konten dan tidak boleh memiliki tag penutup.

<br>
<img src="image.webp" alt="Matahari terbit di atas lautan biru">
<input type="text" name="username">
<meta charset="utf-8">

br, img, input, dan meta adalah contoh elemen kosong yang umum. Jangan menulis tag penutup yang tidak ada seperti </br> atau </img>.

Garis miring penutup, seperti pada <br />, diperbolehkan dalam tag awal elemen kosong di HTML, tetapi tidak memiliki fungsi penutupan otomatis di HTML dan tidak diperlukan.

Cara Menulis Atribut HTML

Atribut mengkonfigurasi sebuah elemen atau memberikan informasi tambahan. Mereka ditulis di dalam tag awal, dengan nama atribut dan nilainya dipisahkan oleh tanda sama dengan (=). Untuk penggunaan atribut secara praktis, bandingkan atribut for, id, dan name pada Menghubungkan label dan input dengan benar.

<tagname attribute="value">Isi</tagname>

Sebagai contoh, kode ini memberikan sebuah elemen blockquote sebuah atribut id dengan nilai quote-01.

<blockquote id="quote-01">

  Teks yang dikutip

</blockquote>

HTML mendukung nilai atribut dalam tanda kutip ganda, tanda kutip tunggal, dan — dalam kasus terbatas — juga tanpa tanda kutip. Penggunaan konsisten tanda kutip ganda adalah konvensi praktis, karena spasi dan beberapa karakter khusus lainnya tidak diperbolehkan dalam nilai yang tidak dikutip.

<p style="color: red;">Teks merah</p>

Dalam contoh salah berikut, spasi mengakhiri nilai yang tidak dikutip style setelah color:. Oleh karena itu, browser tidak menginterpretasikan atribut sebagaimana dimaksud.

<p style=color: red;>Teks merah</p>

Atribut boolean seperti disabled, checked, dan required bernilai benar jika ada. Mereka dapat ditulis hanya dengan menggunakan nama atribut.

<input type="text" disabled>

Tutup elemen bersarang dalam urutan yang benar

Jika suatu elemen ditempatkan di dalam elemen lain, tutuplah elemen bagian dalam sebelum menutup elemen bagian luar. Penandaan berikut ini bersarang dengan benar karena elemen strong sepenuhnya berada di dalam elemen p.

<p>Kalimat ini berisi <strong>teks penting</strong>.</p>

Contoh berikut ini bersarang secara salah karena area kedua elemen saling tumpang tindih.

<p>Kalimat ini berisi <strong>teks penting</p></strong>

Browser dapat memperbaiki markup yang salah saat mem-parsing, tetapi Document Object Model (DOM, model objek dokumen) yang dihasilkan dapat berbeda dari struktur yang Anda harapkan. Jangan mengandalkan perbaikan browser sebagai pengganti markup yang valid.

Cara Menulis Komentar HTML

Sebuah komentar HTML dimulai dengan <!-- dan diakhiri dengan -->. Komentar tidak ditampilkan sebagai konten halaman, sehingga dapat digunakan untuk mendokumentasikan tujuan markup atau meninggalkan catatan sementara untuk pengembang.

<!-- Komentar ini tidak akan ditampilkan di halaman. -->

Sebuah komentar dapat mencakup beberapa baris.

<!--

  Ini adalah komentar HTML multi-baris.

-->

Jangan menanamkan komentar HTML di dalam komentar lainnya. Tanda batas komentar yang ditanamkan dapat menyebabkan komentar berakhir di tempat yang berbeda dari yang Anda harapkan.

<!--

  &amp;lt;!-- Jangan menaruh komentar di dalam komentar. -->

-->

Struktur dasar sebuah dokumen HTML

Contoh berikut menunjukkan struktur minimal dan praktis untuk sebuah dokumen HTML dalam bahasa Indonesia. Latihlah untuk menemukan kesalahan, validasi dokumen HTML, dan periksa kembali.

<!doctype html>
<html lang="id-ID">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Judul dokumen</title>
  </head>
  <body>
    <h1>Judul halaman</h1>
    <p>Isi halaman berada di sini.</p>
  </body>
</html>

• <!doctype html> memilih mode tampilan berbasis standar yang digunakan untuk dokumen HTML modern.
• <html lang="id-ID"> adalah elemen dokumen, dan lang="id-ID" menandai bahasa Indonesia sebagai bahasa utama.
• <head> berisi metadata dokumen seperti pengkodean karakter, pengaturan viewport, dan judul dokumen.
• <body> berisi judul, paragraf, gambar, tautan, dan konten lain yang ditampilkan di halaman.

Cara memeriksa sintaks HTML

Browser mencoba menampilkan dokumen bahkan jika markup-nya mengandung kesalahan. Fakta bahwa sebuah halaman muncul di layar tidak membuktikan bahwa sintaksnya benar. Periksa penempatan bersarang dan atribut, dan gunakan Nu HTML Checker untuk mengidentifikasi kesalahan markup dan peringatan.

Untuk aturan yang tepat tentang tag, atribut, elemen kosong, dan komentar, lihat bagian sintaks dalam HTML Living Standard WHATWG.

Atribut boolean dan karakter literal

Sebuah atribut boolean ditentukan oleh keberadaannya dan bukan oleh string seperti "false". checked="false" selalu ada, sehingga secara default dipilih, dan "false" bukan nilai yang sah untuk atribut boolean. Hapus checked agar tidak dipilih secara default. Jangan perlakukan atribut boolean seperti atribut normal dengan nilai string.

<label><input type="checkbox" name="news" value="yes" checked> Berita</label>
<label><input type="checkbox" name="updates" value="yes"> Pembaruan</label>

Hanya kontrol pertama yang seharusnya dipilih secara default. Untuk menampilkan elemen <p> yang ditampilkan secara literal, tulis tanda kurungnya sebagai < dan >. Gunakan & untuk ampersand yang ditampilkan secara literal, jika diperlukan escape. Bedakan kode yang ditampilkan sebagai teks dari markup yang membuat suatu elemen.

<p>&lt;p&gt; adalah elemen paragraf. A &amp; B adalah dua nama.</p>

Contoh ini menunjukkan tanda kurung sudut dan simbol ampersand alih-alih membuat paragraf bersarang. Lihat aturan HTML untuk atribut boolean .

Daftar periksa sintaks HTML

• Sisipkan <!doctype html> di awal dokumen HTML lengkap.
• Gunakan huruf kecil secara konsisten untuk nama tag dan atribut.
• Tulis nilai atribut dalam tanda kutip, sebaiknya menggunakan tanda kutip ganda untuk konsistensi.
• Jangan tambahkan tag penutup untuk elemen kosong.
• Tutup elemen bersarang dari dalam ke luar.
• Gunakan lang untuk mengidentifikasi bahasa dokumen.
• Jangan masukkan data rahasia ke dalam komentar dan kode sumber halaman.
• Validasi dokumen akhir, jangan hanya mengandalkan tampilan visualnya.