Saturday, 11 July 2015

New, Semantik Tag Elemen HTML5 yang bermanfaat

Ketika Anda menyusun halaman HTML, secara umum untuk menandai sebuah header dan navigasi adalah seperti ini :

<div class="header">
<div class="navigation">
<ul class="nav-list">
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="About">About</a></li>
</ul>
</div> <!—end of navigation -->
</div> <!—end of header -->

Namun,  lihatlah bagaimana kita melakukannya dengan HTML5 :

<header>
<nav>
<ul id="nav-list">
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="About">About</a></li>
</ul>
</nav>
</header>


Bagaimana tentang itu? Alih-alih menggunakan tag <div> untuk elemen struktur (meskipun dengan penambahan class name untuk tujuan styling). HTML5 memberikan kita beberapa elemen semantik yang berarti untuk kita gunakan. Bagian umum struktural dalam halaman seperti header dan navigasi (dan banyak lagi yang akan kita lihat pada artikel selanjutnya) diperoleh tag elemen mereka sendiri. Kode kita hanya menjadi jauh lebih "semantik" dengan mengatakan  pada browser tag <nav> ,section ini digunakan untuk navigasi. Kabar baik untuk kita tapi berharap lebih penting lagi kabar baik untuk mesin pencari juga. Sekarang mereka akan dapat memahami halaman kita lebih baik dari sebelumnya dan menyesuaikan peringkat konten kita.

Ketika saya menulis halaman HTML, saya sering melakukan dan mengetahui bahwa HTML ini pada saatnya akan diteruskan ke orang-orang bagian backend (Anda pasti tahu anak-anak hebat yang berhubungan dengan PHP, Ruby, NET, ColdFusion, dan sebagainya) sebelum akhirnya membuat halaman untuk WWW. Untuk tetap berhubungan baik dengan orang-orang backend, saya sering memberikan komentar penutupan tag </div> dalam kode untuk memungkinkan orang lain (dan sering untuk mengingatkan saya sendiri juga) untuk dengan mudah memahami dimana elemen tag <div> berakhir.  Dengan HMTL5 kita dapat meniadakan hal tersebut. Ketika melihat kode HTML5, misalnya sebuah elemen tag penutup </header> , maka ini langsung memberitahu Anda bahwa ini elemen tag penutup, tanpa perlu untuk menambahkan komentar.

Kita hanya mengangkat sedikit disini tentang berbagai semantik HTML5 yang kita miliki. Dan sebelum masuk lebih lanjut, kita masih punya bahasan satu lagi yaitu jika ada satu hal di era baru desain web maka tidak bisa ada tanpa CSS3 dalam artikel berikutnya tentunya. :)

No comments:

Post a Comment