HTML Semantik: Mengapa header, nav, main, article, section, aside, dan footer Wajib Dipakai
Daftar Isi
Setelah memahami div, langkah penting berikutnya adalah memahami bahwa struktur halaman tidak seharusnya hanya menggambarkan bentuk visual. Elemen div adalah container generik: ia berguna ketika tidak ada elemen HTML yang lebih tepat, tetapi namanya sendiri tidak menjelaskan apakah isinya merupakan navigasi, artikel, konten utama, atau informasi tambahan. HTML semantik menyediakan elemen yang membawa makna struktural, termasuk header, nav, main, article, section, aside, dan footer. Kata “wajib” pada judul tutorial ini perlu dipahami sebagai praktik yang sangat dianjurkan ketika semantik elemen memang sesuai, bukan berarti spesifikasi HTML mengharuskan ketujuh elemen tersebut muncul pada setiap dokumen. Halaman sederhana mungkin tidak membutuhkan aside, misalnya. Prinsip yang benar adalah memilih elemen berdasarkan arti kontennya, bukan berdasarkan gaya bawaan browser atau bentuk kotak yang ingin dibuat. Dengan pendekatan tersebut, source HTML menjadi lebih mudah dibaca pengembang, memberikan struktur yang lebih informatif kepada perangkat lunak yang memproses dokumen, dan menyediakan fondasi yang lebih baik untuk aksesibilitas.
Tutorial ini menggunakan satu contoh konsisten berupa halaman majalah teknologi bernama “Tekno Harian”. Anda hanya memerlukan editor teks dan browser modern; tidak ada framework, package manager, JavaScript, server, atau dependency eksternal. File index.html dapat dibuka langsung melalui browser. Kita akan mengubah pola berpikir dari “semua bagian adalah div” menjadi “pilih elemen berdasarkan peran konten”, lalu memeriksa heading dan struktur melalui source serta DevTools browser. Penting pula memahami batas klaim semantik: elemen HTML tidak otomatis membuat desain terlihat berbeda secara signifikan dan penggunaan elemen semantik saja tidak menjamin sebuah situs aksesibel. Teks tautan, heading, keyboard interaction, formulir, kontras, alternatif gambar, dan banyak aspek lain tetap harus dirancang dengan benar. Semantik adalah lapisan struktur yang kuat, bukan pengganti seluruh pekerjaan aksesibilitas. Contoh akhir juga sengaja tidak diberi CSS layout agar perbedaan antara makna dokumen dan presentasi visual terlihat jelas: CSS bertugas mengatur presentasi, sedangkan HTML memilih struktur dan makna yang sesuai.
Landasan Sains dan Prinsip Kerja Metode
HTML diproses browser menjadi DOM, yaitu representasi berbentuk tree dari elemen-elemen dokumen. Dari sudut pandang DOM, div dan elemen semantik sama-sama merupakan elemen yang dapat memiliki child, atribut, class, serta aturan CSS. Perbedaannya terdapat pada arti yang didefinisikan HTML. nav, misalnya, ditujukan untuk sebuah bagian halaman yang berisi tautan navigasi utama atau kumpulan navigasi yang penting; tidak setiap kelompok link harus dibungkus nav. main merepresentasikan konten dominan dari body dokumen. Dalam dokumen biasa, sebaiknya hanya ada satu main yang terlihat sebagai konten utama; spesifikasi memungkinkan keadaan tertentu yang melibatkan elemen main tersembunyi, sehingga aturan “HTML tidak boleh pernah berisi lebih dari satu main” terlalu sederhana. header mewakili materi pengantar atau bantuan navigasi untuk konteks terdekatnya, sementara footer biasanya berisi informasi tentang section atau halaman tersebut. Artinya, header dan footer tidak terbatas pada bagian paling atas dan paling bawah halaman: keduanya dapat muncul di dalam article jika secara semantik memang merupakan pembuka dan penutup artikel itu.
Dua elemen yang sering tertukar adalah article dan section. article cocok untuk komposisi yang relatif mandiri atau dapat digunakan kembali secara independen dalam konteks dokumen, misalnya artikel berita, posting forum, atau entri blog. section merepresentasikan bagian generik yang bertema ketika tidak ada elemen yang lebih spesifik. Dalam praktik penulisan dokumen, sebuah section umumnya memiliki heading yang mengidentifikasi temanya. Karena itu, mengganti setiap div dengan section bukan perbaikan semantik. Jika container hanya diperlukan untuk grid, flexbox, hook JavaScript, atau dekorasi dan tidak membawa arti struktural, div tetap pilihan yang benar. aside berbeda lagi: kontennya hanya berkaitan secara tidak langsung dengan konten di sekitarnya. Contohnya dapat berupa biografi singkat penulis, daftar bacaan terkait, atau sidebar pendukung. Pemilihan elemen ini tidak bergantung pada posisinya di layar. Sebuah aside boleh tampil di kanan, kiri, bawah, atau bahkan di antara bagian visual lain setelah CSS diterapkan.
Manfaat praktis semantik datang dari pemisahan yang lebih jelas antara makna dan presentasi serta dari semantik bawaan yang dapat dimanfaatkan platform aksesibilitas. Beberapa elemen dapat berkontribusi pada landmark yang digunakan teknologi bantu; misalnya main berkaitan dengan landmark konten utama dan nav dengan navigasi. Namun pemetaan accessibility tree bergantung pada elemen, konteks, nama yang tersedia, browser, dan teknologi bantu, sehingga jangan menghafal slogan bahwa setiap elemen semantik selalu menjadi landmark dengan perilaku identik. Heading juga tetap sangat penting. section tidak menggantikan h2, dan browser modern tidak seharusnya dijadikan alasan untuk mengandalkan sectioning otomatis guna menentukan level heading. Gunakan h1 untuk judul utama dokumen dan level berikutnya secara logis sesuai hierarki konten. Keuntungan bagi pengembang pun langsung terasa: saat membaca <main> atau <article>, tujuan struktur lebih mudah dikenali daripada deretan <div class="...">. Semantik yang baik dengan demikian merupakan keputusan pemodelan konten sebelum menjadi keputusan styling.
Formula, Komposisi Bahan, atau Spesifikasi Parameter
Tidak ada “rasio” matematis untuk HTML semantik. Parameter yang relevan adalah konteks penggunaan setiap elemen dan batas penggunaannya. Tabel berikut berfungsi sebagai peta keputusan sebelum menulis contoh. Sepuluh komponen mencakup tujuh elemen utama pada judul beserta div, heading, dan body sebagai pembanding. Spesifikasi di kolom tengah adalah aturan praktis, bukan kuota elemen per halaman.
| Komponen | Spesifikasi/Rasio | Fungsi Teknis |
|---|---|---|
header | Boleh muncul pada halaman atau konteks sectioning yang sesuai | Mewakili materi pengantar atau bantuan navigasi |
nav | Gunakan untuk kelompok tautan navigasi utama atau penting | Memberi makna navigasi pada bagian dokumen |
main | Konten dominan dokumen; umumnya satu yang terlihat | Mengidentifikasi konten utama halaman |
article | Gunakan untuk komposisi yang relatif mandiri | Mengelompokkan artikel, post, atau konten independen |
section | Bagian bertema; umumnya memiliki heading | Membagi konten menjadi kelompok tematik |
aside | Hubungan tidak langsung dengan konten sekitar | Menandai konten tangensial atau pelengkap |
footer | Boleh menjadi penutup halaman atau section yang relevan | Mewakili informasi penutup tentang konteksnya |
div | Pakai jika tidak ada elemen semantik yang sesuai | Container generik untuk grouping atau kebutuhan presentasi |
| Heading | Gunakan h1–h6 menurut hierarki isi | Memberi judul dan struktur hierarkis yang eksplisit |
body | Satu pada dokumen HTML | Menampung konten dokumen yang ditampilkan |
div menjadi section. Elemen semantik dipilih berdasarkan arti konten. div tetap benar untuk wrapper generik yang hanya dibutuhkan oleh CSS atau pengelompokan tanpa makna khusus. Demikian pula, jangan memilih header, aside, atau footer hanya berdasarkan posisi visualnya.Panduan Langkah Kerja Bertahap
Kenali Kelemahan Layout yang Hanya Menggunakan div
Mulailah dengan mengenali masalah, bukan langsung mengganti tag. Contoh berikut adalah dokumen mandiri yang valid secara struktur dasar dan sengaja memakai div untuk hampir semua kelompok konten. Simpan sebagai index.html. Karena ini HTML statis, tidak ada proses build: buka file melalui File Explorer/Finder atau gunakan menu Open File pada browser. Class seperti site-header memberi petunjuk kepada manusia, tetapi elemen HTML-nya sendiri masih generik. Perhatikan juga bahwa heading sudah dipakai agar kita dapat memisahkan persoalan heading dari persoalan container semantik.
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Tekno Harian</title>
</head>
<body>
<div class="site-header">
<h1>Tekno Harian</h1>
<div class="menu">
<a href="/">Beranda</a>
<a href="/artikel">Artikel</a>
</div>
</div>
<div class="content">
<div class="post">
<h2>Memahami Web Semantik</h2>
<div class="topic">
<h3>Mengapa struktur penting?</h3>
<p>Struktur membantu menjelaskan hubungan antarbagian konten.</p>
</div>
</div>
<div class="related">
<h2>Bacaan terkait</h2>
<a href="/aksesibilitas">Dasar aksesibilitas web</a>
</div>
</div>
<div class="site-footer">
<p>Hak cipta 2026 Tekno Harian.</p>
</div>
</body>
</html>Hasil yang diharapkan adalah halaman teks sederhana dengan judul situs, menu, artikel, bacaan terkait, dan informasi hak cipta. Verifikasi menggunakan DevTools: buka panel Elements/Inspector dan lihat bahwa kelompok utama ditampilkan sebagai div. Jangan menilai keberhasilan berdasarkan tampilan karena kita belum menggunakan CSS dan perubahan semantik memang bukan mekanisme styling. Tujuan langkah ini adalah memperoleh baseline yang dapat dibandingkan. Source tersebut juga memperlihatkan bahwa nama class dapat menjelaskan maksud kepada pengembang, tetapi nama class buatan sendiri tidak mengubah sebuah div menjadi elemen nav atau main dalam semantik native HTML.
Bentuk Kerangka Halaman dengan header, nav, main, dan footer
Sekarang ubah empat peran yang paling jelas. Bagian identitas situs menjadi header, kelompok navigasi penting menjadi nav, konten dominan menjadi main, dan penutup halaman menjadi footer. Pada tahap ini kita sengaja mempertahankan beberapa div di dalam main agar refactor berlangsung berdasarkan arti, bukan sekadar pencarian dan penggantian tag. Timpa isi index.html dengan versi berikut.
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Tekno Harian</title>
</head>
<body>
<header>
<h1>Tekno Harian</h1>
<nav aria-label="Navigasi utama">
<a href="/">Beranda</a>
<a href="/artikel">Artikel</a>
</nav>
</header>
<main>
<div class="post">
<h2>Memahami Web Semantik</h2>
<div class="topic">
<h3>Mengapa struktur penting?</h3>
<p>Struktur membantu menjelaskan hubungan antarbagian konten.</p>
</div>
</div>
<div class="related">
<h2>Bacaan terkait</h2>
<a href="/aksesibilitas">Dasar aksesibilitas web</a>
</div>
</main>
<footer>
<p>Hak cipta 2026 Tekno Harian.</p>
</footer>
</body>
</html>Atribut aria-label="Navigasi utama" memberi nama pada navigasi. Nama tersebut terutama berguna ketika ada lebih dari satu area navigasi yang perlu dibedakan; kita memakainya sejak awal agar maksud contoh eksplisit. Buka ulang atau refresh file, lalu inspeksi DOM. Hasil visual dapat terlihat hampir sama dengan langkah pertama, tetapi panel Elements harus menunjukkan elemen header, nav, main, dan footer secara nyata. Verifikasi tambahan dapat dilakukan melalui accessibility inspector yang tersedia pada DevTools browser Anda, bila tersedia: periksa bagaimana struktur navigasi dan main diekspos. Nama panel serta detail accessibility tree berbeda antarbrowser, jadi DOM adalah pemeriksaan paling universal pada tahap ini.
Modelkan Konten Mandiri sebagai article
Konten “Memahami Web Semantik” merupakan artikel utama dan masuk akal sebagai komposisi mandiri. Karena itu, ubah wrapper div class="post" menjadi article. Kita juga menambahkan header lokal di dalam artikel. Hal ini menunjukkan konsep penting: header tidak berarti “kotak yang harus berada sekali di atas halaman”. Header artikel adalah materi pengantar artikel tersebut dan merupakan konteks berbeda dari header situs. Gunakan perubahan berikut di dalam main; bagian lain file tetap seperti langkah 2.
<main>
<article>
<header>
<h2>Memahami Web Semantik</h2>
<p>Panduan struktur HTML untuk pembaca pemula.</p>
</header>
<div class="topic">
<h3>Mengapa struktur penting?</h3>
<p>Struktur membantu menjelaskan hubungan antarbagian konten.</p>
</div>
</article>
<div class="related">
<h2>Bacaan terkait</h2>
<a href="/aksesibilitas">Dasar aksesibilitas web</a>
</div>
</main>Snippet ini bukan file mandiri; ia menggantikan elemen main pada index.html langkah sebelumnya. Tidak diperlukan class post untuk menyatakan bahwa node ini sebuah artikel karena elemennya sendiri sudah membawa makna tersebut. Class tetap boleh ditambahkan kemudian untuk styling, misalnya class="post", tanpa mengurangi semantik. Setelah menyimpan, refresh browser dan verifikasi di Elements bahwa article menjadi child dari main serta memiliki header sendiri. Tampilan tidak harus berubah. Jika hanya tampilan visual yang diperiksa, manfaat refactor ini mudah terlewat; source dan DOM adalah objek verifikasi yang tepat. Pertanyaan keputusan yang dapat dipakai ke depan adalah: apakah bagian ini merupakan komposisi yang masuk akal sebagai unit mandiri? Jika jawabannya tidak, jangan memaksakan article hanya karena Anda membutuhkan wrapper.
Bagi Artikel Menjadi section Bertema
Wrapper div class="topic" sebenarnya mewakili satu bagian bertema di dalam artikel dan sudah memiliki heading. Di sinilah section tepat digunakan. Agar contoh lebih realistis, kita membuat dua bagian bertema. Level heading tetap eksplisit: judul artikel memakai h2, sedangkan bagian di dalamnya memakai h3. Jangan bergantung pada nesting section untuk “mengubah” level heading secara implisit. Ganti isi article dengan snippet berikut.
<article>
<header>
<h2>Memahami Web Semantik</h2>
<p>Panduan struktur HTML untuk pembaca pemula.</p>
</header>
<section>
<h3>Mengapa struktur penting?</h3>
<p>Struktur membantu menjelaskan hubungan antarbagian konten.</p>
</section>
<section>
<h3>Semantik dan presentasi</h3>
<p>HTML menyatakan struktur, sedangkan CSS menangani presentasi.</p>
</section>
</article>Hasil yang diharapkan adalah artikel dengan dua subbagian yang masing-masing dapat dikenali melalui heading. Verifikasi di Elements bahwa kedua section berada di dalam article, lalu baca urutan heading: h1 untuk nama/judul utama halaman, h2 untuk artikel, dan h3 untuk subbagian artikel. Hierarki contoh ini sengaja sederhana. Jangan menambahkan section di sekitar setiap paragraf karena paragraf biasa bukan otomatis sebuah section bertema. Sebaliknya, jika Anda hanya membutuhkan wrapper untuk dua elemen agar mudah diatur dengan Flexbox, div mungkin tetap lebih tepat. Dengan pemeriksaan tersebut, Anda memverifikasi semantik dari dua arah: tipe container mencerminkan tema bagian, sedangkan heading memberi judul eksplisit yang menjelaskan tema itu kepada pembaca.
Pisahkan Informasi Pendukung dengan aside
Daftar “Bacaan terkait” berhubungan dengan topik utama, tetapi bukan bagian inti dari artikel yang sedang dibaca. Ini merupakan kasus yang masuk akal untuk aside. Posisi visual bukan kriterianya: meskipun browser menampilkannya di bawah artikel karena belum ada CSS, semantiknya tetap konten pelengkap. Ganti div class="related" yang berada setelah artikel dengan kode berikut. Kita juga memberi heading agar tujuan area tersebut jelas.
<aside>
<h2>Bacaan terkait</h2>
<ul>
<li><a href="/aksesibilitas">Dasar aksesibilitas web</a></li>
<li><a href="/heading">Menyusun hierarki heading</a></li>
</ul>
</aside>Karena file dibuka langsung dari filesystem, tautan absolut-path seperti /aksesibilitas dan /heading dalam demo tidak diharapkan membuka halaman nyata; keduanya hanya konten contoh dan tidak diperlukan untuk memverifikasi struktur. Jika proyek nyata memiliki route tersebut, serverlah yang menentukan hasil navigasinya. Setelah menyimpan file, refresh dan periksa bahwa aside berada sebagai sibling article di dalam main. Hasil yang diharapkan masih berupa daftar bacaan terkait, tetapi markup sekarang menjelaskan bahwa daftar itu bersifat pendukung terhadap konten utama. Bila sebuah informasi justru merupakan bagian esensial dari alur artikel—misalnya langkah yang harus dilakukan agar tutorial bekerja—jangan memindahkannya ke aside semata-mata karena desainer ingin menampilkannya dalam kotak di samping. CSS dapat menempatkan elemen secara visual tanpa mengubah keputusan semantik.
Rakit dan Audit Dokumen Semantik Lengkap
Terakhir, satukan seluruh keputusan ke file lengkap yang dapat dibuka langsung. Versi ini memiliki header situs dan navigasi, satu konten utama, artikel dengan header lokal dan dua section, aside pendukung, serta footer halaman. Tidak ada stylesheet atau JavaScript karena tujuan latihan adalah struktur. Salin seluruh kode berikut ke index.html, menggantikan isi sebelumnya. Menggunakan dokumen lengkap pada langkah terakhir juga menghindari keraguan mengenai letak snippet dari langkah-langkah sebelumnya.
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Tekno Harian</title>
</head>
<body>
<header>
<h1>Tekno Harian</h1>
<nav aria-label="Navigasi utama">
<a href="/">Beranda</a>
<a href="/artikel">Artikel</a>
</nav>
</header>
<main>
<article>
<header>
<h2>Memahami Web Semantik</h2>
<p>Panduan struktur HTML untuk pembaca pemula.</p>
</header>
<section>
<h3>Mengapa struktur penting?</h3>
<p>Struktur membantu menjelaskan hubungan antarbagian konten.</p>
</section>
<section>
<h3>Semantik dan presentasi</h3>
<p>HTML menyatakan struktur, sedangkan CSS menangani presentasi.</p>
</section>
</article>
<aside>
<h2>Bacaan terkait</h2>
<ul>
<li><a href="/aksesibilitas">Dasar aksesibilitas web</a></li>
<li><a href="/heading">Menyusun hierarki heading</a></li>
</ul>
</aside>
</main>
<footer>
<p>Hak cipta 2026 Tekno Harian.</p>
</footer>
</body>
</html>Buka atau refresh index.html. Expected result adalah seluruh konten tetap dapat dibaca tanpa CSS, dengan urutan logis dari judul situs sampai footer. Verifikasi source di DevTools: harus ada satu main yang terlihat, nav di header situs, article dan aside sebagai child dari main, dua section dalam artikel, serta footer halaman. Periksa juga heading secara berurutan. Jika browser menyediakan accessibility tree, gunakan sebagai pemeriksaan tambahan untuk melihat semantik yang diekspos browser, tetapi jangan menyimpulkan kualitas aksesibilitas hanya dari jumlah landmark. Audit yang lebih matang harus mempertimbangkan isi, nama elemen, urutan fokus, teks link, serta interaksi lain yang ada pada proyek sebenarnya.
Verifikasi Akhir dan Parameter Kelayakan
Refactor semantik dinilai dari ketepatan struktur, bukan dari perubahan tampilan. Lima parameter berikut dapat diperiksa langsung melalui source dan DevTools. Kolom “sebelum” mengacu pada baseline langkah pertama, sedangkan target mengacu pada dokumen lengkap langkah keenam. Target sengaja tidak mengatakan “semua div hilang”, sebab tujuan HTML semantik bukan menghapus div, melainkan menghindari container generik ketika elemen dengan makna yang sesuai tersedia.
| Parameter | Sebelum Menerapkan Metode | Sesudah Menerapkan Metode (Target) |
|---|---|---|
| Konten utama | div class="content" | Satu main terlihat untuk konten dominan |
| Navigasi utama | div class="menu" | nav dengan tujuan navigasi yang jelas |
| Konten mandiri | div class="post" | Artikel utama menggunakan article |
| Bagian bertema | div class="topic" | Dua section memiliki heading h3 |
| Konten pendukung dan penutup | Wrapper generik | aside untuk bacaan terkait dan footer untuk penutup halaman |
Solusi Masalah di Lapangan (FAQ Teknis)
1. Mengapa tampilan hampir tidak berubah setelah div diganti dengan elemen semantik?
Karena tujuan utama elemen semantik bukan mendesain layout. Browser memiliki user-agent stylesheet, tetapi header, nav, main, article, section, aside, dan footer pada dasarnya dipilih untuk struktur dan makna. Layout dua kolom, warna, spacing, atau posisi sticky tetap merupakan pekerjaan CSS. Jadi tampilan yang hampir sama bukan gejala kegagalan. Verifikasi perubahan melalui panel Elements dan lihat nama elemen pada DOM. Setelah struktur benar, tambahkan CSS berdasarkan kebutuhan desain. Jangan kembali menggunakan div hanya karena Anda mengharapkan elemen semantik otomatis menghasilkan desain tertentu.
2. Apakah semua div sebaiknya diganti menjadi section?
Tidak. Ini salah satu refactor yang paling umum tetapi justru mengurangi ketepatan makna. section adalah bagian generik bertema dari dokumen dan umumnya diberi heading. div tetap merupakan pilihan yang sah untuk grouping generik ketika tidak ada elemen semantik yang cocok, termasuk wrapper yang semata-mata dibutuhkan oleh grid, Flexbox, styling, atau kebutuhan scripting. Periksa tiap container dengan bertanya apa arti kelompok tersebut bagi struktur konten. Jika jawabannya hanya “saya perlu kotak untuk CSS”, pertahankan div. Jika jawabannya “ini satu bagian bertema dengan judul”, pertimbangkan section. Verifikasi dengan membaca source tanpa CSS: nama elemen seharusnya tetap masuk akal berdasarkan isi, bukan posisi visual.
3. Bolehkah satu halaman memiliki lebih dari satu header atau footer?
Boleh ketika masing-masing digunakan pada konteks yang sesuai. Contoh tutorial memiliki header situs dan header di dalam article. Header pertama memperkenalkan situs dan menyediakan navigasi, sedangkan header kedua memperkenalkan artikel. footer juga dapat digunakan sebagai penutup sebuah sectioning context ketika isinya merupakan informasi tentang konteks tersebut; ia tidak semata-mata berarti area paling bawah viewport. Penyebab kebingungan biasanya berasal dari kebiasaan memperlakukan nama elemen seperti posisi layout. Verifikasinya adalah melihat parent dan tujuan isinya. Jika header lokal benar-benar berisi materi pengantar untuk artikel yang menaunginya, penggunaan tersebut memiliki dasar semantik, terlepas dari bagaimana CSS memposisikannya.
4. Apakah penggunaan HTML semantik otomatis membuat website aksesibel dan bagus untuk SEO?
Tidak otomatis. Semantik native memberi informasi struktural yang dapat dimanfaatkan browser dan teknologi bantu, sehingga merupakan fondasi penting. Namun aksesibilitas juga memerlukan hal lain seperti struktur heading yang masuk akal, label form, teks alternatif yang sesuai, interaksi keyboard, fokus yang dapat dipahami, dan kontras visual. Demikian pula, tidak tepat menjanjikan peringkat mesin pencari tertentu hanya karena mengganti div dengan elemen semantik. Mesin pencari mempertimbangkan banyak sinyal dan implementasinya dapat berubah. Verifikasi kualitas struktur menggunakan DOM dan accessibility tools, kemudian lakukan pengujian aksesibilitas yang relevan dengan fitur situs. Perlakukan semantik sebagai pemodelan konten yang benar, bukan trik untuk memperoleh hasil eksternal yang dijamin.
Kesimpulan dan Rencana Aksi
HTML semantik mengubah cara menyusun halaman dari sekadar kumpulan kotak menjadi dokumen yang bagian-bagiannya memiliki peran. Gunakan header untuk materi pengantar pada konteks yang tepat, nav untuk navigasi penting, main untuk konten dominan, article untuk komposisi mandiri, section untuk bagian bertema, aside untuk konten yang berhubungan secara tidak langsung, dan footer untuk informasi penutup konteksnya. Jangan memaksakan ketujuh elemen ke setiap halaman dan jangan menganggap div sebagai elemen yang harus dihapus; ia tetap tepat saat tidak ada semantik khusus yang perlu dinyatakan. Sebagai rencana aksi, ambil satu halaman HTML yang sudah Anda buat, tandai dahulu peran setiap kelompok konten, lalu refactor hanya container yang memiliki padanan semantik yang tepat. Sesudahnya, audit hierarchy heading dan inspeksi DOM melalui DevTools. Baru setelah struktur masuk akal tanpa bergantung pada presentasi, kerjakan CSS layout. Kebiasaan memutuskan arti sebelum tampilan akan membuat markup lebih mudah dipelihara dan memberi browser serta teknologi bantu informasi yang lebih kaya daripada struktur yang seluruhnya generik.
Ditulis dan diedit oleh Ahmad Ismail Al Malik