Lebih Jauh Dengan Elemen-elemen dan Tag HTML5

Apa sebenarnya beda antara HTML lama dan HTML5?

HTML adalah bahasa markup singkatan dari Hypertext Markup Language. Dengan menggunakan HTML Anda dapat dengan mudah membuat laman maya atau website. Fungsionalitasnya tergantung pada berbagai tag atau label yang diberi tanda “<..>” dimana susunannya terdiri dari tag pembuka dan penutup. Misalnya untuk menandai suatu teks ditampilkan dengan font Bold digunakan tag pembuka <b> dan tag penutup </b>.

  • Untuk memutar videp dan mendengarkan musik, HTML lama memerlukan plugin yang dipasang di peranbah seperti Adobe Flash.
  • Mempunayi bentuk interaktif dimana gambar dan objek ditempelkan.
  • HTML direkomendasikan oleh suatu badan internasional W3C singkatan dari World Wide Web Consortium.
  • Tidak mempunyai fitur canvas untuk menggambar di laman web.
  • Di laman dengan HTML lama, cookies digunakan untuk menyimpan login dan sejarah perambahan. Untuk sejumlah besar data yang ingin disimpan, penggunaan cookies dianggap pilihan yang kurang memadai. Jadi perlu cara baru untuk menyimpan data aktifitas perambahan.

Saat ini, HTML5 menjadi fokus pengembangan situs maya. HTML5 dianggap merupakan standar baru dari HTML, HTML DOM dan XHTML.

  • HTML5 dapat memainkan file video dan audio dan mendukung berbagai format.
  • HTML5 termasuk dokumen interaktif yang sangat fungsionak untuk menempelkan grafik.
  • HTML 5 belum direkomendasikan W3C
  • Punya fitur Canvas untuk menggambar grafis dengan JavaScript langsung di laman maya dan berguna untuk mengontrol piksel.
  • Dua metode penyimpanan data diperkenalkan di HTML5 yaitu  local storage dan session storage. Data tidak langsung disampaikan setiap ada permintaan server , tapi digunakan jika hanya ditanya atau diminta. Karena itu dimungkinkan untuk menyimpan sejumlah besar data tanpa mempengaruhi kinerja website.

Elemen-elemen HTML5

Selain fitur-fitur baru yang diperkenalkan, beberapa tag baru juga diperkenalkan dan beberapa tag lama tidak lagi digunakan misalnya  <acronym>, <big>, <dd>, <frame>, <strike> dll. Beberapa tag baru HTML5 yang diperenalkan antara lain  <source>, <keygen>, <footer>, <figure>, <datalist>, <canvas>, <audio> dll. Tabel dibawah memperlihatkan beberapa elemen HTML5 yang sudah sering digunakan dalam mendesain laman maya atau website. Pada tulisan ini hanya akan dijelaskan tag-tag HTML5 yang populer.

html5-elements

Tag <section>

Tag <section> di HTML5 untuk mendefinisikan bagian-bagian di dalam suatu dokumen web seperti header, content, dan footer. Suatu laman web dapat terdiri dari beberapa bagian atau section . Misalnya, dalam laman “About us” terdapat bagian untuk fitur, fasilitas organisasi, pengantar, informasi kontak dll. Dalam trend website saat ini yang sering menonjolkan web satulaman atau onepage sebgaai halaman landing pemasaran, bagian-bagian atau section laman web berada dalam satu halaman penuh kebawah misalnya profil, portofolio, pricing, team, contact dst.

Contoh kode:

 

Tag <article>

Tag <article> digunakan untuk menampilkan konten dari luar (eksternal) yang dapat diambil dari sumber-sumber dari luar laman maya  atau dari penyedia konten seperti website, forum diskusi, artikel media daring,konten dari pengunjung, blog dll. Yang dimaksud konten eksternal adalah konten yang bebas dan dapat didistribusikan kembali setelah dibaca oleh pengunjung dan tidak langsung berkaitan dengan konten situs yang mengandung tag <article> . Pada prinsipnya, tag <article> adalah label pembungkus dari suatu konten dengan ciri-ciri yang sesuai sebagai suatu tulisan, baik yang disampaikan oleh pengunjung, diambil dari sumber lain, ataupun dikirimkan oleh pengelola situs. Karena pada dasarnya yang dimaksud adalah suatu artikel atau tulisan, maka didalam tag <article> terdapat juga tag <header> , <title> dan tag <footer>.

Contoh kode:

 

Tag <aside>

Tag <aside> digunakan untuk membungkus konten yang seringkali berhubungan dengan konten utama. Tapi bisa juga terpisah dari konten utama dan menjadi bagian tersendiri misalnya untuk daftar tulisan populer, daftar komentar, lokasi banner iklan, statistik, dll.

Secara umum Aside dapat digunakan sebagai :

  • Bagian dari elemen artikel , misalnya bagian tertentu didalam artikel yang perlu ditandai seperti suatu quote.
  • Di luar elemen artikel utama atau konten utama dan tidak berhubungan sama sekali dengan konten , misalnya sebagai tempat bannar iklan, dafatar komentar terbaru, tulisan populer, statistik halaman, dll.

Elemen Aside jika digunakan dengan benar dapat berguna untuk lebih memperkaya tampilan suatu laman maya.

Contoh Kode :

 Tag <header>

Sebuah header dokumen umumnya menjadi tempat dimana informasi awal berada misalnya judul dokumen, meta data, dll. Sama seperti dokumen umumnya, tag <header> di HTML5 mempunyai fungsi yang sama yaitu sebagai penand aawal dokumen.

Selain di kepala dokumen, penempatan tag <header> dalam dokumen web dilakukan di beberapa tempat antara lain :

  • Tag <header> sebelum tag <body> (di kepala dokumen)
  • Tag <header> setelah tag <body> dan berada di luar tag <article>
  • Tag <header> didalam tag <article>

Didalam tag <header> yang berada setelah tag <body> dan juga yang ada didalam tag <article>,  judul suatu dokumen web atau laman maya, atau judul suatu konten,  dapat diformat misalnya judul dengan tag heading <h1>, sub judul dengan <h2> dan seterusnya. Di bagian tag <header> untuk tubuh dokumen juga terletak logo dan tagline suatu halaman. Misalnya kalau kita membuat website suatu perusahaan logo disertai dengan moto perusahaan. Selain itu, header di tubuh dokumen  juga menjadi lokasi navigasi, menu sosial media, form search versi ringkas, banner iklan, alamat kantor, no telpon, dan lain-lain. Tetapi umumnya di laman website bagian header menjadi tempat logo, tagline, navigasi dan form search sederhana. Biasanya tag <header> menjadi awal sebuah dokumen, tapi untuk HTML5 tag <header> bisa digunakan berkali-kali di dalam suatu laman. Misalnya, di dalam tag <article> terdapat juga tag <header> dan tag <footer> dari suatu <article>.

Contoh Kode :

 

 

Tag <hgroup>

Tag <hgroup> menyatakan heading dari suatu bagian atau section atau suatu dokumen. Tag <hgroup> dapat juga dianggap sebagai outline dari judul dokumen.

Tag hgroup digunakan untuk mengumpulkan elemen-elemen header <h1> sampai <h6> jika bagian heading suatu dokumen mempunyai banyak jenis heading yang bertingkat bobot kepentingannya.

Contoh Kode:

 

Tag Navigasi  – <nav>

Tag <nav> menyatakan bagian dari suatu halaman yang dihubungkan secara hyperlink dengan dokumen / halaman lain atau di kaitkan dengan suatu bagian di halaman yang sama. Navigasi seringkali disebut sebagai menu suatu halaman website, atau di kaitkan dengan suatu domain atau website lain di Internet. Salah satu bentuk kumpulan hyperlink yang bukan navigasi adalah sitemap yang menyusun hirarki terstruktur dari suatu website secara keseluruhan. Tag <nav> bisa ditempatkan didalam tag <header> atau <footer>, atau berada diluar.

Contoh Kode:

 

Tag<footer>

Tag  <footer> adalah elemen HTML5 untuk bagian suatu dokumen atau section yang berada di posisi paling bawah sesuai dengan namanya. Footer suatu laman website bisa berisi informasi copyright, powered by, nama perusahaan, nama penulsi blog, terms of use atau privacy, disclaimer, informasi kontak dll. Namun, umumnya bagian footer dapat berisi apa saja selain isi bakunya tersebut. Pada beberapa kasus footer juga menjadi tempat dimana widget laman web berada termasuk banner iklan jika memang dimungkinkan. karena posisinya sangat menentukan tag <footer> tidak boleh berada di dalam tag  <header> atau tag <footer> lainnya (footer didalam footer, jeruk makan jeruk). Demikian juga sebaliknya, tag <header> pun tidak dibolehkan berada didalam tag <footer> atau didalam tag <header> lainnya.

Contoh Kode:

 

Tag <figure>

Tag <figure> digubakan untuk membungkus konten tunggal yang bebas dalam suatu aliran dokumen. Jadi, ia bisa ditempatkan dimana saja di dalam dokumen, di luar dokumen, di sampaing halaman, di tengah, di suatu halaman tersendiri atau suatu apendik tanpa mempengaruhi aliran dokumen. Tag <figue> bukan saja menjadi wadah atau tempat sebuah gambar (image) tetapi juga file dengan format audio, video, grafik, tabel dll.

Contoh Kode :

 

Tag <figcaption>

Tag <figcaption> digunakan sebagai label untuk keterangan gambar/foto ata objek . Jadi tag ini digunakan bersama-sama dengan tag <figure> menjadi satu kesatuan yang saling melengkapi.  Tag figcaption sebenarnya pilihan saja, boleh dipakai boleh tidak. Namun ada aturan kalau dalam satu bungkus <figure> , berapa pun jumlah gambarnya, sebaiknya hanya ad asatu tag <figcaption> saja. Tag figcaption dapat ditempatkan sebelum dan sesudah objek.

Contoh Kode :

 

VIDEO Tag

Tag Video ditulis dengan kode markup <video> digunakan untuk membungkus file format video termasuk potongan movie, streaming video, dll. Cara menyisipkan video sama dengan image/foto. Selain itu dapat digunakan bersama CSS dan Javascript, dan digunakan bersama berbagai plugin seperti Flash atau Quicktime.

Contoh kode :

contoh kedua dengan beberapa file video :

Tag video dapat digunakan untuk memainkan file video di laman maya tanpa harus tergantung kepada keberadaan plugin pihak ketiga seperti Flash yang terpasang di perambah.

Atribut-atribut Tag Video

  • Auto-play: Video langsung jalan setelah laman diunduh.
  • Auto-buffer: By default, file video tidak diunduh sebelum menekan tombol play. Dengan adanya fitur ini pengunduhan video dimulai setelah laman diakses.
  • Controls: by default , video tidak menyertakan  pengaturan apapun juga seperti tombol play/pause, volume, dll. Jadi jika ingin atribut pengaturan atribut control dapat digunakan.
  • Height/width: Ukuran video

Tag <canvas>

Tag canvas digunakan untuk menggambar grafik 2-D seperti bentuk lingkaran , segiempat di laman maya langsung dengan menggunakan JavaScript. Selain dapat digunakan untuk menggambar grafis, dapat dibuat juga komposisi foto dan konten dinamis seperti animasi, game, dll.

 

Contoh kode :

Atribut tag  Canvas :

Terdapat dua atribut yang terkait tag canvas untuk mengatur ruang vertikal dan horisontal dalam suatu laman maya (web page) .

AtRIBUT NILAI DesKRIKRIPSI ATRIBUT
height pixels mendefinisikan tinggi canvas di laman maya dalam satua piksel
width pixels mendefinisikan lebar canvas di laman maya dalam satuan piksel.

Tag <embed>

Embed atau tempel berarti “menyisipkan sesuatu ke suatu medium”. Di HTML5, plug in ataupun konten yang ditempelkan didefinisikan dengan tag <embed> . File yang ditempelkan adalah semua jenis file multimedia, aplikasi, atau konten lain yang bukan standar HTML.

Contoh kode:

 

Tinggalkan Balasan

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