Tag yang Baru di HTML5

Hari gini baru ngebahas HTML5? Basi banget ya? Alias telat…. Ah, ndak papa… Teman saya aja bilang, “lebih baik telat daripada telat banget..” Wkwkwk..

Postingan kali ini hanya akan menyebutkan tag-tag baru yang akan membuat halaman website kita menjadi lebih mudah dipahami. Tag apa saja itu?

Tag “section.” Tag ini dipakai untuk mengelompokkan bagian-bagian konten web yang isinya hampir serupa.

Tag “nav.” Sesuai namanya, bisa kita tebak, tag ini untuk menaruh navigator bisa pengunjung dapat melakukan navigasi dengan baik pada website kita.

Tag “article.” Sudah jamak kita dengar kata artikel (article) yang artinya tidak lain adalah tulisan utama. Begitulah, tag ini dipakai untuk mewadahi tulisan utama pada sebuah halaman web.

Tag “aside.” Secara harfiah, tag ini berarti “di samping.” Dari artinya bisa kita tebak, pasti tag ini dipakai untuk menaruh hal-hal yang ada di sampingnya bagian utama. Bentuknya bisa semacam halaman-halaman terkait dengan konten utama alias related contents.

Tag “hgroup.” Mungkin tag ini singkatan dari heading group, saya belum tahu pasti. Pasalnya, tag ini digunakan untuk mengelompokkan teks heading jika heading itu terdiri atas beberapa tingkatan. Tingkatan heading kan ada dari h1 sampai h6, nah jika ada beberapa tingkat, cocoknya dipakai tag ini: hgroup.

Tag “header.” Namanya juga header (bagian kepala), biasanya letaknya paling atas. Tapi kalau kita mau yang tidak biasa, sepertinya sah-sah saja kita menaruh tidak di tempat yang paling atas, tetapi masih di bagian atas. Tetapi karena tag yang dipakai adalah ‘header’, insyaAllah posisinya tetaplah sebagai header, hehe..

Tag “footer.” Kurang lebih sama penjelasannya dengan tag ‘header’ di atas, hanya saja karena namanya footer (kaki), ya posisi yang pantes adalah di bagian paling bawah.

Tag “address.” Address artinya alamat. Dan biasanya, web yang baik mencantumkan alamat, terserah alamat nyata ataupun maya. Alamat bisa dipakai oleh pengunjung salah staunya untuk melakukan kontak dengan administrator web.

Nah, tag-tag baru di HTML5 yang saya sebut di atas, idealnya kita pakai semua untuk membentuk sebuah halaman web yang komplit. Berikut ini sebuah template HTML5 yang saya ambil dari Webdesignerdepot.com yang ditulis oleh Dain Miller.

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>HTML5 Template</title>
		<meta name="description" content="">
		<link rel="stylesheet" href="css/style.css">
		<!-- IE6-8 support of HTML5 elements --> <!--[if lt IE 9]>
		<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body>
		<div id="wrapper">
			<header>
				<hgroup>
					<h1>HTML5 Template</h1>
					<h3>Pretty standard template</h3>
				</hgroup>
				<nav>
					<ul>
						<li><a href="#">Home</a></li>
						<li><a href="#">About HTML5</a></li>
					</ul>
				</nav>
			</header>
			<section>
			</section>
		</div>
		<footer>
			<div class="footer_navigation">
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">About HTML5</a></li>
				</ul>
			</div>
			<hgroup>
				<h3>By Dain Miller</h3>
				<h4>from Madison, WI</h4>
			</hgroup>
			<address>
				<a href="mailto:miller.dain@gmail.com">Email Me</a>
			</address>
		</footer>
	</body>
</html>

Penjelasan singkatnya saya berikan saja gambarnya seperti ini..

HTML5 template explained HTML5 template explained

Sumber:
http://www.webdesignerdepot.com/2012/03/back-to-basics-how-to-code-an-html5-template/

Pos ini dipublikasikan di Developer dan tag . Tandai permalink.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s