Elemen Dasar HTML5: <header>, <nav> & <footer>

Pengembangan HTML5 belum selesai . Tapi , ada beberapa elemen baru di HTML5 yang dapat digunakan saat ini, unsur-unsur yang sudah didukung dalam browser saat ini dan tua (dengan shim) seperti header, nav, dan footer. Anda mungkin telah melihat unsur-unsur ini digunakan di tutorial HTML5 kami tapi belum benar-benar melihat di bawah tenda.
Saya pikir sudah saatnya kita mengeksplorasi unsur-unsur baru dan melihat apa elemen ini benar-benar digunakan untuk . Posting ini adalah bagian dari seri kami yang mencakup fitur baru dan menarik di HTML5. Jika Anda telah melewatkan yang sebelumnya, memeriksa judul-judul ini:

Header Element

Elemen-elemen HTML5 baru, untungnya, dijelaskan dengan nama yang sangat logis dan sesuai dengan spesifikasi elemen header yang mewakili "Sekelompok bantu pengantar atau navigasi." ( Ini adalah pendapat saya bahwa itu adalah jauh lebih baik mengutip dari resmi dan sah sumber untuk deskripsi yang akurat, seperti yang sering kali artinya bisa terdistorsi.

Dari penjelasan di atas , kita dapat menyimpulkan bahwa elemen header tidak dimaksudkan untuk semata-mata menentukan header dari suatu halaman web. Elemen Header juga dapat digunakan untuk menentukan bagian (biasanya di atas) yang memperkenalkan bagian yang berikut.
Sebagai contoh, dalam potongan kode berikut ini, aku telah menempatkan elemen header di bagian atas dari isi posting saya untuk membungkus judul dan pasca meta;

<header>
	<h1>This is the Title of the Content</h1>
	<div class="post-meta">
		<p>By Author</a> <span class="category">Filed in Web 2.0</span></p>  
	</div>
</header>
<article>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id 
	felis et augue sagittis euismod quis at sem. Nunc sit amet magna ac velit congue 
	ultricies. Sed eros justo, lacinia in fringilla sollicitudin, congue id massa. 
	Nunc dignissim bibendum nibh, sed dictum massa pharetra sit amet.</p>
</article>

Karena judul dan pos meta , dalam contoh ini, ditempatkan di bagian atas dan bertindak sebagai pengenalan isi posting, kita dapat membungkus mereka dalam elemen sundulan.

Nav Element

Unsur nav singkatan Navigasi. Menurut spec. Elemen ini mewakili; "Sebuah bagian dari halaman yang link ke halaman lain atau ke bagian dalam halaman: bagian dengan link navigasi
Sementara unsur ini jelas digunakan untuk mendefinisikan navigasi khusus, pelaksanaannya tidak terbatas hanya navigasi utama, biasanya di bagian atas halaman web. Dari keterangan resmi di atas, kita dapat menyimpulkan bahwa elemen nav juga dapat digunakan pada setiap bagian dari halaman yang juga bertindak sebagai navigator, lihat contoh berikut;

<h4>Table of Content</h4>
<nav>
	<ul>
		<li><a href="#overview">Overview</a></li>
		<li><a href="#history">History</a></li>
		<li><a href="#development">Development</a></li>
	<ul>
</nav>

Dalam contoh ini, kita telah menggunakan elemen nav untuk membungkus Daftar Isi, mana link masih menunjuk ke halaman yang sama.

Footer Element

Unsur lain yang kini banyak diadopsi adalah elemen footer. Umumnya kita merujuk footer ke bagian yang terletak di bagian paling bawah dari halaman web, tapi mari kita lihat bagaimana spesifikasi menggambarkan unsur ini, "Elemen footer merupakan footer untuk leluhurnya terdekat sectioning konten atau pemotongan elemen root. Footer biasanya berisi informasi tentang bagian dalamnya seperti yang menulisnya, link ke dokumen terkait, Data hak cipta, dan sejenisnya."

Itu agak membingungkan, mari kita membuat hal ini sederhana.

Footer adalah (masih) logis ditempatkan di bagian bawah. Tapi karena spesifikasi tidak menyebutkan elemen ini akan digunakan secara eksklusif untuk footer web, kita dapat menyimpulkan bahwa pelaksanaan untuk elemen footer juga dapat digunakan pada akhir bagian. Mari kita lihat contoh di bawah ini;

<div>
<header>
<h1>This is the Title of the Content</h1>
	<div class="post-meta">
		<p>By Author</a> <span class="category">Filed in Web 2.0</span></p>  
	</div>
</header>
<article>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id 
	felis et augue sagittis euismod quis at sem. Nunc sit amet magna ac velit congue 
	ultricies. Sed eros justo, lacinia in fringilla sollicitudin, congue id massa. 
	Nunc dignissim bibendum nibh, sed dictum massa pharetra sit amet.</p>
</article>
<footer>
	<div class="tags">
		<span class="tags-title">Tags:</span> <a href="#" rel="tag">Command Prompt</a>, <a href="#" rel="tag">Compass</a>, <a href="#" rel="tag">CSS</a>, <a href="#" rel="tag">Sass</a>, <a href="#" rel="tag">Terminal</a>
	</div>
	<div class="facebook-like">
		<div>10 likes</div> <!-- let's pretend it to be the facebook like -->
	</div>
</footer>
</div>

Dalam contoh ini, kami telah menambah isi posting kami untuk memiliki footer mengandung pos tag dan post 'Likes' ‘Likes’.

Final Thought

header, nav dan footer tidak melakukan hal-hal mewah seperti elemen HTML5 baru lainnya , namun elemen ini terutama dirancang untuk membuat struktur web lebih bermakna baik untuk browser dan manusia, seperti bagaimana World Wide Web penemu, Tim Barners - Lee.
Reff; hongkiat.com
Elemen Dasar HTML5: <header>, <nav> & <footer>

Tips Cakemier