Elemen Semantik HTML
Elemen semantik = elemen dengan makna.
Apa itu Elemen Semantik?
Elemen semantik dengan jelas menjelaskan artinya bagi browser dan pengembang.
Contoh elemen non-semantik<div> : dan <span>- Tidak menceritakan apa pun tentang kontennya.
Contoh elemen semantik<form> : , <table>, dan <article>- Jelas mendefinisikan isinya.
Elemen Semantik dalam HTML
Banyak situs web yang berisi kode HTML seperti: <div id="nav"> <div class="header"> <div id="footer"> untuk menunjukkan navigasi, header, dan footer.
Dalam HTML ada beberapa elemen semantik yang dapat digunakan untuk mendefinisikan berbagai bagian halaman web:
- <artikel>
- <samping>
- <detail>
- <figcaption>
- <gambar>
- <footer>
- <tajuk>
- <utama>
- <tanda>
- <nav>
- <bagian>
- <ringkasan>
- <waktu>
Elemen HTML <bagian>
Elemen <section>mendefinisikan bagian dalam dokumen.
Menurut dokumentasi HTML W3C: "Bagian adalah pengelompokan konten secara tematik, biasanya dengan judul."
Contoh di mana <section>elemen dapat digunakan:
- bab
- pengantar
- Item berita
- Kontak informasi
Sebuah halaman web biasanya dapat dibagi menjadi beberapa bagian untuk pengenalan, konten, dan informasi kontak.
Contoh
Dua bagian dalam dokumen:
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an
international organization working on issues regarding the conservation,
research and restoration of the environment, formerly named the World
Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF.
The well-known panda logo of WWF originated from a panda named Chi Chi that
was transferred from the Beijing Zoo to the London Zoo in the same year of
the establishment of WWF.</p>
</section>
Elemen HTML <artikel>
Elemen <article>menentukan konten mandiri dan mandiri.
Sebuah artikel harus masuk akal dengan sendirinya, dan harus memungkinkan untuk mendistribusikannya secara independen dari situs web lainnya.
Contoh di mana <article>elemen dapat digunakan:
- Posting forum
- Postingan blog
- Komentar pengguna
- Kartu produk
- Artikel koran
Contoh
Tiga artikel dengan konten mandiri dan mandiri:
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser
developed by Google, released in 2008. Chrome is the world's most popular
web browser today!</p>
</article>
<article>
<h2>Mozilla
Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed
by Mozilla. Firefox has been the second most popular web browser since
January, 2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p>
</article>
Contoh 2
Gunakan CSS untuk menata elemen <article>:
<html>
<head>
<style>
.all-browsers {
margin: 0;
padding: 5px;
background-color: lightgray;
}
.all-browsers
> h1, .browser {
margin: 10px;
padding: 5px;
}
.browser {
background: white;
}
.browser > h2,
p {
margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>
<article class="all-browsers">
<h1>Most
Popular Browsers</h1>
<article class="browser">
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser
developed by Google, released in 2008. Chrome is the world's most popular web
browser today!</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an
open-source web browser developed by Mozilla. Firefox has been the second most
popular web browser since January, 2018.</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p>
</article>
</article>
</body>
</html>
Bersarang <artikel> di <bagian> atau sebaliknya?
Elemen <article>
menentukan konten mandiri dan mandiri.
Elemen <section>mendefinisikan bagian dalam dokumen.
Bisakah kita menggunakan definisi untuk memutuskan bagaimana menyusun elemen-elemen itu? Tidak, kita tidak bisa!
Jadi, Anda akan menemukan halaman HTML dengan <section>elemen yang mengandung <article>elemen, dan <article>elemen yang mengandung <section>elemen.
Elemen HTML <header>
Elemen <header>mewakili wadah untuk konten pengantar atau sekumpulan tautan navigasi.
Sebuah <header>elemen biasanya berisi:
- satu atau lebih elemen heading (<h1> - <h6>)
- logo atau ikon
- informasi kepengarangan
Catatan: Anda dapat memiliki beberapa <header>elemen dalam satu dokumen HTML. Namun, <header>tidak dapat ditempatkan di dalam <footer>, <address>atau <header>elemen lain.
Contoh
Header untuk <artikel>:
<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>
Elemen HTML <footer>
Elemen <footer>mendefinisikan footer untuk dokumen atau bagian.
Sebuah <footer>elemen biasanya berisi:
- informasi kepengarangan
- informasi hak cipta
- kontak informasi
- peta situs
- link kembali ke atas
- Dokumen terkait
Anda dapat memiliki beberapa <footer>elemen dalam satu dokumen.
Contoh
Bagian footer dalam dokumen:
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</footer>
Elemen HTML <nav>
Elemen <nav>mendefinisikan satu set link navigasi.
Perhatikan bahwa TIDAK semua tautan dokumen harus berada di dalam <nav>elemen. Elemen
<nav>ini ditujukan hanya untuk blok utama tautan navigasi.
Browser, seperti pembaca layar untuk pengguna yang dinonaktifkan, dapat menggunakan elemen ini untuk menentukan apakah akan menghilangkan rendering awal konten ini.
Contoh
Satu set tautan navigasi:
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
Elemen HTML <sebelah>
Elemen <aside>mendefinisikan beberapa konten selain dari konten yang ditempatkan (seperti bilah sisi).
Konten <aside>harus terkait secara tidak langsung dengan konten di sekitarnya.
Contoh
Tampilkan beberapa konten selain dari konten yang ditempatkan:
<p>My family and I visited The Epcot center this summer. The weather was
nice, and Epcot was amazing! I had a great summer together with my
family!</p>
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme
park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</p>
</aside>
Contoh 2
Gunakan CSS untuk menata elemen <aside>:
<html>
<head>
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</style>
</head>
<body>
<p>My family and I visited The Epcot
center this summer. The weather was nice, and Epcot was amazing! I had a great
summer together with my family!</p>
<aside>
<p>The Epcot center is a
theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</p>
</aside>
<p>My family and I visited The Epcot center
this summer. The weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>
<p>My family and I visited The Epcot center
this summer. The weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>
</body>
</html>
Elemen HTML <figure> dan <figcaption>
Tag <figure>menentukan konten mandiri, seperti ilustrasi, diagram, foto, daftar kode, dll.
Tag <figcaption>mendefinisikan keterangan untuk <figure>elemen. Elemen <figcaption>dapat ditempatkan sebagai yang pertama atau sebagai anak terakhir dari suatu <figure>elemen.
Elemen <img>mendefinisikan gambar/ilustrasi yang sebenarnya.
Contoh
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
Mengapa Elemen Semantik?
Menurut W3C: "Web semantik memungkinkan data untuk dibagikan dan digunakan kembali di seluruh aplikasi, perusahaan, dan komunitas."
Elemen Semantik dalam HTML
Di bawah ini adalah daftar beberapa elemen semantik dalam HTML.
| Tag | Description |
|---|---|
| <article> | Defines independent, self-contained content |
| <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 |
Untuk daftar lengkap semua tag HTML yang tersedia, kunjungi Referensi Tag HTML kami .