Elemen Semantik HTML5

Semantik (berasal dari Yunani Kuno) boleh ditakrifkan sebagai pengkajian makna bahasa.

Elemen makna adalah elemen yang mempunyai makna.

Apakah elemen makna?

Elemen makna menjelaskan dengan jelas makna kepada pelayar dan pengembang.

Bukan maknaContoh elemen: <div> dan <span> - tak dapat menyediakan maklumat tentang kandungannya.

MaknaContoh elemen: <form>, <table> dan <img> - mensifatkan kandungan dengan jelas.

Pendukung pelayar

Yes Yes Yes Yes Yes

Semua pelayar moden mendukung elemen makna HTML5.

Di samping itu, anda boleh 'bantu' pelayar lama menghadapi 'elemen yang tak dikenali'.

Dapatkan pengetahuan lebih lanjut tentang bab ini di pelayar HTML5.

Elemen makna baru HTML5

Banyak laman web mengandungi kod HTML untuk peticuan navigasi, header dan footer, seperti yang berikut: <div id="nav"> <div class="header"> <div id="footer">.

HTML5 menyediakan elemen makna baru untuk mensifatkan bahagian laman web yang berbeza.

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

Elemen Semantik HTML5

Elemen Semantik HTML5

Elemen <section> HTML5

Elemen <section> mensifatkan bab dalam dokumen.

Berdasarkan dokumentasi HTML W3C: 'Bab (section) adalah kumpulan kandungan yang mempunyai tema, biasanya mempunyai tajuk'.

Boleh membahagikan halaman utama laman web kepada bahagian seperti ringkasan, kandungan, maklumat hubungan dan lain-lain.

Contoh

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

Coba sendiri

Elemen <article> HTML5

Elemen <article> mensetujui kandungan yang berasingan dan terdapat di dalamnya sendiri.

Dokumen mempunyai maknanya sendiri dan boleh di baca secara berasingan daripada kandungan lain di laman web.

Penggunaan aplikasi elemen <article>:

  • Forum
  • Blogs
  • Berita

Contoh

<article>
   <h1>Apa Yang Dilakukan WWF?</h1>
   <p>Misi WWF adalah untuk menghentikan keusahawanan lingkungan alam bumi kita,</p>
  dan membina masa depan di mana manusia hidup dalam keselarasan dengan alam.</p>
</article>

Coba sendiri

Elemen maknawi yang disalurkan

Dalam standar HTML5, elemen <article> didefinisikan sebagai blok yang berisi elemen yang berkaitan dan terdapat di dalamnya sendiri.

Elemen <section> didefinisikan sebagai blok elemen yang berkaitan.

Kami boleh menggunakan definisi ini untuk menentukan bagaimana cara untuk mengecas elemen? Tidak, kami tidak dapat!

Dalam Internet, anda akan mendapati halaman HTML yang mengandungi elemen <article> di dalam elemen <section>, serta halaman yang mengandungi elemen <sections> di dalam elemen <article>.

Anda juga akan mendapati elemen <section> yang mengandungi elemen <section>, serta elemen <article> yang mengandungi elemen <sections>.

Elemen <header> HTML5

Elemen <header> mensetujui kaki halaman untuk dokumen atau bab.

Elemen <header> seharusnya digunakan sebagai wadah untuk kandungan pengenalan.

Sebuah dokumen boleh mempunyai beberapa elemen <header>.

Berikut adalah contoh untuk mensetujui 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 keusahawanan lingkungan alam bumi kita,</p>
  dan membina masa depan di mana manusia hidup dalam keselarasan dengan alam.</p>
</article>

Coba sendiri

Elemen <footer> HTML5

Elemen <footer> mensetujui kaki halaman untuk dokumen atau bab.

Elemen <footer> seharusnya menyediakan maklumat tentang elemen yang disertakan.

Kaki halaman biasanya mengandungi maklumat penulis dokumen, maklumat hak cipta, pautan syarat penggunaan, maklumat hubungan dan sebagainya.

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

Contoh

<footer>
   <p>Disiarkan oleh: Hege Refsnes</p>
   <p>Hubungi maklumat: <a href="mailto:someone@example.com">
  <a href="someone@example.com"></a>.</p>
</footer>

Coba sendiri

Elemen HTML5 <nav>

Elemen <nav> menentukan koleksi tautan navigasi.

Elemen <nav> bertujuan untuk menentukan blok tautan navigasi besar. Walaupun bukan semua tautan dalam 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>

Dalam buku dan surat kabar, judul yang disertai dengan gambar sangat umum.

Fungsi judul (caption) adalah menambahkan 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 menentukan gambar,<figcaption> Elemen menentukan 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, pemeriksa penggunaan browser tidak dapat mengenal kandungan halaman yang benar.

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

Menurut W3C, Web Semantik:

“Memungkinkan berbagi dan mengulang penggunaan data antara aplikasi, perusahaan, dan organisasi.”

Elemen semantik di HTML5

Di bawah ini adalah senarai elemen semantik baru HTML5 yang diurutkan abjad.

Pautan ini menuju ke panduan referensi HTML penuh.

Tanda Deskripsi
<article> Tentukan artikel.
<aside> Tentukan kandungan di luar kandungan halaman.
<details> Tentukan detil tambahan yang dapat dilihat atau disembunyikan pengguna.
<figcaption> Tentukan tajuk bagi elemen <figure>.
<figure> Tentukan kandungan yang terkandung, seperti gambar, grafik, foto, daftar kode, dll.
<footer> Tentukan kaki halaman atau bab.
<header> Tentukan tajuk halaman atau bab.
<main> Tentukan isi utama dokumen.
<mark> Tentukan teks penting atau disemangatkan.
<nav> Tentukan pautan navigasi.
<section> Tentukan bab dalam dokumen.
<summary> Tentukan tajuk yang dapat dilihat bagi elemen <details>.
<time> Tentukan tarikh dan masa.