Cara Membuat Struktur pada HTML5

belajar HTML dan CSS untuk pemula

Pada  tutorial belajar HTML5 saat ini kita akan mencoba menerapkan semantic tag yang kita pelajari dalam tutorial sebelumnya untuk membuat struktur HTML memakai tag HTML5 seperti <header>, <nav>, <section>, <article>, <aside> dan <footer>.

Membuat Halaman HTML dengan Tag <div>

Sebelum era HTML5 yang mempunyai tag untuk membuat struktur halaman yang lengkap, web developer umumnya memakai tag <div> dengan atribut id atau class untuk memisahkan bagian-bagian struktur dalam halaman HTML, seperti header, footer, dan sidebar.

Untuk membuat struktur diatas, berikut ialah kode HTMLnya:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Belajar HTML5</title>
</head>
<body>
<div id="header">
<h1>Judul Website</h1>
<img src="logo_website.jpg" />
</div>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
    
<div id="content">
<div id="article_1">
<div id="article_header_1">
<h1>Judul Artikel 1</h1>
<h2>Sub Judul Artikel 1</h2>
</div>
<p>...Ini merupakan isi dari artikel 1...</p>
</div>
<div id="article_2">
<div id="article_header_2">
<h1>Judul Artikel 2</h1>
<h2>Sub Judul Artikel 2</h2>
</div>
<p>...Ini merupakan isi dari artikel 2...</p>
</div>
</div>
<div id="sidebar">
<h1>Artikel Paling baru</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
</ul>
    </div>
<div id="footer">
<p>Footer - Copyright Duniailkom 2014</p>
</div>
</body>
</html>

Kode diatas sepenuhnya valid dan sangat biasa dipakai sampai sekarang ini. Namun, HTML 5 mencoba mengganti semua tag <div> jadi semantic tag yang lebih berarti.

Semantic Tag untuk membuat Struktur web dengan HTML5

Seperti yang sudah kita bahas pada tutorial sebelumnya tentang semantic tag, HTML5 mencoba menggantikan tag ‘tanpa arti‘ <div> untuk biasa dipakai untuk membuat struktur halaman web. Tag-tag yang dapat kita pakai untuk kebutuhan ini merupakan <header>, <nav>, <section>, <article>, <aside> dan <footer>.

Berikut ialah pembahasan beberapa tag HTML5 yang diperuntukkan bagi membuat struktur halaman:

Penjelasan Tag <header>

Tag <header> dipakai untuk bagian halaman web yang merupakan header. Tag ini dapat muncul lebih dari 1 kali, bergantung kebutuhan. Bagian atas web dimana kita menaruh logo dan judul situs ialah tempat terbaik untuk tag <header>. Tetapi pada bagian atas artikel dinama terdapat judul dan sub judul artikel juga boleh di ‘bungkus‘ dengan tag <header>.

Contoh pemakaian tag <header>:

<header>
<h1>Judul Website</h1>
<img src=”logo_website.png” />
</header>

Penjelasan Tag <nav>

Tag <nav> dipakai sebagai ‘container‘ dari menu navigasi. Disarankan dipakai untuk menu utama yang dirasa penting seperti di bagian header.

Contoh pemakaian tag <nav>:

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

Penjelasan Tag <section>

Tag <section> dipakai untuk memisahkan bagian-bagian dari struktur web. Tag ini dapat dipakai sebagai container untuk kumpulan artikel, gallery, atau bagian lain dari halaman web yang harus pemisahan. Meskipun tag <section> terkesan ‘generik’, namun bila yang kita perlukan cuma kontainer tanpa makna apa-apa, disarankan tetap memakai tag <div>.

Bagian utama dimana kontent berada bisa ‘dibungkus’ memakai tag <section>. Dan bila halaman itu mempunyai banyak bagian yang secara logika bisa dipisah, bisa memakai beberapa tag <section>.

Contoh pemakaian tag <section>:

<section>
<h1>Judul 1</h1>
<p>...Kumpulan dari konten...</p>
</section>
<section>
<h1>Judul 1</h1>
<p>...Kumpulan dari konten...</p>
</section>

Penjelasan Tag <main>

Tag <main> cocok dipakai untuk tandanya bagian utama dari sebuah halaman. Berbeda dari tag <section>, tag <main> umumnya cuma dipakai 1 kali untuk bagian terpenting, yang umumnya berupa konten/artikel utama.

Contoh pemakaian tag <main>:

<main>
<h1>Judul Utama</h1>
<p>...penjelasan...</p>
<article>
<h2>Judul Artikel 1</h2>
<p>...penjelasan artikel 1...</p>
<p>... </p>
<p>... </p>
</article>
<article>
<h2>Judul Artikel 2</h2>
<p>...penjelasan artikel 2...</p>
<p>... </p>
<p>... </p>
</article>
</main>

Penjelasan Tag <article>

Tag <article> bertujuan untuk menampung konten web yang merupakan.. (ya, kamu betul) artikel. Umumnya tag ini ada di dalam tag <section> atau <main>. Tag ini cocok sebagai container untuk artikel pada sebuah blog.

Contoh pemakaian tag <article>:

<article>
<h2>Judul Artikel</h2>
<p>...penjelasan artikel...</p>
<p>... </p>
<p>... </p>
</article>

Penjelasan Tag <aside>

Tag <aside> bertujuan untuk menandai bagian web yang bukan berisi konten utama, namun mempunyai kaitan dengan artikel yang sekarang ini ditampilkan. Bagian paling pas untuk tag <aside> ialah sidebar. Sebab pada sidebar bisa terdiri dari bermacam-macam konten yang tidak langsung terkait dengan konten utama seperti ’10 artikel paling baru’, atau ‘5 komentar paling baru’. Selain untuk sidebar, tag <aside> juga dapat dipakai di dalam artikel untuk menandai bagian tambahan.

Contoh pemakaian tag <aside>:

<article>
<h2>Judul Artikel 1</h2>
<p>...penjelasan artikel 1...</p>
<p>... </p>
<p>... </p>
</article>
<aside>
<p>...penjelasan tambahan...</p>
</aside>

Penjelasan Tag <footer>

Tag <footer> biasannya dipakai di bagian bawah halaman, dimana kita menampilkan beberapa informasi tentang website. Walapun pemakaian paling jelas ialah untuk bagian footer halaman (menaruh copyright, about us, dll), tag ini juga cocok dipakai di bagian bawah artikel untuk menampung informasi tambahan seperti ‘tentang penulis‘ ataupun link untuk share ke media sosial.

Contoh pemakaian tag <footer>:

<main>
<h2>Judul Artikel 1</h2>
<p>...penjelasan artikel 1...</p>
<p>... </p>
<p>... </p>
</main>
<footer>
<p>...copyright 2014 duniailkom...</p>
</footer>

Membuat Struktur Halaman HTML dengan tag HTML5

Dengan memakai tag-tag HTML5 diatas, kita akan merevisi struktur web sebelumnya dengan memakai HTML5. Struktur yang akan kita buat sama dengan contoh

 

Berikut ialah kode HTML5 yang dipakai untuk membuat struktur itu:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Belajar HTML5</title>
</head>
<body>
<header>
<h1>Judul Website</h1>
<img src="logo_website.jpg" />
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
   
<section>
<article>
<header>
<h1>Judul Artikel 1</h1>
<h2>Sub Judul Artikel 1</h2>
</header>
<p>...Ini merupakan isi dari artikel 1...</p>
</article>
<article>
<header>
<h1>Judul Artikel 2</h1>
<h2>Sub Judul Artikel 2</h2>
</header>
<p>...Ini merupakan isi dari artikel 2...</p>
</article>
</section>
<aside>
<h1>Artikel Paling baru</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</aside>
<footer>
<p>Footer - Copyright Duniailkom 2014</p>
</footer>
</body>
</html>

Perhatikan bahwa pada kode diatas saya memakai 6 semantic tag dari HTML5, yaitu <header>, <nav>, <section>, <artikel>, <aside> dan <footer>. Susunan kode HTML itu mungkin lebih gampang dimengerti bila kamu pernah merancang layout halaman HTML dengan CSS.

Pemakaian semantic tag dari HTML5 juga akan berguna untuk SEO (Search Engine Optimization). Struktur halaman bakal lebih jelas, sehingga mesin pencari bisa mengutamakan bagian mana yang harus diberikan penekanan (seperti <header> atau <article>) dan bagian mana yang cuma berupa keterangan (seperti <aside> atau <footer>).


Butuh Web Developer Makassar atau Jasa SEO di Makassar yang bergaransi? Jangan ragu dengan infanthree.com. Kami juga penyedia Jasa Pembuatan Aplikasi Android di Makassar yang terkemuka. Selain itu ada layanan SEM, SMM, Internet Marketing Agency Makassar dan Social Media, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik, hingga pelatihan komputer dan internet marketing.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *