Elemen Semantic HTML


Elemen semantic bermanfaat untuk mendeskripsikan sebuah web bagi browser dan pengembang.

Contoh elemen non-semantic: <div> dan <span>, tidak menjelaskan apa pun tentang isinya.

Contoh elemen semantic: <form>, <table>, dan <article>, jelas mendefinisikan isinya.


Elemen Semantic dalam HTML

Banyak situs web berisi kode HTML seperti: <div id="nav"> <div class="header"> <div id="footer"> untuk menunjukkan navigasi, header, dan footer.

Dalam HTML ada beberapa elemen semantic yang dapat digunakan untuk menentukan bagian yang berbeda dari sebuah halaman web: 

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

Elemen <section> HTML

Elemen <section> mendefinisikan bagian dalam sebuah dokumen.

Menurut dokumentasi HTML W3C: "Bagian adalah pengelompokan konten tematik, biasanya dengan judul."

Halaman web biasanya dapat dibagi menjadi beberapa bagian untuk pengenalan, konten, dan informasi kontak.


Contoh

Dua bagian dalam dokumen:

<section>
<h1>WWF</h1>
<p>World Wide Fund for Nature (WWF) adalah sebuah organisasi internasional yang 
bekerja pada isu-isu mengenai konservasi, penelitian dan pemulihan lingkungan, 
sebelumnya bernama World Wildlife Fund. WWF didirikan pada tahun 1961.</p>
</section>

<section>
<h1>Simbol Panda WWF</h1>
<p>Panda telah menjadi simbol WWF. Logo panda terkenal WWF berasal dari seekor 
panda bernama Chi Chi yang dipindahkan dari Kebun Binatang Beijing ke Kebun Binatang 
London pada tahun yang sama dengan berdirinya WWF.</p>
</section>

Elemen <artikel> HTML

Elemen <article> menetapkan independen, konten mandiri.

Sebuah artikel harus masuk akal dengan sendirinya, dan harus mungkin untuk didistribusikan secara independen dari situs web lainnya.

Contoh di mana suatu elemen <article> dapat digunakan:

  • Posting forum
  • Posting blog
  • Artikel koran

Contoh

Tiga artikel dengan konten mandiri dan mandiri:

<article>
<h2>Google Chrome</h2>
<p>Google Chrome adalah browser web yang dikembangkan oleh Google, dirilis pada 
tahun 2008. Chrome adalah browser web terpopuler di dunia saat ini!</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox adalah browser web sumber terbuka yang dikembangkan oleh Mozilla. 
Firefox telah menjadi browser web terpopuler kedua sejak Januari 2018.</p>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge adalah browser web yang dikembangkan oleh Microsoft, dirilis pada 
tahun 2015. Microsoft Edge menggantikan Internet Explorer.</p>
</article>

Elemen Bersarang <artikel> di <section> atau sebaliknya?

Elemen <article> menetapkan independen, konten mandiri.

Elemen <section> mendefinisikan bagian dalam sebuah dokumen.

Bisakah kita menggunakan definisi untuk memutuskan bagaimana menyusun elemen-elemen itu? Tidak, kita tidak bisa!

Jadi, Anda akan menemukan halaman HTML dengan elemen <section> yang mengandung elemen <article>, dan elemen <article> yang mengandung elemen <section>.


Elemen <header> HTML

Elemen <header> merupakan wadah untuk konten pengantar atau satu set link navigasi.

Sebuah elemen <header> biasanya berisi:

  • Satu atau lebih elemen heading (<h1> - <h6>)
  • Logo atau ikon
  • Informasi kepenulisan

Catatan: Anda dapat memiliki beberapa elemen <header> dalam satu dokumen HTML. Namun, <header> tidak dapat ditempatkan di dalam <footer>, <address> atau elemen <header> lain .


Contoh

Sebuah header untuk <article>: 

<article>
  <header>
    <h1>Apa yang Dilakukan WWF?</h1>
    <p>Misi WWF:</p>
  </header>
  <p>Misi WWF adalah menghentikan degradasi lingkungan alam planet kita, dan 
  membangun masa depan di mana manusia hidup selaras dengan alam.</p>
</article>

Elemen <footer> HTML

Elemen <footer> mendefinisikan footer untuk dokumen atau bagian.

Sebuah elemen <footer> biasanya berisi:

  • Informasi kepenulisan
  • Informasi hak cipta
  • Kontak informasi
  • Peta situs (Sitemap)
  • Link kembali ke atas
  • Dokumen terkait

Anda dapat memiliki beberapa elemen <footer> dalam satu dokumen.

Contoh

Bagian footer di dokumen:

<footer>
  <p>Penulis: Ibnu Katsir</p>
  <p><a href="mailto:ibnukatsir@example.com">ibnukatsir@example.com</a></p>
</footer>

Elemen <nav> HTML

Elemen <nav> mendefinisikan satu set link navigasi.

Perhatikan bahwa TIDAK semua tautan dokumen harus berada di dalam elemen <nav>. Elemen <nav> dimaksudkan hanya untuk blok utama link navigasi.

Browser, seperti pembaca layar untuk pengguna disabilitas, dapat menggunakan elemen ini untuk menentukan apakah akan menghilangkan rendering awal konten ini.


Contoh

Satu set link navigasi:

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

Elemen <aside> HTML

Elemen <aside> mendefinisikan beberapa konten selain dari konten itu ditempatkan (seperti sidebar).

Konten <aside> harus secara tidak langsung terkait dengan konten sekitarnya.


Contoh

Tampilkan beberapa konten selain kontennya ditempatkan:

<p>Saya dan keluarga mengunjungi Tugu Khatulistiwa musim panas ini. Cuacanya 
bagus, dan Tuga Khatulistiwa luar biasa! Saya mengalami musim panas yang hebat 
bersama keluarga saya.</p>

<aside>
<h4>Tugu Khatulistiwa</h4>
<p>Tugu Khatulistiwa atau Equator Monument berada di Jalan Khatulistiwa, 
Pontianak Utara, Provinsi Kalimantan Barat. Lokasinya berada sekitar 3 km dari pusat 
Kota Pontianak</p>
</aside>

Elemen <figure> dan <figcaption> HTML

Tag <figure> menspesifikasikan konten mandiri, seperti ilustrasi, diagram, foto, daftar kode, dll

Tag <figcaption> mendefinisikan keterangan untuk elemen <figure>. Elemen <figcaption> dapat ditempatkan sebagai yang pertama atau sebagai anak terakhir dari elemen <figure>.

Elemen <img> mendefinisikan sebenarnya gambar / ilustrasi.


Contoh

<figure>
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>

Mengapa Elemen Semantic?

Menurut W3C: "Web semantik memungkinkan data untuk dibagikan dan digunakan kembali di seluruh aplikasi, perusahaan, dan komunitas."


Sumber referensi: w3schools

Komentar

Posting Komentar