Semantic HTML adalah HTML yang mengenalkan makna kepada web daripada hanya sekedar menampilkan UInya saja.
Sebagai contoh misal menggunakan tag <p></p> yang berarti mengindikasikan teks paragraf, dari situ kita dan browser tahu bahwa tag tersebut akan menampilkan paragraf dan browser tahu bagaimana menampilkannya.
Contoh tag yang tidak semantic seperti tag <b></b> dan tag <i></i>. Kedua tag tersebut hanya akan membuat teks tebal dan miring, tanpa mengetahui apa maksud penggunaan tag tersebut. Tag yang hanya mendefinisikan bagaimana text tampil di browser.
Contoh tag-tag di HTML yang semantic yaitu :
- Tag Header (h1-h6)
- Tag kutipan blok (blockquote)
- tag kode (code)
- tag penekanan teks (em)
Mengapa perlu peduli dengan semantic?
Manfaat dari menulis tag HTML menggunakan semantic yaitu sebenarnya hanya agar mudah dalam hal komunikasi. Dengan tag semantic yang ditambahkan ke dalam dokumen web, maka akan memberikan informasi ke dalam dokumen tersebut. Tag semantic memperjelas makna dan konten dari sebuah halaman kepada browser.
Misal jika kita menggunakan tag <code></code>, browser akan mengenali dan mengerti bahwa isi konten di dalam tag tersebut adalah contoh kode yang akan ditampilkan sebagai teks.
Juga manfaat dari menulis semantic yaitu agar dapat menggunakan tag sesuai dengan fungsinya.
Daripada sebatas menampilkan konten dengan suatu tag agar menghasilkan tampilan UI yang sesuai dengan apa yang difungsikan, lebih baik juga menggunakannya sesuai dengan fungsinya, misal :
- Menggunakan tag li di dalam ul/ol untuk membuat list
- Tag blockquote bukan untuk menjorokkan suatu teks. Blockquote digunakan untuk membuat blok kutipan yang biasanya menjelaskan suatu hal dan berasal dari sumber lain. Jadi jika perlunya hanya sebatas untuk menjorokkan teks, lebih baik menggunakan margin style di css.
- Menggunakan block element di atas inline element. Misal, jangan gunakan
<a><p></p></a>tapi<p><a></a></p>. Karena tag<p>merupakan block element dan tag<a>termasuk inline element.
Block element adalah elemen dalam HTML yang biasanya diawali dengan membuat baris baru dan memiliki lebar yang melingkupi elemennya. Misal tag div, p, table, h1-6, form, ul, li, section, video, hr, main, nav dsb.
Inline element adalah elemen di HTML yang tidak membutuhkan baris baru dan hanya menggunakan lebar/width seperlunya sesuai dengan konten. Contoh tagnya yaitu a, br, button, code, em, i, img, input, label, select, small, span, dsb.
- Hanya gunakan tag h1-6 untuk heading, jangan gunakan teks yang dimodifikasi css stylenya dan juga jangan gunakan h1-6 jika bukan untuk heading.
Tag h1-6 digunakan untuk heading dan ini sangat penting di dalam sebuah web karena heading menunjukkan suatu topik di dalam web. tag ini digunakan agar font terlihat lebih besar dan tebal sehingga cepat dilihat sebagai topik.
Jika bukan untuk heading maka gunakan css style untuk mengubah ukuran font. Kita bisa membuat tampilan yang sama namun dengan tag yang berbeda, seperti
<h1>Ini heading dan tulisannya besar</h1>
<span
style="display: block;
font-size: 2em;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;"
>
Ini bukan heading dan tulisannya besar
</span>Terima kasih untuk diri saya yang sudah mau menulis catatan ini untuk saya sendiri.