Latihan coding web Dasar – Pengenalan HTML5

145efe2aab7ca9959397d6344180b658HTML5 (tanpa spasi antara “HTML” dan  “5”) merupakan markup language yang digunakan untuk membuat struktur dan menampilkan konten pada World Wide Web dan merupakan versi ke 5 dan standar dari HTML.

Sedikit informasi, markup language atau bahasa Markup adalah sistem anotasi dokumen dengan cara yang secara sintaks dapat menyamarkan dokumen tersebut terhadap teks (terjemahan asli: is a system for annotating a document in a way that is syntactically distinguishable from the text). Ide dan istilah ini berkembang dari istilah “marking up” pada manuskrip tulisan pada kertas, contoh, pada instruksi revisi oleh editor, secara konvesional tertulis menggunakan tinta biru pada manuskrip pengarang.

Kembali ke HTML5. HTML5 ini dipublikasikan pada bulan Oktober tahun 2014 oleh konsorsium dunia untuk WWW (World Wide Web Consortium – W3C) untuk meningkatkan bahasa HTML lama dengan dukungan untuk sumber daya multimedia terbaru, namun tetap menjaga agar bahasa dan sumber daya multimedia tersebut tetap dapat dengan mudah dibaca oleh pengguna dalam hal ini manusia, dan secara konsisten dapat dimengerti oleh komputer dan perangkat seperti web browser, parser dan lain sebagainya. HTML5 bermaksud untuk memasukkan/mencakupkan tidak hanya HTML 4 namun juga XHTML 1 dan DOM Level 2 HTML.

HTML5 mencakup model pemrosesan yang detail untuk memungkinkan implementasi yang dapat beroperasi secara luas. Dengan kata lain, HTML5 meluaskan, meningkatkan dan merasionalkan ketersediaan markup untuk dokumen, dan memperkenalkan markup dan API (application programming interfaces) untuk aplikasi web yang lebih kompleks. Untuk beberapa alasan lain, HTML5 juga merupakan kandidat dalam pemrograman aplikasi cross-platform mobile, karena HTML5 memiliki fitur desain yang cocok untuk low-powered devices (Perangkat yang menggunakan daya listrik yang kecil)

Banyak sintaks baru yang dimasukkan. Untuk mengolah konten multimedia dan grafis secara native, beberapa elemen seperti <video>, <audio> dan <canvas> telah ditambahkan, dan juga mendukung untuk konten scalable vector graphics (SVG) serta MathML untuk rumus matematika.Untuk memperkaya konten semantik pada dokumen, elemen struktur halaman yang baru telah ditambahkan juga seperti  <main>, <section>, <article>, <header>, <footer>, <aside>, <nav> dan <figure>. Beberapa atribut baru juga diperkenalkan pada HTML5, sedangkan beberapa atribut dan elemen lainnya telah dihapus, beberapa lain seperti <a>, <cite> dan <menu> telah diubah, didefenisikan ulang dan distandarisasikan.

API dan DOM (Document Object Model) telah menjadi bagian dasar dalam spesifikasi HTML5, dan HTML5 juga sudah diperbaiki dalam menangani dokumen-dokumen invalid dalam sebuah web jika dibandingkan dengan HTML4. – Wikipedia.

Catatan: Semua sumber link dalam tulisan diatas merefensi ke wikipedia.org.

Apa yang dapat dilakukan oleh HTML5 dapat dilihat pada gambar berikut ini. (Sumber gambar ; google image from sfc.usc.edu)

html5features

Berikut ini contoh struktur HTML5 dan penjelasannya.

Penjelasannya:

  • Deklarasi <!DOCTYPE html> mendefinisikan bahwa dokumen ini adalah HTML5
  • Elemen <html> adalah akar dari elemen pada halaman HTML ini.
  • Elemen <head> mengandung meta informasi tentang dokumen
  • Elemen <title> menjelaskan tentang judul dari dokumen.
  • Elemen <body> mengandung konten dari halaman yang nantinya akan ditampilkan oleh browser.
  • Elemen <meta /> disebut juga elemen kosong, karena tidak ada tag penutupnya, untuk menutup elemen <meta> maka digunakan tanda garis miring sebelum tanda kurung tutup.
  • Elemen <header> merepresentasikan konten pengantar, pembukaan atau navigasi yang terdiri dari deretan link.Dalam penggunaannya, <header> element dapat berisi element heading (<h1><h6>) tapi tidak diperlukan, daftar isi (table of contents), sebuah logo, form pencarian dan lain sebagainya. elemen <header> bukanlah sebuah konten pemisah (sectioning content) karena ia bukanlah konten yang terdiri dari headings dan footers, karena jelas sekali dalam sebuah <header> tidak boleh terdapat element <header> lain.Elemen <header> tidak boleh digunakan sebagai anak element (descendant) dari <address>, <footer>, atau <header> lainnya. Didalam sebuah dokumen, dapat ditemukan lebih dari satu <header> element. Seperti pada script diatas, dibagian bawahnya terdapat 1 satu buah elemen <header> lagi. Elemen <header> mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags. Seperti pada script diatas, didalam <header> terdapat <nav> untuk navigasi, <ul> untuk unstyled list dan <li> untuk list.
  • Elemen <section>

section artinya bagian atau seksi. HTML tag <section> merepresentasikan sebuah bagian dokumen atau aplikasi. Secara kontekstual, <section>element digunakan untuk mengelompokkan konten/dokumen menjadi beberapa bagian berdasarkan tema atau pokok pikiran masing-masing.

Di dalam sebuah element <section>, sebaiknya ditulis pula element heading, yaitu element <h1>sampai dengan <h6> yang ditulis secara langsung didalam element <section>sebagai anak element pertama yang menunjukkan judul atau tematik dari bagian konten tersebut.

Dalam penggunaannya, <section>tidak diperuntukkan sebagai container yang digunakan untuk menampung beberapa elements dengan maksud untuk mendesign/memberi style dengan CSS.

<section>berbeda dengan <div> karena ia memiliki arti semantik (semantic meaning) yang dapat digunakan untuk mengklasifikasikan bagian dari outline sebuah dokumen.

  • Elemen <article>

<article>merupakan element HTML dalam format <article>..</article>,digunakan untuk memberi mark up sebuah independent content, artinya element itu dapat berdiri sendiri sebagai sebuah konten utuh yang tidak terikat dengan konten lain (element lain). Contoh: didalam script diatas, <article> mengapit postingan yang berisi tag Global Attribut yaitu <header>, <a>, <p> dan <time> dengan kata lain didalam elemen <article> dapat disisipkan postingan, komentar, review, berita atau sebuah interaktif widget didalamnya.

Element <article> boleh disisipkan di dalam element <article> yang lain (nested), asalkan konten dari article tersebut berkaitan dengan induk article element yang menaunginya.

  • Elemen <h2>

Elemen <h2> merupakan elemen heading yang berfungsi sebagai penanda judul.

  • Elemen <p>

Elemen ini menunjukkan sebuah paragraf teks.

  • Elemen <time>

Elemen ini digunakan untuk merepresentasikan waktu 24 jam atau tanggal, tepatnya tanggal dalam sistem masehi (dikenal dengan nama “Gregorian Calendar“) dengan tambahan waktu dan informasi zona waktu (timezone) yang dapat ditulis secara opsional.

  • Elemen <a>

a menunjukkan sebuah anchor. Apa itu anchor? Anchor adalah teks yang menunjukkan awalan dan akhiran sebuah hypertext link. HTML <a> element digunakan untuk mendefinisikan sebuah hyperlink. Link dapat merujuk ke halaman yang sedang terbuka ataupun ke halaman lain (website lain).

Jika sebuah a element memiliki href attribute, maka element tersebut menunjukkan sebuah hyperlink (hypertext anchor), tetapi jika element tersebut tidak memiliki href attribute, maka element tersebut menunjukkan sebuah placeholder.

  • Elemen <aside>

aside artinya disamping yang menunjukkan bersebelahan. Element aside digunakan untuk merepresentasikan sebuah bagian halaman (seksi) yang berkaitan dengan konten disekitar element aside itu sendiri.

  • Elemen <footer>

<footer> merepresentasikan sebuah catatan kaki (bagian kaki / footer) untuk elemen yang menaunginya (berada di dalamnya), seperti catatan kaki pada sebuah <article> element, <section> element, catatan kaki untuk induk dokumen (<body> element) dan lain sebagainya. Di dalam <footer> element, dapat ditulis konten yang berkaitan dengan informasi mengenai penulis artikel atau dokumen, lisensi atau hak cipta tulisan dan beberapa link yang berkaitan dengan dokumen tersebut.

Dari script diatas, ditambah dengan sedikit CSS maka hasilnya akan terlihat seperti dibawah ini.

render-jadi

Terkait dengan elemen-elemen yang terdapat dalam HTML5 dan HTML, anda bisa mengunjungi situs dul.web.id untuk melihat daftar dan penjelasannya secara rinci didalam bahasa Indonesia.

Dan anda juga bisa merujuk ke w3schools.com untuk mendapatkan tutorial-tutorial tentang HTML5 dan lainnya .

Berikutnya saya akan menuliskan tentang pengenalan CSS pada artikel selanjutnya.

Sekian dulu untuk artikel kali ini, jika ada pertanyaan, saran ataupun koreksi silahkan tinggalkan komentar.

Salam, r4ndieL

 

r4ndiel

Leave a Reply

Your email address will not be published. Required fields are marked *