Apa Itu Semantic HTML dan Mengapa Penting?
Semantic HTML adalah pendekatan penulisan HTML yang
menggunakan elemen bermakna seperti
<header>, <main>,
<article>, dan <section>
untuk menjelaskan peran dan struktur konten secara eksplisit.
Bagi mesin pencari, struktur ini membantu memahami
topik utama halaman, hubungan antar konten,
serta prioritas informasi. Bagi pengguna dan teknologi bantu,
semantic HTML meningkatkan navigasi dan aksesibilitas.
Masalah Umum yang Sering Terjadi
- Heading tidak berurutan (H1 langsung ke H3/H4)
- Penggunaan
<div> berlebihan tanpa makna
- Konten utama tidak berada di dalam
<main>
- Article dan section digunakan secara keliru
Semantix hadir untuk memvisualisasikan struktur tersebut
agar kesalahan dapat dideteksi dan diperbaiki dengan cepat.
Standar & Kredibilitas Semantix
Semantix dikembangkan dengan mengacu pada standar dan dokumentasi resmi:
- HTML Living Standard (WHATWG)
- Google Search Central Documentation
- WCAG & Accessibility Tree Model
Tool ini bersifat read-only dan tidak memodifikasi konten
website yang dianalisis. Seluruh proses digunakan murni untuk audit struktur.
Support Tag Semantic HTML
<header>
Mewakili konten pengantar atau serangkaian tautan navigasi di bagian atas dokumen atau bagian.
<nav>
Mendefinisikan bagian tautan navigasi, biasanya untuk blok navigasi utama dalam sebuah situs web.
<main>
Menentukan konten utama dokumen. Ini harus unik untuk setiap halaman dan tidak bersarang di dalam elemen semantik utama lainnya seperti <header> atau <footer>.
<article>
Mengelilingi konten independen dan mandiri, seperti postingan blog, berita, atau komentar yang tetap masuk akal meskipun dipisahkan dari konteks halaman.
<section>
Mengelompokkan konten terkait ke dalam bagian tematik, biasanya ditandai dengan adanya judul (heading).
<aside>
Berisi konten yang terkait secara tidak langsung dengan konten di sekitarnya, seperti sidebar, iklan, atau kutipan tambahan.
<figure> dan <figcaption>
Digunakan untuk mengelompokkan konten media (seperti gambar atau diagram) dengan keterangannya agar memiliki hubungan semantik yang jelas.
<footer>
Mendefinisikan footer untuk dokumen atau bagian, seringkali berisi informasi hak cipta, detail kontak, dan tautan terkait di bagian bawah.