Semantik adalah studi tentang makna kata-kata dan frase dalam bahasa.
unsur semantik adalah elemen dengan makna.
HTML semantik adalah penggunaan markup HTML untuk memperkuat semantik, atau makna, dari informasi dalam halaman web dan aplikasi web bukan hanya untuk menentukan presentasi atau melihat.
HTML semantik diproses oleh web browser tradisional maupun oleh banyak agen pengguna lainnya. CSS digunakan untuk menyarankan presentasi kepada pengguna manusia.
Apa Elements Semantic?
Unsur semantik jelas menggambarkan artinya untuk kedua browser dan pengembang.
Contoh elemen non-semantik: <div> dan <span> - Menceritakan apa-apa tentang isinya.
Contoh elemen semantik: <form> , <table> , dan <img> - Jelas mendefinisikan isinya.
Dukungan Browser
| iya nih | iya nih | iya nih | iya nih | iya nih |
HTML5 elemen semantik didukung di semua browser modern.
Selain itu, Anda dapat "teach" browser lama bagaimana menangani "unknown elements" .
Membacanya di HTML5 Dukungan Browser .
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-unsur semantik baru untuk menentukan bagian-bagian yang berbeda dari suatu halaman web:
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
HTML5 <section> Elemen
The <section> elemen mendefinisikan bagian dalam sebuah dokumen.
Menurut W3C dokumentasi HTML5: "A section is a thematic grouping of content, typically with a heading."
halaman rumah Sebuah situs Web ini dapat 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> Cobalah sendiri " 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 post
- 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> Cobalah sendiri " Elemen Semantic Nesting
Dalam standar HTML5, <article> elemen mendefinisikan lengkap, blok mandiri elemen terkait.
The <section> elemen didefinisikan sebagai sebuah blok elemen terkait.
Dapatkah kita menggunakan definisi untuk memutuskan bagaimana elemen sarang? Tidak, kita tidak bisa!
Di Internet, Anda akan menemukan halaman HTML dengan <section> elemen yang mengandung <article> elemen, dan <article> elemen yang mengandung <sections> elemen.
Anda juga akan menemukan halaman dengan <section> elemen yang mengandung <section> elemen, dan <article> elemen yang mengandung <article> elemen.
Koran: Olahraga articles di olahraga section , memiliki teknis section dalam setiap article .
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> Cobalah sendiri " HTML5 <footer> Elemen
The <footer> elemen menentukan footer untuk dokumen atau bagian.
Sebuah <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:[email protected]">
[email protected]</a>.</p>
</footer> Cobalah sendiri " 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> Cobalah sendiri " HTML5 <aside> Elemen
The <aside> elemen mendefinisikan beberapa konten selain dari konten itu ditempatkan di (like a sidebar) .
Samping konten harus terkait dengan konten 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> Cobalah sendiri " HTML5 <figure> 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> Cobalah sendiri " The <img> elemen mendefinisikan gambar, <figcaption> elemen mendefinisikan judul.
Mengapa Semantic HTML5 Elements?
Dengan HTML4, pengembang digunakan favorit mereka sendiri nama atribut ke halaman unsur-unsur gaya:
header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...
Hal ini membuat tidak mungkin untuk mesin pencari untuk mengidentifikasi konten halaman web yang benar.
Dengan unsur-unsur HTML5 seperti: <header> <footer> <nav> <section> <article> , ini akan menjadi lebih mudah.
Menurut W3C, Web Semantic:
"Memungkinkan data yang akan dibagi dan digunakan kembali di seluruh aplikasi, perusahaan, dan masyarakat."
pertimbangan
Dalam kasus di mana dokumen membutuhkan semantik yang lebih tepat daripada yang dinyatakan dalam HTML saja, fragmen dokumen dapat tertutup dalam rentang atau div elemen dengan nama kelas yang bermakna seperti <span class = "author"> dan <div class = "faktur" >. Di mana nama kelas ini juga merupakan identifier fragmen dalam skema atau ontologi, mereka mungkin link ke arti yang lebih didefinisikan. Microformats meresmikan pendekatan ini untuk semantik dalam HTML.
Salah satu pembatasan penting dari pendekatan ini adalah bahwa markup tersebut berdasarkan pada elemen inklusi harus memenuhi kondisi baik-formedness. Seperti dokumen-dokumen ini secara luas pohon-terstruktur, ini berarti bahwa fragmen hanya yang seimbang dari sub-pohon dapat ditandai dengan cara ini. Sebuah cara menandai-up setiap bagian sewenang-wenang HTML akan memerlukan mekanisme independen dari struktur markup itu sendiri, seperti XPointer.
Baik semantik HTML juga meningkatkan aksesibilitas dokumen web (lihat juga Pedoman Aksesibilitas Konten Web). [Rujukan?] Sebagai contoh, ketika pembaca layar atau browser audio yang benar dapat memastikan struktur dokumen, itu tidak akan menyia-nyiakan tunanetra pengguna waktu dengan membaca informasi berulang atau tidak relevan ketika telah ditandai dengan benar.
Elemen semantik di HTML5
Di bawah ini adalah daftar abjad dari unsur-unsur semantik baru dalam HTML5.
Link pergi ke kami lengkap HTML5 Referensi .
| Menandai | Deskripsi |
|---|---|
| <article> | Mendefinisikan sebuah artikel |
| <aside> | Mendefinisikan konten selain dari konten halaman |
| <details> | Mendefinisikan rincian tambahan bahwa pengguna dapat melihat atau menyembunyikan |
| <figcaption> | Mendefinisikan sebuah caption untuk <figure> elemen |
| <figure> | Menentukan konten mandiri, seperti ilustrasi, diagram, foto, daftar kode, dll |
| <footer> | Mendefinisikan footer untuk dokumen atau bagian |
| <header> | Menentukan header untuk dokumen atau bagian |
| <main> | Menentukan isi utama dokumen |
| <mark> | Mendefinisikan ditandai / teks yang disorot |
| <nav> | Mendefinisikan link navigasi |
| <section> | Mendefinisikan sebuah bagian dalam sebuah dokumen |
| <summary> | Mendefinisikan sebuah judul terlihat untuk <details> elemen |
| <time> | Mendefinisikan tanggal / waktu |