Anak Males – Kali ini kita akan belajar elemen semantik yang ada di html. Karena sampai saat ini, kita telah mengenal beberapa tag dasar HTML, termasuk elemen paragraf, heading, daftar, tabel, tautan, gambar, dan form.
Tapi, bagaimana cara mengelola elemen-elemen ini agar terlihat bagus?
Jawabannya:
Kita membutuhkan sebuah tata letak. Untuk melakukan ini, HTML menyediakan beberapa elemen khusus yang disebut elemen semantik, seperti <header>, <aside>, <footer>, <article>, dan lainnya.
Sebenarnya, elemen semantik tidak hanya digunakan untuk membuat tata letak, tetapi juga untuk membuat elemen lainnya.
Seperti yang kita tau, HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk menstruktur dan menyajikan konten di sebuah website. HTML digunakan untuk memberi tanda atau label pada teks yang akan ditampilkan di website, sehingga browser dapat mengetahui bagaimana teks tersebut harus ditampilkan.
HTML dapat digunakan untuk menambahkan elemen seperti judul, paragraf, gambar, tabel, form, dan banyak lagi ke dalam sebuah halaman web.
Dengan menggunakan HTML, kita dapat memberi tanda pada teks yang akan ditampilkan sebagai judul, paragraf, atau elemen lainnya, sehingga browser tahu bagaimana menampilkan teks tersebut.
HTML sangat penting dalam pembuatan website karena ia menyediakan struktur dasar bagi sebuah halaman web. HTML juga memungkinkan kita untuk menambahkan elemen multimedia seperti video dan audio ke dalam website, serta menambahkan tautan ke halaman web lainnya atau ke sumber lain di internet.
Jadi, menggunakan HTML pada sebuah website sangat penting karena ia memungkinkan kita untuk menstruktur dan menyajikan konten di sebuah website dengan cara yang terstruktur dan mudah dipahami oleh browser.
Apa Itu Elemen Semantik di HTML ?
Elemen semantik HTML adalah elemen HTML yang memiliki arti atau makna tersendiri, sehingga dapat membantu pembuat dan pembaca situs web untuk lebih memahami struktur dan isi dari sebuah dokumen HTML.
Misalnya, elemen <header> menunjukkan bahwa bagian tersebut merupakan bagian header (judul atau kepala) dari dokumen, sementara elemen <footer> menunjukkan bahwa bagian tersebut merupakan bagian footer (kaki) dari dokumen.
Elemen semantik HTML juga bermanfaat bagi mesin pencari, karena mesin pencari dapat lebih mudah mengindeks dan menganalisis konten situs web jika elemen HTML yang digunakan memiliki arti yang jelas.
Elemen semantik HTML yang sering digunakan diantaranya adalah <header>, <footer>, <nav>, <article>, <section>, <aside>, <figure>, dan lain-lain.
Contoh penggunaan elemen semantik HTML dalam struktur dokumen adalah sebagai berikut:
<body>
<header>
<h1>Judul Dokumen</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Artikel Pertama</h2>
<p>Isi dari artikel pertama...</p>
</article>
<article>
<h2>Artikel Kedua</h2>
<p>Isi dari artikel kedua...</p>
</article>
</main>
<aside>
<h3>Sidebar</h3>
<p>Informasi tambahan di sisi dokumen...</p>
</aside>
<footer>
<p>Copyright 2022</p>
</footer>
</body>
Dalam contoh di atas, elemen <header> digunakan untuk menandai bagian header dokumen yang berisi judul dokumen dan navigasi, elemen <main> digunakan untuk menandai bagian utama dokumen yang berisi artikel-artikel, elemen <aside> digunakan untuk menandai bagian sidebar dokumen yang berisi informasi tambahan, dan elemen <footer> digunakan untuk menandai bagian footer dokumen yang berisi informasi copyright.
Dengan menggunakan elemen semantik HTML, struktur dokumen menjadi lebih jelas dan mudah dipahami oleh pembuat maupun pembaca situs web.
Selain itu, mesin pencari juga akan lebih mudah mengindeks dan menganalisis konten situs web, sehingga dapat meningkatkan SEO (Search Engine Optimization) dari situs tersebut.
SEO atau Search Engine Optimization adalah proses meningkatkan kualitas dan kuantitas traffic ke sebuah website dari hasil pencarian organik di mesin pencari, seperti Google. Ini bertujuan untuk meningkatkan visibilitas website di mesin pencari, sehingga website tersebut lebih mudah ditemukan oleh pengguna internet.
SEO dilakukan dengan memperbaiki dan mengoptimalkan elemen-elemen website agar lebih mudah dikenali oleh mesin pencari, sehingga website tersebut lebih mudah ditemukan dan muncul di hasil pencarian.
Selain elemen semantik HTML yang sudah disebutkan di atas, masih ada banyak elemen semantik HTML lainnya yang dapat Anda gunakan sesuai dengan kebutuhan.
Anda dapat menemukan daftar lengkap elemen semantik HTML di dokumentasi resmi W3C (World Wide Web Consortium) atau di sumber informasi lainnya yang terpercaya.
Penting untuk dicatat bahwa meskipun menggunakan HTML semantik dapat meningkatkan aksesibilitas dan kemampuan pencarian situs web, ini bukan keharusan dan dapat digunakan bersama dengan pendekatan lain seperti CSS (Cascading Style Sheets) dan JavaScript untuk mencapai gaya dan fungsionalitas yang diinginkan.
Berikut adalah beberapa elemen semantik HTML yang sering digunakan:
<header>: Elemen ini menandai bagian header (judul atau kepala) dari sebuah dokumen atau bagian.<footer>: Elemen ini menandai bagian footer (kaki) dari sebuah dokumen atau bagian.<nav>: Elemen ini menandai bagian navigasi atau link ke halaman lain dalam situs web.<article>: Elemen ini menandai bagian yang merupakan konten utama dari sebuah dokumen, seperti artikel atau posting blog.<section>: Elemen ini menandai bagian yang merupakan bagian dari konten utama dokumen yang terdiri dari beberapa subbagian dengan tema yang sama.<aside>: Elemen ini menandai bagian yang merupakan informasi tambahan yang terkait dengan konten utama dokumen.<figure>: Elemen ini menandai bagian yang berisi konten visual seperti gambar atau video, yang diikuti oleh deskripsi atau caption.<details>: Elemen ini menandai bagian yang berisi informasi yang dapat ditampilkan atau disembunyikan sesuai keinginan pengguna.<summary>: Elemen ini menandai bagian yang merupakan ringkasan dari informasi yang terdapat dalam elemen<details>.<mark>: Elemen ini menandai bagian teks yang ingin ditonjolkan atau diaccent.
Mengapa Kita Perlu Menggunakan Elemen Semantik ?
Ada beberapa alasan mengapa kita harus menggunakan elemen semantik HTML dalam pembuatan situs web:
- Memudahkan pembuat dan pembaca situs web: Dengan menggunakan elemen semantik HTML, struktur dokumen menjadi lebih jelas dan mudah dipahami oleh pembuat maupun pembaca situs web.
- Meningkatkan SEO: Mesin pencari akan lebih mudah mengindeks dan menganalisis konten situs web jika elemen HTML yang digunakan memiliki arti yang jelas. Hal ini dapat meningkatkan SEO (Search Engine Optimization) dari situs tersebut.
- Meningkatkan aksesibilitas: Elemen semantik HTML juga bermanfaat bagi pengguna dengan kebutuhan khusus, seperti pengguna dengan disabilitas visual atau pengguna yang mengakses situs web melalui perangkat yang tidak memiliki tampilan visual seperti perangkat braille atau pembaca layar.
- Memudahkan pemeliharaan: Menggunakan elemen semantik HTML juga dapat memudahkan proses pemeliharaan situs web, karena struktur dokumen yang jelas akan memudahkan dalam menambah atau mengedit konten situs web.
Cara Membuat Layout Elemen Semantik
Berikut adalah langkah-langkah untuk membuat layout elemen semantik HTML:
- Tentukan struktur dokumen yang diinginkan. Misalnya, jika Anda ingin membuat layout yang terdiri dari header, main content, dan footer, maka elemen yang harus digunakan adalah
<header>,<main>, dan<footer>. - Buat elemen HTML sesuai dengan struktur dokumen yang telah ditentukan. Misalnya:
<body>
<header>
<!-- Isi header -->
</header>
<main>
<!-- Isi main content -->
</main>
<footer>
<!-- Isi footer -->
</footer>
</body>
- Tambahkan konten ke dalam elemen HTML yang telah dibuat. Misalnya:
<body>
<header>
<h1>Judul Dokumen</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Artikel Pertama</h2>
<p>Isi dari artikel pertama...</p>
</article>
<article>
<h2>Artikel Kedua</h2>
<p>Isi dari artikel kedua...</p>
</article>
</main>
<footer>
<p>Copyright 2021</p>
</footer>
</body>
- Tambahkan styling dan fungsi tambahan dengan menggunakan CSS dan JavaScript sesuai kebutuhan.
Penutup
Baiklah mungkin untuk tutorial html kali ini kita cukupkan sampai disini dulu, sampai jumpa di tutorial html lainnya.