BAB 3: Anatomi Tag HTML – Memahami Struktur Dasar Website
Selamat datang di bagian paling penting dari tutorial HTML untuk pemula bersama Authemic Labs bersama Mas Hedi. Jika pada bab sebelumnya kita sudah belajar setup lingkungan kerja, maka sekarang kita akan membongkar anatomi HTML secara detail.
Bab ini dipersembahkan khusus untuk komunitas Authemers, yaitu para pembaca setia Authemic Labs yang ingin menjadi developer profesional.
Apa Itu Tag HTML?
HTML dibangun menggunakan sesuatu yang disebut tag. Tag adalah penanda yang memberi tahu browser bagaimana sebuah konten harus ditampilkan.
📚 Baca Juga
Misalnya, jika kita ingin membuat paragraf teks, kita menggunakan tag <p>. Browser akan membaca tag ini lalu menampilkan teks sebagai paragraf.
Jika kamu masih baru di dunia HTML, kamu bisa membaca kembali panduan dasar apa itu HTML untuk memahami konsep fundamentalnya.
Diagram Visual Anatomi HTML
Tag Pembuka → <p> Konten → Halo dunia web Tag Penutup → </p> Atribut → class=”intro”
Struktur HTML biasanya terdiri dari:
- Tag pembuka
- Konten
- Tag penutup
- Atribut tambahan
Contoh Tag HTML Dasar
<h1>Selamat Datang di Website Saya</h1>
<p>
Ini adalah paragraf pertama saya dalam HTML.
</p>
Selamat Datang di Website Saya
Ini adalah paragraf pertama saya dalam HTML.
Di atas kita melihat dua tag HTML:
- h1 → heading utama halaman
- p → paragraf
Heading sangat penting untuk SEO. Google menggunakan struktur heading untuk memahami isi halaman.
Apa Itu Atribut HTML?
Atribut memberikan informasi tambahan pada tag HTML.
<a href="https://authemic.com">
Kunjungi Authemic Labs
</a>
Dalam contoh ini:
- a → tag link
- href → atribut tujuan link
Atribut HTML sangat banyak. Bahkan dalam CSS saja ada puluhan properti penting yang bisa kamu pelajari dalam artikel 50 properti CSS paling penting.
Aturan Nesting HTML
HTML memiliki aturan yang disebut nesting, yaitu menempatkan tag di dalam tag lain dengan struktur yang benar.
<p>
Ini adalah paragraf dengan
<strong>teks penting</strong>.
</p>
Ini adalah paragraf dengan teks penting.
Jika nesting salah, browser tetap akan mencoba memperbaikinya, tetapi kode menjadi tidak valid.
Mengapa Struktur HTML Penting untuk SEO?
Dalam SEO modern tahun 2026, struktur HTML yang benar sangat mempengaruhi performa website di Google.
Search engine membaca halaman website seperti robot yang memindai struktur dokumen.
Jika HTML tidak rapi, maka mesin pencari akan kesulitan memahami isi konten.
Karena itu developer modern selalu memperhatikan struktur HTML sebelum menambahkan CSS atau JavaScript.
Jika kamu ingin mempelajari styling HTML lebih dalam, kamu bisa membaca panduan lengkap apa itu CSS dalam pengembangan website.
Hubungan HTML, CSS, dan JavaScript
Dalam dunia pengembangan web modern, HTML hanyalah fondasi.
- HTML → Struktur halaman
- CSS → Tampilan visual
- JavaScript → Interaksi
Framework modern seperti React bahkan menggabungkan HTML dengan JavaScript.
Jika kamu tertarik dengan teknologi tersebut, kamu bisa membaca artikel berikut:
Namun sebelum belajar framework modern, kamu harus benar-benar memahami HTML terlebih dahulu.
Belajar HTML Secara Bertahap
Tutorial ini dirancang secara bertahap untuk pemula.
Jika kamu belum membaca bagian awal tutorial, kamu bisa mulai dari sini:
Dengan mengikuti seri ini sampai akhir, kamu akan mampu membuat halaman portfolio HTML sendiri.
FAQ Tutorial HTML untuk Pemula
Daftar 80 Tag HTML yang Wajib Diketahui Developer
Referensi lengkap untuk Authemers yang belajar HTML bersama Authemic Labs.
| No | Tag | Fungsi | Contoh |
|---|---|---|---|
| 1 | <html> | Elemen root dokumen HTML | <html>…</html> |
| 2 | <head> | Metadata halaman | <head>…</head> |
| 3 | <title> | Judul halaman | <title>Website Saya</title> |
| 4 | <meta> | Metadata SEO | <meta charset=”UTF-8″> |
| 5 | <link> | Menghubungkan file eksternal | <link rel=”stylesheet” href=”style.css”> |
| 6 | <style> | CSS internal | <style>body{}</style> |
| 7 | <script> | Menjalankan JavaScript | <script src=”app.js”></script> |
| 8 | <body> | Isi halaman | <body>Konten</body> |
| 9 | <h1> | Heading terbesar | <h1>Judul</h1> |
| 10 | <h2> | Heading level 2 | <h2>Sub Judul</h2> |
| 11 | <h3> | Heading level 3 | <h3>Judul</h3> |
| 12 | <h4> | Heading level 4 | <h4>Judul</h4> |
| 13 | <h5> | Heading level 5 | <h5>Judul</h5> |
| 14 | <h6> | Heading terkecil | <h6>Judul</h6> |
| 15 | <p> | Paragraf | <p>Ini paragraf</p> |
| 16 | <br> | Baris baru | Hello<br>World |
| 17 | <hr> | Garis horizontal | <hr> |
| 18 | <a> | Membuat hyperlink | <a href=””>Link</a> |
| 19 | <img> | Menampilkan gambar | <img src=”foto.jpg”> |
| 20 | <video> | Menampilkan video | <video src=”video.mp4″></video> |
| 21 | <audio> | Memutar audio | <audio controls></audio> |
| 22 | <div> | Container blok | <div>Konten</div> |
| 23 | <span> | Container inline | <span>Teks</span> |
| 24 | <header> | Bagian header | <header>Header</header> |
| 25 | <nav> | Navigasi menu | <nav>Menu</nav> |
| 26 | <main> | Konten utama | <main>Isi</main> |
| 27 | <section> | Bagian halaman | <section>Konten</section> |
| 28 | <article> | Artikel mandiri | <article>Berita</article> |
| 29 | <aside> | Sidebar | <aside>Sidebar</aside> |
| 30 | <footer> | Bagian footer | <footer>Copyright</footer> |
| 31 | <ul> | List tidak berurutan | <ul><li>Item</li></ul> |
| 32 | <ol> | List berurutan | <ol><li>Item</li></ol> |
| 33 | <li> | Item list | <li>Menu</li> |
| 34 | <table> | Membuat tabel | <table></table> |
| 35 | <tr> | Baris tabel | <tr></tr> |
| 36 | <td> | Kolom tabel | <td>Data</td> |
| 37 | <th> | Header tabel | <th>Judul</th> |
| 38 | <thead> | Header tabel | <thead></thead> |
| 39 | <tbody> | Isi tabel | <tbody></tbody> |
| 40 | <tfoot> | Footer tabel | <tfoot></tfoot> |
| 41 | <form> | Form input | <form></form> |
| 42 | <input> | Field input | <input type=”text”> |
| 43 | <textarea> | Area teks | <textarea></textarea> |
| 44 | <button> | Tombol | <button>Klik</button> |
| 45 | <select> | Dropdown | <select></select> |
| 46 | <option> | Pilihan dropdown | <option>1</option> |
| 47 | <label> | Label form | <label>Email</label> |
| 48 | <fieldset> | Grup form | <fieldset></fieldset> |
| 49 | <legend> | Judul fieldset | <legend>Data</legend> |
| 50 | <strong> | Teks penting | <strong>Penting</strong> |
| 51 | <b> | Teks bold | <b>Bold</b> |
| 52 | <em> | Penekanan | <em>Emphasis</em> |
| 53 | <i> | Italic | <i>Miring</i> |
| 54 | <u> | Underline | <u>Underline</u> |
| 55 | <mark> | Highlight | <mark>Highlight</mark> |
| 56 | <small> | Teks kecil | <small>Kecil</small> |
| 57 | <code> | Kode program | <code>console.log()</code> |
| 58 | <pre> | Teks preformat | <pre>Kode</pre> |
| 59 | <blockquote> | Kutipan panjang | <blockquote></blockquote> |
| 60 | <cite> | Sumber kutipan | <cite>Buku</cite> |
| 61 | <abbr> | Singkatan | <abbr title=”World Wide Web”>WWW</abbr> |
| 62 | <time> | Format waktu | <time datetime=”2026″>2026</time> |
| 63 | <progress> | Progress bar | <progress value=”50″> |
| 64 | <meter> | Meter nilai | <meter value=”70″> |
| 65 | <details> | Konten expandable | <details></details> |
| 66 | <summary> | Judul details | <summary>Info</summary> |
| 67 | <canvas> | Grafik JS | <canvas></canvas> |
| 68 | <svg> | Grafik vektor | <svg></svg> |
| 69 | <iframe> | Embed halaman | <iframe src=””></iframe> |
| 70 | <embed> | Embed konten | <embed src=””> |
| 71 | <object> | Embed objek | <object></object> |
| 72 | <param> | Parameter objek | <param name=””> |
| 73 | <noscript> | Konten jika JS mati | <noscript></noscript> |
| 74 | <template> | Template HTML | <template></template> |
| 75 | <slot> | Slot web component | <slot></slot> |
| 76 | <dialog> | Popup dialog | <dialog></dialog> |