HTML5 Semantic Elements

Semantik adalah studi tentang makna kata-kata dan frase dalam bahasa.

Unsur semantik adalah elemen dengan makna.

---

Apa Elements Semantic?

Unsur semantik jelas menggambarkan artinya untuk kedua browser dan pengembang.

Contoh non-semantik elemen: <div> dan <span> - Menceritakan apa-apa tentang isinya.

Contoh semantik elemen: <form>, <table>, dan <img> - Jelas mendefinisikan isinya.

---

Dukungan Browser

    

HTML5 elemen semantik yang didukung di semua browser modern.

Selain itu, Anda dapat "mengajarkan" browser lama bagaimana menangani "elemen yang tidak diketahui".

Membacanya di HTML5 Browser Dukungan .

---

Elemen Semantic baru di HTML5

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

HTML5 menawarkan unsur semantik baru untuk menentukan bagian yang berbeda dari halaman web:  

• <Article>
• <Aside>
• <Rincian>
• <Figcaption>
• <Figure>
• <Footer>
• <Header>
• <Utama>
• <Mark>
• <Nav>
• <Section>
• <Summary>
• <Time>

---

HTML5 <section> Elemen

The <section> elemen mendefinisikan bagian dalam sebuah dokumen.

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

Halaman rumah Sebuah situs web bisa dibagi menjadi beberapa bagian untuk pengenalan, konten, dan informasi kontak.

Contoh:

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

HTML5 <article> Elemen

The <article> elemen menentukan independen, konten mandiri.

Sebuah artikel harus masuk akal sendiri, dan itu harus mungkin untuk membacanya secara independen dari sisa situs web.

Contoh di mana <article> elemen dapat digunakan:

• Posting forum
• Blog posting
• Artikel koran

Contoh:

<article>
  <h1>What Does WWF Do?</h1>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

Elemen Semantic Nesting

Dalam standar HTML5, yang <article> elemen mendefinisikan lengkap, blok mandiri elemen terkait.

The <section> elemen didefinisikan sebagai sebuah blok elemen terkait.

Bisakah kita menggunakan definisi untuk memutuskan bagaimana elemen sarang? Tidak, kita tidak bisa!

Di Internet, Anda akan menemukan halaman HTML dengan <section> elemen berisi <article> elemen, dan <article> elemen berisi <bagian> elemen.

Anda juga akan menemukan halaman dengan <section> elemen berisi <section> elemen, dan <article> elemen berisi <article> elemen.

HTML5 <header> Elemen

The <header> elemen menentukan header untuk dokumen atau bagian.

The <header> elemen harus digunakan sebagai wadah untuk konten pengantar.

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

Contoh berikut mendefinisikan header untuk sebuah artikel:

Contoh:

<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

HTML5 <footer> Elemen

The <footer> elemen menentukan footer untuk dokumen atau bagian.

A <footer> elemen harus berisi informasi tentang elemen yang mengandung.

Sebuah footer biasanya berisi penulis informasi dokumen, hak cipta, link ke persyaratan penggunaan, informasi kontak, dll

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

Contoh:

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p>Contact information: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer>

HTML5 <nav> Elemen

The <nav> elemen mendefinisikan satu set link navigasi.

The <nav> elemen ditujukan untuk blok besar link navigasi. Namun, tidak semua link dalam dokumen harus di dalam <nav> elemen!

Contoh:

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

HTML5 <aside> Elemen

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

Samping konten harus berkaitan dengan isi sekitarnya.

Contoh:

<p>My family and I visited The Epcot center this summer.</p>

<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

HTML5 <angka> dan <figcaption> Elemen

Dalam buku-buku dan surat kabar, itu adalah umum untuk memiliki keterangan dengan gambar.

Tujuan dari keterangan adalah menambahkan penjelasan visual untuk gambar.

Dengan HTML5, gambar dan keterangan dapat dikelompokkan bersama dalam <figure> elemen:

Contoh:

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

The <img> elemen mendefinisikan gambar, <figcaption> elemen mendefinisikan judul.

Elemen semantik di HTML5

Di bawah ini adalah daftar abjad dari unsur-unsur semantik baru di HTML5.

Link yang masuk ke kami lengkap HTML5 Referensi .

Tag	Description
<article>	Defines an article
<aside>	Defines content aside from the page content
<details>	Defines additional details that the user can view or hide
<figcaption>	Defines a caption for a <figure> element
<figure>	Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer>	Defines a footer for a document or section
<header>	Specifies a header for a document or section
<main>	Specifies the main content of a document
<mark>	Defines marked/highlighted text
<nav>	Defines navigation links
<section>	Defines a section in a document
<summary>	Defines a visible heading for a <details> element
<time>	Defines a date/time

sumber:w3schools