HTML5 Semantic Elements

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

Unsur semantik adalah elemen dengan makna.

Apa Elemen Semantic?

Unsur semantik jelas menggambarkan artinya baik browser dan pengembang.

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

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

HTML5 elemen semantik yang didukung di semua browser modern.

Selain itu, Anda dapat "mengajar" browser lama bagaimana menangani "unsur-unsur yang tidak diketahui".

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-bagian yang berbeda dari suatu halaman web:

<Article>
<Aside>
<Rincian>
<Figcaption>
<Figure>
<Footer>
<Header>
<main>
<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.

<p>HTML adalah bahasa markup untuk menggambarkan dokumen web (halaman web).</p>

</section>

HTML5 <article> Elemen

The <article> elemen menentukan independen, konten mandiri.

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

Contoh <article> elemen yang dapat digunakan:

Posting forum
Blog posting
Artikel surat kabar

<p>HTML adalah bahasa markup untuk

menggambarkan dokumen web (halaman web).</p>

</article>

Elemen Semantic Nesting

Dalam standar HTML5, <article> elemen mendefinisikan dengan lengkap.

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

Dapatkah kita menggunakan 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 <section> 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:

</header>

<p>HTML adalah bahasa markup untuk

menggambarkan dokumen web (halaman web).</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.

</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!

<nav>

<a href="/html/">HTML</a>|

<a href="/css/">CSS</a>|

<a href="/js/">JavaScript</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.

<p>HTML adalah bahasa markup untuk

menggambarkan dokumen web </p>

</asside>

HTML5 <figure> dan <figcaption> Elemen

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

Tujuan dari keterangan adalah dengan menambahkan penjelasan visual untuk gambar.

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

<figcaption>Fig1. - The Pulpit Rock, Norway.</figcaption>

</figure>

<Img> elemen mendefinisikan gambar, <figcaption> mendefinisikan judul.

Mengapa Semantic HTML5 Elements?

Dengan HTML4, pengembang menggunakan favorit mereka sendiri atribut nama untuk gaya elemen halaman :

header, atas, bawah, footer, menu, navigasi, utama, wadah, isi, artikel, 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 seluruh aplikasi, perusahaan, dan masyarakat."

Elemen semantik di HTML5

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

Tag	Description
<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 bagian dalam sebuah dokumen
<summary>	Mendefinisikan sebuah judul terlihat untuk <details> elemen
<time>	Mendefinisikan tanggal / waktu

Kembali Keatas ⇑

CB Blogger

Tutorial Komputer