Kamu pernah penasaran gimana suatu halaman website ditampilkan? Dibalik itu ada sebuah document yang bernama HTML, berbeda dengan document dengan extension .doc, sebuah html dengan extension .html memiliki standardnya sendiri. HTML dibangun atas struktur penting, kumpulan element, penerapan styling dan lainnya yang akan dibahas pada artikel ini, simak dengan baik ya.<h2>Apa Itu HTML?</h2>HTML (HyperText Markup Language) adalah bahasa standar yang digunakan untuk membuat dan menyusun halaman web. HTML bekerja dengan cara memberikan struktur pada konten melalui elemen-elemen yang disebut tag.<h2>Struktur Dasar HTML</h2>Sebuah dokumen HTML memiliki struktur dasar seperti berikut:<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
 &lt;title&gt;Judul Halaman&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;h1&gt;Selamat Datang di HTML&lt;/h1&gt;
 &lt;p&gt;Ini adalah paragraf pertama saya di HTML.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre><ul class="novel-list-disc novel-list-outside novel-leading-3 novel--mt-2 tight" data-tight="true"><li class="novel-leading-normal novel--mb-2"><code class="novel-rounded-md novel-bg-stone-200 novel-px-1.5 novel-py-1 novel-font-mono novel-font-medium novel-text-stone-900" spellcheck="false">&lt;!DOCTYPE html&gt;</code>: Menentukan bahwa dokumen menggunakan HTML5.</li><li class="novel-leading-normal novel--mb-2"><code class="novel-rounded-md novel-bg-stone-200 novel-px-1.5 novel-py-1 novel-font-mono novel-font-medium novel-text-stone-900" spellcheck="false">&lt;html&gt;</code>: Elemen utama yang membungkus seluruh isi halaman.</li><li class="novel-leading-normal novel--mb-2"><code class="novel-rounded-md novel-bg-stone-200 novel-px-1.5 novel-py-1 novel-font-mono novel-font-medium novel-text-stone-900" spellcheck="false">&lt;head&gt;</code>: Berisi informasi meta, seperti judul halaman dan referensi file eksternal.</li><li class="novel-leading-normal novel--mb-2"><code class="novel-rounded-md novel-bg-stone-200 novel-px-1.5 novel-py-1 novel-font-mono novel-font-medium novel-text-stone-900" spellcheck="false">&lt;title&gt;</code>: Menentukan judul halaman yang muncul di tab browser.</li><li class="novel-leading-normal novel--mb-2"><code class="novel-rounded-md novel-bg-stone-200 novel-px-1.5 novel-py-1 novel-font-mono novel-font-medium novel-text-stone-900" spellcheck="false">&lt;body&gt;</code>: Berisi konten utama yang ditampilkan di halaman web.</li></ul>Dengan kehilangan salah satu struktur penting seperti diatas kemungkinan file HTML mu tidak dapat tampil dengan baik.<h2>Metadata dalam HTML</h2>Metadata adalah informasi tentang halaman web yang tidak ditampilkan secara langsung kepada pengguna tetapi penting untuk SEO dan pengindeksan oleh mesin pencari. Bijaklah dalam penggunaan keywords dan title karena itu sangat berpengaruh pada mesin pencari seperti Google. Contoh metadata dalam <code class="novel-rounded-md novel-bg-stone-200 novel-px-1.5 novel-py-1 novel-font-mono novel-font-medium novel-text-stone-900" spellcheck="false">&lt;head&gt;</code>:<pre><code>&lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
 &lt;meta name="description" content="Ini adalah deskripsi halaman web"&gt;
 &lt;meta name="keywords" content="HTML, Web Development, Tutorial"&gt;
 &lt;meta name="author" content="Nama Kamu"&gt;
 &lt;title&gt;Judul Halaman&lt;/title&gt;
&lt;/head&gt;</code></pre><ul class="novel-list-disc novel-list-outside novel-leading-3 novel--mt-2 tight" data-tight="true"><li class="novel-leading-normal novel--mb-2"><code class="novel-rounded-md novel-bg-stone-200 novel-px-1.5 novel-py-1 novel-font-mono novel-font-medium novel-text-stone-900" spellcheck="false">charset</code>: Menentukan jenis karakter yang digunakan.</li><li class="novel-leading-normal novel--mb-2"><code class="novel-rounded-md novel-bg-stone-200 novel-px-1.5 novel-py-1 novel-font-mono novel-font-medium novel-text-stone-900" spellcheck="false">viewport</code>: Mengatur tampilan responsif di perangkat mobile.</li><li class="novel-leading-normal novel--mb-2"><code class="novel-rounded-md novel-bg-stone-200 novel-px-1.5 novel-py-1 novel-font-mono novel-font-medium novel-text-stone-900" spellcheck="false">description</code>: Deskripsi singkat tentang halaman.</li><li class="novel-leading-normal novel--mb-2"><code class="novel-rounded-md novel-bg-stone-200 novel-px-1.5 novel-py-1 novel-font-mono novel-font-medium novel-text-stone-900" spellcheck="false">keywords</code>: Kata kunci terkait halaman.</li><li class="novel-leading-normal novel--mb-2"><code class="novel-rounded-md novel-bg-stone-200 novel-px-1.5 novel-py-1 novel-font-mono novel-font-medium novel-text-stone-900" spellcheck="false">author</code>: Nama penulis halaman.</li></ul><h2>Elemen dalam HTML</h2>Elemen HTML adalah bagian dari struktur halaman yang ditandai dengan tag pembuka dan penutup, biasanya tag pembuka hanya mempunyai kurung tanda kurung sudut (angle brackets) pembuka dan tanda kurung sudut penutup, sedangkan tag penutup diawali dengan slash atau garis miring "/" pada awal nama elemennya:<pre><code>&lt;p&gt;Ini adalah sebuah paragraf.&lt;/p&gt;</code></pre>Beberapa elemen penting dalam HTML:<ul class="novel-list-disc novel-list-outside novel-leading-3 novel--mt-2 tight" data-tight="true"><li class="novel-leading-normal novel--mb-2"><code class="novel-rounded-md novel-bg-stone-200 novel-px-1.5 novel-py-1 novel-font-mono novel-font-medium novel-text-stone-900" spellcheck="false">&lt;h1&gt;</code> sampai <code class="novel-rounded-md novel-bg-stone-200 novel-px-1.5 novel-py-1 novel-font-mono novel-font-medium novel-text-stone-900" spellcheck="false">&lt;h6&gt;</code>: Judul dengan tingkatan dari terbesar hingga terkecil.</li><li class="novel-leading-normal novel--mb-2"><code class="novel-rounded-md novel-bg-stone-200 novel-px-1.5 novel-py-1 novel-font-mono novel-font-medium novel-text-stone-900" spellcheck="false">&lt;p&gt;</code>: Paragraf.</li><li class="novel-leading-normal novel--mb-2"><code class="novel-rounded-md novel-bg-stone-200 novel-px-1.5 novel-py-1 novel-font-mono novel-font-medium novel-text-stone-900" spellcheck="false">&lt;a&gt;</code>: Link ke halaman lain.</li><li class="novel-leading-normal novel--mb-2"><code class="novel-rounded-md novel-bg-stone-200 novel-px-1.5 novel-py-1 novel-font-mono novel-font-medium novel-text-stone-900" spellcheck="false">&lt;img&gt;</code>: Menampilkan gambar.</li><li class="novel-leading-normal novel--mb-2"><code class="novel-rounded-md novel-bg-stone-200 novel-px-1.5 novel-py-1 novel-font-mono novel-font-medium novel-text-stone-900" spellcheck="false">&lt;ul&gt;</code> dan <code class="novel-rounded-md novel-bg-stone-200 novel-px-1.5 novel-py-1 novel-font-mono novel-font-medium novel-text-stone-900" spellcheck="false">&lt;ol&gt;</code>: Daftar tidak berurutan dan berurutan.</li><li class="novel-leading-normal novel--mb-2"><code class="novel-rounded-md novel-bg-stone-200 novel-px-1.5 novel-py-1 novel-font-mono novel-font-medium novel-text-stone-900" spellcheck="false">&lt;table&gt;</code>: Tabel untuk menampilkan data dalam bentuk baris dan kolom.</li></ul><h2>Semantic HTML</h2>Semantic HTML adalah penggunaan elemen HTML yang sesuai dengan maknanya untuk meningkatkan keterbacaan dan aksesibilitas. Penggunaan semantik sangat penting pada sebuah website, selain mudah dibaca pada code kita, website kita juga mudah dalam hal aksesibilitas sehingga memudahkan pengguna disabilitas dan pengalaman pengguna. Contoh elemen semantik:<ul class="novel-list-disc novel-list-outside novel-leading-3 novel--mt-2 tight" data-tight="true"><li class="novel-leading-normal novel--mb-2"><code class="novel-rounded-md novel-bg-stone-200 novel-px-1.5 novel-py-1 novel-font-mono novel-font-medium novel-text-stone-900" spellcheck="false">&lt;header&gt;</code>: Bagian kepala dari suatu halaman atau bagian.</li><li class="novel-leading-normal novel--mb-2"><code class="novel-rounded-md novel-bg-stone-200 novel-px-1.5 novel-py-1 novel-font-mono novel-font-medium novel-text-stone-900" spellcheck="false">&lt;nav&gt;</code>: Navigasi menu.</li><li class="novel-leading-normal novel--mb-2"><code class="novel-rounded-md novel-bg-stone-200 novel-px-1.5 novel-py-1 novel-font-mono novel-font-medium novel-text-stone-900" spellcheck="false">&lt;article&gt;</code>: Artikel yang berdiri sendiri.</li><li class="novel-leading-normal novel--mb-2"><code class="novel-rounded-md novel-bg-stone-200 novel-px-1.5 novel-py-1 novel-font-mono novel-font-medium novel-text-stone-900" spellcheck="false">&lt;section&gt;</code>: Bagian dalam halaman.</li><li class="novel-leading-normal novel--mb-2"><code class="novel-rounded-md novel-bg-stone-200 novel-px-1.5 novel-py-1 novel-font-mono novel-font-medium novel-text-stone-900" spellcheck="false">&lt;footer&gt;</code>: Bagian bawah halaman.</li></ul><pre><code>&lt;header&gt;
 &lt;h1&gt;Judul Website&lt;/h1&gt;
&lt;/header&gt;
&lt;nav&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="#"&gt;Beranda&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Tentang&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
&lt;/nav&gt;</code></pre><h2>Attribute dalam HTML</h2>Attribute digunakan untuk memberikan informasi tambahan pada elemen HTML. Contoh:<pre><code>&lt;a href="https://www.example.com" target="_blank"&gt;Kunjungi Website&lt;/a&gt;
&lt;img src="gambar.jpg" alt="Deskripsi gambar"&gt;</code></pre>Beberapa attribute umum:<ul class="novel-list-disc novel-list-outside novel-leading-3 novel--mt-2 tight" data-tight="true"><li class="novel-leading-normal novel--mb-2"><code class="novel-rounded-md novel-bg-stone-200 novel-px-1.5 novel-py-1 novel-font-mono novel-font-medium novel-text-stone-900" spellcheck="false">href</code>: Menentukan URL tujuan dalam elemen <code class="novel-rounded-md novel-bg-stone-200 novel-px-1.5 novel-py-1 novel-font-mono novel-font-medium novel-text-stone-900" spellcheck="false">&lt;a&gt;</code>.</li><li class="novel-leading-normal novel--mb-2"><code class="novel-rounded-md novel-bg-stone-200 novel-px-1.5 novel-py-1 novel-font-mono novel-font-medium novel-text-stone-900" spellcheck="false">src</code>: Menentukan sumber file dalam <code class="novel-rounded-md novel-bg-stone-200 novel-px-1.5 novel-py-1 novel-font-mono novel-font-medium novel-text-stone-900" spellcheck="false">&lt;img&gt;</code> atau <code class="novel-rounded-md novel-bg-stone-200 novel-px-1.5 novel-py-1 novel-font-mono novel-font-medium novel-text-stone-900" spellcheck="false">&lt;video&gt;</code>.</li><li class="novel-leading-normal novel--mb-2"><code class="novel-rounded-md novel-bg-stone-200 novel-px-1.5 novel-py-1 novel-font-mono novel-font-medium novel-text-stone-900" spellcheck="false">alt</code>: Memberikan teks alternatif untuk gambar.</li><li class="novel-leading-normal novel--mb-2"><code class="novel-rounded-md novel-bg-stone-200 novel-px-1.5 novel-py-1 novel-font-mono novel-font-medium novel-text-stone-900" spellcheck="false">id</code> dan <code class="novel-rounded-md novel-bg-stone-200 novel-px-1.5 novel-py-1 novel-font-mono novel-font-medium novel-text-stone-900" spellcheck="false">class</code>: Digunakan untuk pengidentifikasian elemen dalam CSS dan JavaScript.</li></ul><h2>Komponen Dasar HTML Lainnya</h2>Perlu dipahami komponen biasanya terdiri dari beberapa elemen yang digunakan kembali untuk membentuk bagian yang lebih kompleks dalam halaman web. Ini adalah contoh dari komponen:<ol class="novel-list-decimal novel-list-outside novel-leading-3 novel--mt-2 tight" data-tight="true"><li class="novel-leading-normal novel--mb-2">Formulir (Forms): Digunakan untuk mengumpulkan input pengguna.<pre><code>&lt;form&gt;
 &lt;label for="nama"&gt;Nama:&lt;/label&gt;
 &lt;input type="text" id="nama" name="nama"&gt;
 &lt;button type="submit"&gt;Kirim&lt;/button&gt;
&lt;/form&gt;</code></pre></li><li class="novel-leading-normal novel--mb-2">Media: Menampilkan gambar, audio, dan video.<pre><code>&lt;video controls&gt;
 &lt;source src="video.mp4" type="video/mp4"&gt;
&lt;/video&gt;</code></pre></li></ol><h2>Debugging HTML</h2>Debugging HTML adalah proses mencari dan memperbaiki kesalahan dalam kode HTML. Berikut adalah beberapa teknik debugging yang umum digunakan:<ol class="novel-list-decimal novel-list-outside novel-leading-3 novel--mt-2 tight" data-tight="true"><li class="novel-leading-normal novel--mb-2">Gunakan Developer Tools: Browser modern seperti Chrome dan Firefox memiliki alat pengembang yang dapat digunakan untuk memeriksa elemen HTML, melihat error di console, dan menganalisis tata letak CSS.<ul class="novel-list-disc novel-list-outside novel-leading-3 novel--mt-2 tight" data-tight="true"><li class="novel-leading-normal novel--mb-2">Tekan <code class="novel-rounded-md novel-bg-stone-200 novel-px-1.5 novel-py-1 novel-font-mono novel-font-medium novel-text-stone-900" spellcheck="false">F12</code> atau <code class="novel-rounded-md novel-bg-stone-200 novel-px-1.5 novel-py-1 novel-font-mono novel-font-medium novel-text-stone-900" spellcheck="false">Ctrl + Shift + I</code> untuk membuka Developer Tools.</li><li class="novel-leading-normal novel--mb-2">Gunakan tab "Elements" untuk melihat dan mengedit HTML secara langsung.</li><li class="novel-leading-normal novel--mb-2">Periksa tab "Console" untuk melihat error atau peringatan.</li></ul></li><li class="novel-leading-normal novel--mb-2">Validasi HTML: Gunakan layanan seperti W3C HTML Validator untuk memeriksa kesalahan dalam sintaks HTML.</li><li class="novel-leading-normal novel--mb-2">Periksa Konsol Browser: Jika halaman tidak tampil dengan benar, periksa error di tab "Console" dalam Developer Tools.</li><li class="novel-leading-normal novel--mb-2">Gunakan Mode Inspect: Klik kanan pada elemen dan pilih "Inspect" untuk melihat struktur HTML yang sedang dirender.</li><li class="novel-leading-normal novel--mb-2">Gunakan Placeholder dan Warna: Saat membangun halaman, gunakan warna latar belakang atau border untuk memahami tata letak elemen.</li></ol>Dengan memahami dasar-dasar HTML ini, Kamu dapat mulai membangun halaman web yang terstruktur dengan baik dan mudah dikembangkan!

Mengenal apa itu HTML