Belajar HTML5 Elemen Semantik HTML5


Labkom99.com - Ada sekumpulan elemen baru dengan arti tertentu dalam HTML5, yang disebut elemen semantik. Pada Artikel ini labkom99 akan belajar HTML5 dan memperkenalkan elemen semantik ini.

 

Elemen HTML 4 biasa tidak memiliki semantik, seperti pada membuat tabel menggunakan elemen <table>, teks paragraf menggunakan elemen <p>, dan lain sebagainya. Dengan kata lain, nilai elemen ini digunakan untuk mengontrol format dan struktur halaman HTML.

 

Elemen HTML 4 tidak menyatakan bahwa konten yang ditempatkan di dalamnya mewakili artinya. Browser atau mesin pencari tidak mengetahui apakah konten yang ditempatkan dalam tabel adalah artikel, postingan blog, atau menu navigasi. Ini juga alasan mengapa elemen semantik harus ditambahkan di HTML5.

 

Elemen semantik di halaman HTML5 dapat dengan jelas memberi tahu browser atau mesin pencari arti dari konten yang ditempatkan di elemen ini. Elemen ini juga dapat diberi gaya <style> melalui CSS, tetapi elemen ini sendiri sebenarnya tidak <style> memiliki apa pun.

 

Struktur Web Blog Dan Artikel HTML5

Sebagian besar situs web berisi postingan blog atau artikel atau berisi informasi tentang produk, konten layanan dan profil perusahaan dan lain sebagainya. Struktur halaman yang umum akan terlihat seperti berikut:

 

Belajar HTML5 Elemen Semantik HTML5

 

Pada diagram struktur halaman di atas, terdapat 4 elemen semantik HTML5 baru, yaitu:

  • header
  • footer
  • artikel
  • navigasi

Beberapa dari elemen yang disebutkan diatas akan labkom99 jabarkan secara singkat di bawah ini.


Baca Juga : Belajar HTML5 Dan Geolocation HTML5


Header Dan Footer

Dua elemen semantik pertama adalah elemen header dan footer. kedua elemen ini digunakan untuk menandai header dan footer pada halaman web. Elemen header biasanya digunakan untuk menempatkan menu atas dan logo website. Dan elemen footer biasanya digunakan untuk menempatkan beberapa informasi kontak dan informasi hak cipta.


Navigasi Atau Disingkat Nav

Elemen nav tersebut digunakan untuk menempatkan menu navigasi halaman. Sebuah halaman dapat memiliki beberapa menu navigasi. Misalnya, halaman dapat menempatkan menu multi-level di head, dan menu utama di sidebar untuk menautkan konten halaman.

 

Baca Juga : Belajar HTML5 Dan Messaging HTML5


Artikel

Elemen article digunakan untuk menandai konten utama halaman. Misal, konten halaman adalah postingan blog, maka head dan konten postingan blog harus ditempatkan di elemen article.


Baca Juga : Belajar HTML5 Element Drag And Drop HTML5


Jika halaman berisi beberapa postingan blog dan komentar, Anda dapat menempatkannya di elemen article yang berbeda .

 

Time

Elemen time digunakan untuk menampilkan informasi tanggal dan waktu. Elemen time tersebut juga berisi date time atribut yang dengannya Anda dapat mengatur tanggal dan waktu yang dapat dipahami oleh browser atau mesin pencari. Ini sangat baik untuk pengoptimalan mesin pencari.


Baca juga : Belajar HTML5 Web Workers HTML5


Pada Artikel ini labkom99 hanya memperkenalkan secara singkat beberapa elemen semantik baru pada HTML5. Dan untuk lebih jelasnya silahkan pelajari tiap artikel khusus HTML5 di labkom99.com seperti Dasar Pemrograman HTML dan Belajar HTML5 Dan Memahami HTML5.Sehingga dapat memahami dan menjelaskan setiap elemen semantik secara mendetail.

Komentar