Matawebsite Promo Lebaran 2022

Layouting Menggunakan Semantik Tag HTML5

date 27 May 2021
date Sulfikardi
date 1646
date Web Design
Layouting Menggunakan Semantik Tag HTML5

HTML5 banyak memperkenalkan tag dan sebagian besar diantaranya berfungsi untuk membuat struktur HTML, atau yang dikenal dengan semantic tag.Semantic Tag atau Semantic Markup, adalah sebutan untuk tag HTML yang memiliki arti atau makna.


HTML ditujukan untuk membuat struktur halaman web. Misalnya tag <p> , digunakan untuk membuat paragraf, tag <h1> untuk membuat judul/header, dan tag <table> untuk membuat tabel, kesemua tag ini memiliki ‘arti‘ yang jelas, karena itu termasuk kedalam semantic tag.


Sedangkan tag seperti <div> dan <span> tidak memiliki arti apa-apa, namun sering dijumpai untuk membuat struktur halaman. Jika anda pernah merancang web menggunakan HTML, tag <div> adalah tag yang sangat sering digunakan. Untuk membuat bagian header yang berisi menu navigasi atau logo, biasanya kita menggunakan tag <div id=”header”>, dan untuk membuat footer biasanya menggunakan <div id=”footer”>, sedangkan untuk menu utama bisa menggunakan <div id=”menu”> atau <div id=”nav”>.


HTML5 memperkenalkan tag-tag baru yang ditujukan untuk mengatasi hal ini. Daripada menggunakan <div id=”header”>, kita bisa menggunakan tag <header> sebagai penanda bagian atas halaman HTML, dan tag <footer> untuk penanda bagian bawah halaman web.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Semantic HTML5</title>

</head>

<body>

    <header>

        <h1>Judul Halaman Website</h1>

    </header>

    <nav>

        <ul>

            <li><a href="#">Home</a></li>

            <li><a href="#">Blog</a></li>

        </ul>

    </nav>

    <section>

        <article>

            <h1>Judul Artikel</h1>

            <p>Deskripsi Artikel</p>

        </article>

        <article>

            <h1>Judul Artikel 2</h1>

            <p>Deskripsi Artikel</p>

        </article>

        <aside>

            <h2>Artikel Terkait</h2>

            <ul>

                <li><a href="#">Artikel 1</a></li>

                <li><a href="#">Artikel 2</a></li>

                <li><a href="#">Artikel 3</a></li>

            </ul>

        </aside>

    </section>

    <footer>

        <p>Copyright &copy; 2020 by <a href="#">matawebsite.com</a></p>

    </footer>

</body>

</html>

Penggunaan semantic tag dari HTML5 juga akan bermanfaat bagi SEO (Search Engine Optimization), disebabkan struktur halamannya akan menjadi lebih jelas. Mesin pencari juga bisa lebih memprioritaskan bagian mana yang perlu diberikan penekanan (seperti <header> atau <article>) dan bagian mana yang hanya berupa keterangan ( seperti <aside> atau <footer> ).

Beberapa semantic tag yang dibawa oleh HTML5 adalah sebagai berikut:

1. <main>

Tag <main> digunakan sebagai pembungkus (containter) pada bagian utama dari     sebuah halaman web,element main memiliki sifat block.

2. <header>

Tag <header> digunakan untuk bagian header dari sebuah halaman web, didalam tag     <header> ini bisa anda menambahkan element lain.Secara default header memiliki sifat block.

3. <nav>

Tag <nav> digunakan sebagai pembungkus (containter) dari menu navigasi  sebuah website.

4. <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>.

5. <article>

Tag <article> digunakan untuk membungkus content web yang bentuknya berupa artikel.

6. <aside>

Tag <aside> digunakan untuk memberikan tanda pada bagian struktur web, bahwa kontent 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.

7. <figure> & <figcaption>  

Tag <figure> menentukan konten mandiri, seperti ilustrasi, diagram, foto, daftar kode, dll. Sedangkan tag <figcaption> mendefinisikan caption untuk elemen <figure>.

8. <mark>

Tag <mark> memiliki type/sifat inline, artinya panjang atau lebar element ini hanya sebatas text yang ada di dalamnya. Element <mark> biasa digunakan untuk     membuat text berwarna, secara default warnanya kuning.

9. <summary>

Tag <summary> digunakan untuk Mendefinisikan sebuah judul terlihat untuk <details> elemen.

10. <time>

Element <time> bisa digunakan mendefinisikan waktu, element ini memiliki type inline.

11. <footer>

Tag <footer> digunakan untuk membungkus (containter) bagian bawah dari website (footer), bisa  gunakan untuk menampilkan bagian keterangan dari website, seperti bagian copyright, ataupun link dari social media dari web.




 

Matawebsite Promo
sul.png

Sulfikardi

Web Design & Web Programming

Halo, saya seorang Web Developer yang terbiasa mengembangkan website menggunakan HTML, CSS, Javascript, PHP, MYSQL, dan Laravel. Disini saya akan membagikan pengalaman saya dalam membangun dan mengembangan website yang responsif dan dinamis

Artikel Populer

Halo, ada yang bisa kami bantu?
Daftar Sekarang