Apa itu elemen Semantic pada HTML5

Apa itu elemen Semantic pada HTML5

43

Pada tutorial kali ini akan membahas tentang Apa itu elemen Semantic pada HTML5 ?. Menurut Wikipedia, Semantik berasal dari bahasa Yunani yang berarti suatu cabang linguistik yang mempelajari arti/makna pada suatu bahasa / kode / representasi lainnya.

Singkatnya Semantik adalah pembelajaran tentang Makna.

HTML5 membawa ilmu baru yang dikenal dengan istilah HTML5 Semantic. HTML5 Semantic ini memperkenalkan elemen baru, yang dimana elemen ini memiliki makna dalam penggunaanya, contohnya seperti elemen <header>.

Elemen <header> memiliki makna untuk digunakan sebagai kepala halaman pada halaman Website. Di dalam elemen <header> ini dapat anda masukan seperti menu, slider, gambar header dan konten lainnya. Namun, elemen <header> tidak akan memberi pengaruh apa pun pada halaman.

Sejatinya memang digunakan sebagai penanda dalam kode sumber kalau bagian ini merupakan bagian kepala halaman, karena dulu sebelum HTML5, untuk mendefinisikan bagian header, maka para developer menggunakan konsep <div id=”header”>.

Jadi, intinya elemen Semantic memiliki makna bagi Browser dan juga Developer.

Elemen Semantic lainnya adalah <article>, <aside>, <details>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, <time> :


Elemen Article

Seperti namanya elemen ini digunakan sebagai section artikel pada halaman website.

XHTML

<article>

<h1>Apa itu HTML</h1>

<p>HTML adalah singkatan dari Hypertext Markup Language, bahasa ini digunakan untuk membangun halaman Website. File HTML berformat <i>namaFile</i>.html. Dalam HTML anda dapat memasukan Gambar, Video, Audio, Table, dan lain sebagainya.</p>

<p>Dalam membangun Website, pemakaian HTML dikombinasikan dengan bahasa lainnya seperti CSS untuk menangani Design, Javascript untuk membuat halaman website lebih interaktif, MySQL sebagai penyimpan data, dan PHP yang dapat membuat data dalam Website menjadi lebih dinamis (dapat dimasukan, dirubah, diseleksi, dan dihapus).</p>

</article>


Elemen Aside

Elemen <aside>, dapat anda gunakan sebagai container bagi content yang akan anda letakkan pada bilah sisi kanan / kiri dari halaman website. Contohnya adalah Sidebar, nah dalam Sidebar ini biasanya memuat beberapa menu.

XHTML

<aside>

<h4>Pakaian</h4>

<ul>

   <li>Baju</li>

   <li>Jaket</li>

   <li>Celana</li>

   <li>Topi</li>

</ul>

</aside>


Elemen Details dan Summary

Elemen <details> digunakan sebagai perangkum informasi bagi user dalam bentuk widget yang dapat dibuka dan di tutup kembali.

Dibuka untuk di baca isinya, dan bila telah selesai memahami isinya, widget ini dapat anda tutup kembali.

Pengguna’annya di kombinasikan dengan tag <summary>.

XHTML

<details>

<summary>OOP</summary>

<p>Kependekan dari Object Oriented Programming, merupakan cabang ilmu pemrograman dimana programmer membuat data dalam bentuk objek, method, dan property.</p>

</details>

Keadaan sebelum widget di buka :

Apa itu elemen Semantic pada HTML5

Keadaan setelah widget dibuka :

apa itu elemen semantic


Elemen Footer

Sesuai namanya, elemen <footer> digunakan untuk merangkum section footer pada halaman website. Di dalamnya dapat berupa informasi hak cipta, menu bawah, kebijakan privasi, atau sponsor.

XHTML

<footer>

&copy;2016 lautankode.com

<ul>

  <li><a href="#">Tentang Kami</a></li>

  <li><a href="#">Kebijakan Privasi</a></li>

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

</ul>

</footer>

Elemen Header

Sedangkan elemen <header> digunakan untuk merangkum bagian – bagian kepala halaman seperti slider, banner, dan highlight.

XHTML

<!DOCTYPE html>

<html>

<head>

<title></title>

<style type="text/css">

  ul > li{

   display: inline;

   margin-left: 10px;

  }

</style>

</head>

<body>

<header>

<nav>

  <ul>

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

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

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

  </ul>

</nav>

<div id="slider">

  <h2>Ini Bagian Slider</h2>

</div>

</header>

</body>

</html>

Elemen Main

Elemen <main> dapat anda gunakan untuk merangkum inti artikel pada halaman website.

XHTML

<main>

  <article>

    <h1>Ini Judul Post</h1>

    <p>Ini Konten Post Ini Konten Post Ini Konten Post Ini Konten Post Ini Konten Post Ini Konten Post Ini Konten Post Ini Konten Post Ini Konten Post Ini Konten Post Ini Konten Post Ini Konten Post Ini Konten Post Ini Konten Post Ini Konten Post Ini Konten Post Ini Konten Post.</p>

    <p>Ini Konten Post Ini Konten Post Ini Konten Post Ini Konten Post Ini Konten Post Ini Konten Post Ini Konten Post Ini Konten Post Ini Konten Post Ini Konten Post Ini Konten Post Ini Konten Post Ini Konten Post Ini Konten Post Ini Konten Post Ini Konten Post Ini Konten Post.</p>

  </article>

</main>

Elemen Mark

Elemen <mark> digunakan untuk memberi efek stabilo pada teks.

XHTML

<mark>Praktek</mark> lebih baik daripada 1000 Teori

Elemen Nav

Elemen <nav> digunakan untuk merangkum menu.

XHTML

<nav>

  <a href="#java">Java</a>

  <a href="#php">PHP</a>

  <a href="#python">Python</a>

  <a href="#c++">C++</a>

</nav>

Elemen Section

Elemen <section> dapat anda gunakan untuk membagi beberapa section pada halaman website.

XHTML

<section>

<h1>Apa itu Java</h1>

<p>Java adalah bahasa pemrograman Desktop yang berbasis objek.</p>

</section>



<section>

<h1>Apa itu PHP</h1>

<p>PHP adalah bahasa pemrograman website yang berjalan pada sisi Server. PHP juga termasuk bahasa pemrograman berbasis Objek.</p>

</section>



<section>

<h1>Apa itu CSS</h1>

<p>CSS adalah kependekan dari Cascading Style Sheet, yang dapat digunakan untuk memberi keindahan pada halaman Website agar Website tidak terkesan monoton.</p>

</section>

Elemen Time

elemen <time> mendefinisikan waktu tahun, bulan, tanggal, jam, menit dan detik.

XHTML

<p>Saya berangkat kerja pukul <time>08:00</time>.</p>

Demikian tutorial dari Apa itu elemen Semantic pada HTML5.

Keywords: elemen semantic html5, apa itu elemen semantic html5

Share: