Dalam 3 tutorial sebelumnya kita sudah membahas mengenai fitur HTML5, nah dalam tutorial kali ini warung belajar akan membahas kembali mengenai fitur yang diberikan oleh HTML5, yaitu semantic tag.
HTML5 telah menambahkan bebarapa tag baru, dan beberapa dari tag tersebut memiliki fungsi untuk membuat struktur dari dari halaman web atau bisa kita sebut sebagai semantic tag.
Sebenarnya semantic tag itu apa sih ??
Jika ditutorial sebelumnya kita sudah membahas mengenai beberapa tag seperti tag <table> yang digunakan untuk membuat tabel, tag <p> untuk membuat paragraf dan masih banyak lagi tag – tag lain yang memiliki fungsi masing – masing, nah tag – tag yang memiliki fungsi masing – masing ini yang termasuk ke dalam semantic tag
Memangnya ada tag yang tidak memiliki fungsi ??
Jawabannya ada, jika anda pernah mengetahui tag <div> dan <span> kedua tag ini tidak memiliki arti apa – apa, meskipun tidak memiliki arti apa – apa kedua tag ini sering digunakan untuk membuat struktur halaman website.
Kedua tag ini akan memiliki fungsi jika kita menambahkan style CSS didalamnya dengan peran attribute ID dan class, untuk ID dan class akan kita pelajari di bab mengenai CSS.
Jika anda pernah menemui tag seperti <div id=”header”> tag ini biasanya digunakan untuk membuat header dari website, <div id=”footer”> tag ini biasanya digunakan untuk membuat footer dari website, menu biasanya menggunakan <div id=”menu”> nah peran id dan class sangat berperan disini sebagai inisialisasi dari tag <div> yang ditulis sebagai strukutur dari halaman website.
Nah pada HTML5 telah memperkenalkan beberapa tag baru yang dapat digunakan untuk menggantikan tag <div> yang berperan sebagai struktur dari halaman website, beberapa tag tersebut antara lain :
- <header> digunakan untuk memberikan tanda bagian atas dari halaman web atau biasanya kita sebut sebagai header
- <footer> digunakan untuk memberikan tanda bagian bawah dari halaman web atau biasanya kita sebut sebagai footer
apakah hanya 2 saja ??
tidak masih banyak lagi, antara lain :
- <header>
- <article>
- <aside>
- <figcaption>
- <figure>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
- <footer>
Tidak seperti tag semantic lainnya contohnya tag <h1> yang akan terdapat text style ketika menggunakan tag ini, akan ditampilkan dengan ukuran yang lebih besar, untuk tag semantic diatas tidak memiliki style sama sekali, sehingga anda perlu menambahkan style css didalam tag semantic diatas, jadi fungsinya hampir sama dengan tag <div> ataupun <span> yang memerlukan style css, hanya saja dengan adanya tag semantic baru ini anda dapat lebih mudah membuat struktur halaman web, karena nama tagnya lebih mudah sebagai penanda seperti <header> untuk membuat header, ada <footer> untuk membuat footer, sehingga tidak selalu menggunakan tag <div> saja.
Pembuatan strukutur web dengan menggunakan tag <div>
Sebelum adanya fitur tag semantic yang memiliki fungsi untuk membuat struktur web, kebanyakan orang akan menggunakan tag <div> sebagai pembuatan struktur dari halaman website, dalam contoh dibawah ini kita akan mencoba membuat struktur dasar halaman web dengan menggunakan tag <div> dengan menggunakan id sebagai keterangan dari bagian strukutur webnya, untuk strukutur web kurang lebih seperti berikut :
untuk membuat struktur web seperti diatas skrip HTML yang perlu kita tulis seperti berikut ini :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Struktur Web</title>
</head>
<body>
<div id="header_web">
<h1>Title Website</h1>
<img src="logo_website_anda.png" />
</div>
<div id="menu_web">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Hubungi Kami</a></li>
</ul>
</div>
<div id="sidebar_web">
<h1>Artikel Terpopuler</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
<div id="content_web">
<div id="article_1">
<div id="article_header_1">
<h1>Judul Artikel 1</h1>
</div>
<p>...Isi dari Artikel 1...</p>
</div>
<div id="article_2">
<div id="article_header_2">
<h1>Judul Artikel 2</h1>
</div>
<p>...Isi dari Artikel 2..</p>
</div>
</div>
<div id="footer_web">
<p>Footer - Copyright Warung Belajar 2017</p>
</div>
</body>
</html>terlihat seluruh bagian struktur dari webnya menggunakan <div> yang membedakan hanyalah id pada bagian setiap tag <div>, yang menjelaskan bagian di setiap struktur websitenya.
Membuat Struktur Web dengan menggunakan tag Semantic di HTML5
Secara Konsep caranya sama, yang membedakan adalah jika di cara sebelumnya kita hanya menggunakan <div> diseluruh bagian strukturnya yang membedakan hanyalah id dibagian setiap tag <div>.
Nah dengan menggunakan tag semantic HTML5 nantinya setiap struktur akan menggunakan tag yang berbeda seperti <header><footer><menu> dan masih banyak yang lain, baik kita akan pelajari dulu beberapa tag semantic yang bisa anda gunakan untuk membuat struktur halaman web.
Tag <header>
Tag <header> digunakan untuk bagian header dari sebuah halaman web, didalam tag <header> ini bisa anda letakkan logo ataupun title dari website, anda juga bisa menggunakan tag<header> ini lebih dari satu kali dalam 1 halaman website, semisal anda ingin menggunakan tag <header> sebagai header dari artikel juga bisa, nanti tergantung style yang anda berikan di bagian tag <header> pada masing – masing strukutur websitenya, contoh penggunaannya sebagai berikut :
<header>
<h1>Title Website</h1>
<img src="logo_website.png" />
</header>Tag <nav>
Tag <nav> digunakan sebagai pembungkus (containter) dari menu navigasi, contoh penggunaannya sebagai berikut :
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Hubungi Kami</a></li>
</ul>
</nav>Tag <section>
Tag <section> digunakan sebagai pembungkus (container) pada bagian content dari website, semisal dalam satu halaman website terdapat content yang memiliki bagian – bagian berbeda, semisal bagian atas ada artikel, lalu bagian tengah ada gallery, bagian bawah ada sebuah halaman form untuk pesan, nah untuk bagian yang berbeda pada 1 halaman content anda dapat menggunakan beberapa tag <section>, tetapi jika dalam satu content web anda hanya ada artikel saja, anda bisa menggunakan tag <section> saja, contoh penggunaannya sebagai berikut :
<section>
<article>
<header>
<h1>Judul Artikel 1</h1>
</header>
<p>Isi Artikel 1</p>
</article>
<article>
<header>
<h1>Judul Artikel 2</h1>
</header>
<p>Isi Artikel 2</p>
</article>
</section>Tag <main>
Tag <main> digunakan sebagai pembungkus (containter) pada bagian utama dari sebuah halaman web, ada baiknya anda menggunakan tag <main> ini hanya 1 kali pada halaman web yang anda buat, contoh penggunaannya sebagai berikut :
<main>
<article>
<header>
<h1>Judul Artikel 1</h1>
</header>
<p>Isi Artikel 1</p>
</article>
<article>
<header>
<h1>Judul Artikel 2</h1>
</header>
<p>Isi Artikel 2</p>
</article>
</main>Tag <article>
Tag <article> digunakan untuk membungkus content web yang bentuknya adalah artikel, biasanya tag <article> ini berada di dalam tag <section> ataupun tag <main>, contoh penggunaannya sebagai berikut :
<article>
<header>
<h1>Judul Artikel 1</h1>
</header>
<p>Isi Artikel 1</p>
</article>Tag <aside>
Tag <aside> digunakan untuk memberikan tanda pada bagian struktur web tersebut bukan merupakan konten utama dari web, tetapi memiliki keterkaitan dengan konten utamanya, biasanya tag ini digunakan dibagian sidebar, karena dibagian sidebar biasanya juga berisi bagian yang berhubungan dengan artikel, bisa juga diletakkan dibagian artikel sebagai bagian tambahan dari artikel, contoh penggunaannya sebagai berikut :
<aside>
<h1>Artikel Terpopuler</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>Tag <footer>
Tag <footer> digunakan untuk membungkus (containter) bagian bawah dari website (footer), bisa anda gunakan untuk menampilkan bagian keterangan dari website, seperti bagian copyright, ataupun link dari social media dari web anda, contoh penggunaannya sebagai berikut :
<footer>
<p>Footer - Copyright Warung Belajar 2021</p>
</footer>Setelah anda memahami mengenai kegunaan dari masing – masing tag semantic yang bisa digunakan untuk membuat struktur dari halaman website, kali ini kita akan menuliskan skrip untuk membuat strukutur halaman website seperti gambar dibawah ini :
skripnya kurang lebih seperti berikut ini :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Semantic HTML5</title>
</head>
<body>
<header>
<h1>Title Website</h1>
<img src="logo_website.png" />
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Hubungi Kami</a></li>
</ul>
</nav>
<aside>
<h1>Artikel Terpopuler</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>
<section>
<article>
<header>
<h1>Judul Artikel 1</h1>
</header>
<p>Isi Artikel 1</p>
</article>
<article>
<header>
<h1>Judul Artikel 2</h1>
</header>
<p>Isi Artikel 2</p>
</article>
</section>
<footer>
<p>Footer - Copyright Warung Belajar 2017</p>
</footer>
</body>
</html>terlihat untuk penulisannya berbeda dengan skrip sebelumnya karena kita menggunakan tag semantic, anda tidak lagi menggunakan tag <div> tetapi menggunakan tag seperti <header><footer><aside><article> sehingga lebih mudah dipahami pada saat anda melakukan penulisan skrip, walaupun anda tetap menggunakan ID sebagai penghubung dengan kode css untuk style halaman web tersebut.
Penggunaan tag semantic ini juga akan mempengaruhi SEO (Search Engine Optimization) karena pada struktur halamannya menggunakan tag <header><footer><menu> dan masih banyak lagi, akan memperjelas struktur halaman dari web yang anda buat, sehingga mesin pencari akan lebih mudah lagi melakukan index dari bagian – bagian struktur website anda, baik sekian dulu pembahasan mengenai tag Semantic pada HTML5, jika ada yang ingin didiskusikan silahkan di kolom komentar, sampai jumpa di tutorial selanjutnya.