Elemen Semantic pada html 5

Apa Elemen Semantic?

Unsur semantik jelas menggambarkan maknanya baik browser dan pengembang.

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

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

 

Banyak situs web yang ada saat ini mengandung kode HTML seperti ini: <div id = “nav”>, <div class = “header”>, atau <div id = “footer”>, untuk menunjukkan link navigasi, header, dan footer.
HTML5 menawarkan elemen semantik baru dengan jelas mendefinisikan bagian yang berbeda dari sebuah halaman web:

 

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


HTML5 <section> Elemen

The <section> mendefinisikan bagian dalam sebuah dokumen.

Menurut HTML5 dokumentasi W3C: “bagian adalah pengelompokan tematik konten, biasanya dengan judul.”

Contoh

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

HTML5 <article> Elemen

The <Artikel> elemen menentukan independen, konten mandiri.

Sebuah artikel harus masuk akal sendiri dan itu harus mungkin untuk mendistribusikan secara mandiri dari sisa situs web.

Contoh di mana <article> elemen dapat digunakan:

  • Posting forum
  • Blog post
  • Berita
  • Komentar

Contoh

<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the  public on March 14, 2011 at 21:00 PDT…..</p>
</article>

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 <samping> Elemen

The <samping> 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 <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 sebuah header untuk sebuah artikel:

Contoh

<article>
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime=“2011-03-15”></time></p>
</header>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the  public on March 14, 2011 at 21:00 PDT…..</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><time pubdate datetime=“2012-03-01”></time></p>
</footer>

HTML5 <figure> dan <figcaption> Elemen

The <figure> tag menentukan mandiri konten, seperti ilustrasi, diagram, foto, daftar kode, dll

Sedangkan isi <figure> elemen terkait dengan aliran utama, posisinya tidak tergantung pada aliran utama, dan jika dihapus tidak akan mempengaruhi aliran dokumen.

The <figcaption> mendefinisikan keterangan untuk <figure> elemen.

The <figcaption> elemen dapat ditempatkan sebagai yang pertama atau terakhir anak dari <figure> elemen.

Contoh

<figure>
<img src=“img_pulpit.jpg” alt=“The Pulpit Rock” width=“304” height=“228”>
<figcaption>Fig1. – The Pulpit Pock, Norway.</figcaption>
</figure>

Bisakah Kita Mulai Menggunakan ini Elements Semantic?

Unsur-unsur yang dijelaskan di atas adalah semua elemen blok (kecuali <figcaption>).

Untuk mendapatkan elemen ini untuk bekerja dengan baik di browser lama, mengatur properti tampilan untuk memblokir dalam style sheet (ini menyebabkan browser lama untuk membuat elemen-elemen ini benar):

header, section, footer, aside, nav, main, article, figure
{
display: block;
}

 


Masalah Dengan Internet Explorer 8 Dan Sebelumnya

IE8 dan sebelumnya tidak tahu bagaimana untuk membuat CSS pada elemen yang tidak dikenalinya. Anda tidak bisa gaya elemen HTML5 baru seperti <header>, <section>, <footer>, <selain>, <nav>, <article>, <figure>.

Untungnya, Sjoerd Visscher telah menemukan solusi JavaScript yang disebut HTML5 Shiv; untuk memungkinkan styling elemen HTML5 di versi Internet Explorer sebelum versi 9.

Anda dapat men-download dan membaca lebih lanjut tentang HTML5 Shiv di: http://code.google.com/p/html5shiv/

Untuk mengaktifkan HTML5 Shiv (setelah download), masukkan kode berikut ke dalam <head> elemen:

<!–[if lt IE 9]>
<script src=”html5shiv.js”></script>
<![endif]–>

Kode di atas adalah komentar yang hanya versi awal dari IE9 membaca. Ini harus ditempatkan di <head> elemen karena Internet Explorer perlu tahu tentang unsur-unsur sebelum membuat mereka.

sumber : http://translate.google.co.id/translate?hl=id&sl=en&u=http://www.w3schools.com/html/html5_intro.asp&prev=/search%3Fq%3Dhtml%2B5%26client%3Dfirefox-a%26hs%3Ds4L%26rls%3Dorg.mozilla:en-US:official%26channel%3Dsb

You can skip to the end and leave a response. Pinging is currently not allowed.

Leave a Reply

Your email address will not be published. Required fields are marked *