Elemen Semantik HTML5

Semantika (berasal dari Yunani Kuno) dapat ditdefinisikan sebagai penelitian tentang makna bahasa.

Elemen semantik adalah elemen yang memiliki makna.

Apa itu elemen semantik?

Elemen semantik menjelaskan kebrowser dan pengembang makna mereka dengan jelas.

Non-semantikContoh elemen: <div> dan <span> - tak dapat menyediakan informasi tentang kontennya.

SemantikContoh elemen: <form>, <table> dan <img> - mendefinisikan kontennya dengan jelas.

Dukungan browser

Yes Yes Yes Yes Yes

Semua browser modern mendukung elemen semantik HTML5.

Selain itu, Anda dapat 'membantu' browser lama untuk menangani 'elemen yang tak dikenal'.

Baca lebih banyak tentang bagian ini di browser HTML5 untuk mendapatkan pengetahuan tambahan.

Elemen semantik baru di HTML5

Banyak situs web yang mengandung kode HTML untuk navigasi, judul halaman, dan kaki halaman, seperti ini: <div id="nav"> <div class="header"> <div id="footer">.

HTML5 menyediakan elemen semantik baru untuk mendefinisikan bagian yang berbeda di halaman.

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

Elemen Semantik HTML5

Elemen Semantik HTML5

Elemen <section> HTML5

Elemen <section> mendefinisikan bagian dalam dokumen.

Menurut dokumentasi HTML W3C: 'Bagian (section) adalah grup konten yang memiliki tema, biasanya memiliki judul'.

Dapat membagi halaman utama situs web menjadi bagian ringkasan, konten, informasi kontak, dan sebagainya.

Contoh

<section>
   <h1>WWF</h1>
   <p>The World Wide Fund for Nature (WWF) is....</p>
</section> 

Coba sendiri

Elemen <article> HTML5

Elemen <article> menentukan konten yang terpisah dan terkandung.

Dokumen memiliki makna sendiri dan dapat dibaca secara independen dari konten lain di situs web.

Aplikasi konteks elemen <article>:

  • Fórum
  • Blog
  • Berita

Contoh

<article>
   <h1>Apa yang dilakukan WWF?</h1>
   <p>Misi WWF adalah untuk menghentikan degradasi lingkungan alam bumi kita,</p>
  dan membangun masa mendatang di mana manusia hidup dalam keseimbangan dengan alam.</p>
</article> 

Coba sendiri

Elemen semantik yang digabungkan

Dalam standar HTML5, elemen <article> didefinisikan sebagai blok penggabungan elemen yang relevan.

Elemen <section> didefinisikan sebagai blok elemen yang relevan.

Apakah kita dapat menggunakan definisi ini untuk menentukan bagaimana cara menggabungkan elemen? Tidak, kita tidak dapat!

Dalam internet, Anda akan menemukan halaman HTML yang mengandung elemen <article> dalam elemen <section>, serta halaman yang mengandung elemen <sections> dalam elemen <article>.

Anda akan menemukan elemen <section> yang mengandung elemen <section>, serta elemen <article> yang mengandung elemen <sections>.

Elemen <header> HTML5

Elemen <header> menentukan kaki halaman untuk dokumen atau bagian.

Elemen <header> harus digunakan sebagai kontainer untuk konten pengantar.

Dalam satu dokumen dapat terdapat beberapa elemen <header>.

Contoh berikut adalah definisi kaki halaman untuk sebuah artikel:

Contoh

<article>
   <header>
     <h1>Apa yang dilakukan WWF?</h1>
     <p>Misi WWF:</p>
   </header>
   <p>Misi WWF adalah untuk menghentikan degradasi lingkungan alam bumi kita,</p>
  dan membangun masa mendatang di mana manusia hidup dalam keseimbangan dengan alam.</p>
</article> 

Coba sendiri

Elemen <footer> HTML5

Elemen <footer> menentukan kaki halaman untuk dokumen atau bagian.

Elemen <footer> harus menyediakan informasi tentang elemen yang disertakan.

Kaki halaman biasanya mengandung penulis dokumen, informasi hak cipta, tautan syarat penggunaan, informasi kontak, dan sebagainya.

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

Contoh

<footer>
   <p>Diposting oleh: Hege Refsnes</p>
   <p>Informasi kontak: <a href="mailto:someone@example.com">
  <a href="someone@example.com"></a>.</p>
</footer> 

Coba sendiri

Elemen HTML5 <nav>

Elemen <nav> mendefinisikan koleksi tautan navigasi.

Elemen <nav> bertujuan untuk mendefinisikan blok tautan navigasi besar. Namun, bukan semua tautan di dokumen harus berada di dalam elemen <nav>!

Contoh

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

Coba sendiri

Elemen HTML5 <aside>

<aside> adalah elemen untuk konten yang berada di luar konten utama halaman (seperti sidebar).

Konten aside harus relevan dengan konten sekeliling.

Contoh

<p>Family saya dan saya mengunjungi Epcot Center musim panas ini.</p>
<aside>
   <h4>Epcot Center</h4>
   <p>The Epcot Center adalah taman tema di Disney World, Florida.</p>
</aside> 

Coba sendiri

Elemen HTML5 <figure> dan <figcaption>

Judul yang disertai dengan gambar umumnya terlihat di buku dan surat kabar.

Fungsi judul (caption) adalah untuk menambah penjelasan yang terlihat untuk gambar.

Dengan HTML5, gambar dan judul dapat disatukan dalam <figure> dalam elemen:

Contoh

<figure>
   <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
   <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure> 

Coba sendiri

<img> Elemen mendefinisikan gambar,<figcaption> Elemen mendefinisikan judul.

Mengapa menggunakan elemen HTML5?

Jika menggunakan HTML4, pengembang akan menggunakan nama atribut yang disukai untuk menetapkan gaya elemen halaman:

header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...

Dengan demikian, peramban tidak dapat mengidentifikasi konten halaman yang benar.

Dengan elemen HTML5 seperti: <header> <footer> <nav> <section> <article>, masalah ini dapat diselesaikan dengan mudah.

Menurut W3C, Semantics Web:

“Memungkinkan berbagi dan penggunaan ulang data antara aplikasi, bisnis, dan kelompok.”

Elemen semantik di HTML5

Di bawah ini tercantum elemen semantik HTML5 yang diurutkan berdasarkan abjad.

Tautan ini mengarah ke panduan referensi HTML penuh.

Tandai Deskripsi
<article> Definisi artikel.
<aside> Definisi konten di luar konten halaman.
<details> Definisi detil ekstra yang dapat dilihat atau disembunyikan pengguna.
<figcaption> Definisi judul elemen <figure>.
<figure> Tentukan konten yang terkandung, seperti gambar, grafik, foto, daftar kode, dll.
<footer> Definisi kaki halaman atau bab dokumen.
<header> Tentukan judul halaman atau bab dokumen.
<main> Tentukan konten utama dokumen.
<mark> Definisi teks penting atau disemak.
<nav> Definisi tautan navigasi.
<section> Definisi bab dalam dokumen.
<summary> Definisi judul yang dapat dilihat/tutup <details> elemen.
<time> Definisi Tanggal/Waktu.