Pengertian ,Struktur dan Fitur Terbarunya
Teknologi memang berkembang begitu cepat, terkadang kita kewalahan
untuk mengikuti nya. Belum juga kita selesai mempelajari HTML5 dengan
baik dan benar, sekarang sudah mau muncul lagi HTML6, yaitu versi
terbaru dari HTML.
HTML5
telah memberi kita beberapa fitur yang sangat menarik seperti audio dan
dukungan video, penyimpanan offline/ Offline Storage dan yang paling
penting kemampuan untuk membangun website yang bisa optimal di mobile. Selain itu, html5 memberikan kita kebebasan dalam menggunakan atribut dari tag seperti
<code> dan <script>. Selain itu, HTML5 membantu developer untuk mengatur konten dengan cara yang lebih relevan dengan menggunakan tag baru seperti <article>, <section>, <header>
dll. Namun, HTML5 masih dalam tahap pengembangan dan bukan sesuatu yang
sudah final, belum menjadi markup yang terlalu semantik.Memahami Konsep HTML6
Pernahkan anda bertanya-tanya apakah anda bisa mengekspresikan
penggunaan tag yang lebih baik lagi? Jika belum maka bayangkan saja anda
menggunakan tag
<logo> </logo> untuk menetapkan logo pada halaman web anda, atau menggunakan tag <toolbar> </toolbar> dan sebagainya. Bukankah lebih baik jika bisa menggunakan tag <div> tanpa menggunakan beberapa ID seperti wrapper atau container, tapi langsung menggunakan tag <wrapper> atau <container> dibandingkan harus menggunakan <div id="wrapper"> atau <div id="container">. Itulah yang akan ada di HTML6.
HTML6 adalah versi ke-6 dari HTML dengan namespace yang memiliki struktur seperti XML.
Namespace XML akan membantu anda menggunakan tag yang sama tanpa
bertentangan/berbenturan atau bisa dibilang tanpa konflik dengan tag
lain. Misalnya salah satu yang digunakan dalam DOCTYPE XHTML:
HTML6 akan memberikan kita manfaat untuk menggunakan tag yang kita
inginkan dan tidak perlu hanya menggunakan tag yang sudah didefinisikan.
Melihat dokumen HTML6 diatas anda akan melihat beberapa tag aneh seperti
<html:x>. Tag itu adalah namespaced element milik W3C dan HTML6 spec, dan akan memicu tindakan di browser. Sebagai contoh, tag <html:title> akan mengubah judul bar browser anda dan <html:media>
akan membantuk membuat gambar yang yang sudah didefinisikan agar muncul
di layar browser. Bagian yang terbaik adalah bahwa semua elemen ini
secara khusus ditetapkan untuk pengguna dan tidak ada hubungan dengan
browser. Mereke tidak lebih hanya hooks untuk Javascript dan stylesheet
dan membantu untuk membuat contoh kode anda lebih semantik.HTML6 APIs
Tag HTML6 akan memiliki html namespace seperti
<html:html> atau <html:head> dan sebagainya. Mari kita lihat masing-masing atribut tag yang
digunakan di contoh script HTML6 yang sudah kita tulis ..<!DOCTYPE html>
<html:html>
<html:head>
<html:title>A Look Into HTML6</html:title>
<html:meta type="title" value="Page Title">
<html:meta type="description" value="HTML example with namespaces">
<html:link src="css/mainfile.css" title="Styles" type="text/css">
<html:link src="js/mainfile.js" title="Script" type="text/javascript">
</html:head>
<html:body>
<header>
<logo>
<html:media type="image" src="images/xyz.png">
</logo>
<nav>
<html:a href="/img1">a1</a>
<html:a href="/img2">a2</a>
</nav>
</header>
<content>
<article>
<h1>Judul Artikel</h1>
<h2>Sub judul artikel</h2>
<p>[...]</p>
<p>[...]</p>
</article>
<article>
<h1>The concept of HTML6</h1>
<h2>Understanding the basics</h2>
<p>[...]</p>
</article>
</content>
<footer>
<copyright>This site is © to Tutorial-Webdesign.com 2014</copyright>
</footer>
</html:body>
</html:html>
1. <html:html>
<!DOCTYPE html>
<html:html>//Tag ini sama dengan <html> yang ada pada html sebelumnya
<!-- contoh dokumen html -->
</html:html>2. <html:head>
Tag ini setara dengan tag
<head>. Ini bertujuan untuk menempatkan data dan script js atau css yang akan digunakan dalam tag <html:body>.<!DOCTYPE html>
<html:html>
<html:head>
<!-- Konten utama akan ada disini seperti tag <html:title> -->
</html:head>
</html:html>
3. <html:title>
Seperti namanya, ini akan mengubah judul dokumen HTML, dan mirip dengan tag
<title> yang digunakan di versi HTML sebelumnya. Tag ini digunakan untuk mengubah judul bar di bagian atas browser anda.<!DOCTYPE html>
<html:html>
<html:head>
<html:title>A Look Into HTML6</html:title>
</html:head>
</html:html>
4. <html: meta>
Tag ini agak berbeda dari tag
<meta> yang
digunakan dalam versi HTML terbaru. Menggunakan tag HTML6 ini maka anda
dapat menggunakan meta data apapun secara singkat. Dan tidak seperti
HTML5 anda tidak perlu menggunakan jenis meta standar di HTML6. Ini
membantu untuk mengumpulkan informasi seperti deskripsi halaman web.<!DOCTYPE html>
<html:html>
<html:head>
<html:title>A Look Into HTML6</html:title>
<html:meta type="description" value="HTML example with namespaces">
</html:head>
</html:html>
5. <html:link>
Tag ini akan membantu anda membuat link ke dokumen eksternal dan
script seperti CSS, JS, dan lain nya ke dokumen HTML. Ini mirip dengan
tag <link> yang digunakan dalam HTML5. Tag ini meliputi atribut
sebagai berikut:
- Charset: “UTF-8” karakter Encoding
- href: Ini berisi link ke file sumber
- Media: ini mendefinisikan jenis perangkat yang akan dijalankan, misalnya “Smartphone” atau “Tablet”.
- type: Jenis MIME dari dokumen
<!DOCTYPE html>
<html:html>
<html:head>
<html:title>A Look Into HTML6</html:title>
<html:link src="js/mainfile.js" title="Script" type="text/javascript">
</html:head>
</html:html>6. <html:body>
Ini seperti tag
<body> yang telah anda gunakan
dalam versi HTML saat ini. Di sinilah semua isi website anda seperti
teks, media dan lain nya ditempatkan.<!DOCTYPE html>
<html:html>
<html:head>
<html:title>A Look Into HTML6</html:title>
</html:head>
<html:body>
<!-- Konten website anda akan berada disini -->
</html:body>
</html:html>
7. <html:a>
Tag ini mirip dengan tag
<a>, dan digunakan untuk mewakili link ke halaman web lainnya. Namun, tidak seperti tag <a>, <html:a> hanya membutuhkan atribut “href” tunggal, yang mengarahkan link ke halaman yang ingin anda kunjungi.<!DOCTYPE html>
<html:html>
<html:head>
<html:title>A Look Into HTML6</html:title>
</html:head>
<html:body>
<html:a href="http://siteurl">Go to siteurl.com!</html:a>
</html:body>
</html:html>8. <html:button>
Tag ini setara dengan tag
<button> atau <input type="button">
yang digunakan saat ini dan versi html terdahulu. Tag ini memungkinkan
anda untuk membuat tombol untuk membantu pengguna melakukan beberapa
interaksi pada halaman website anda. Ini memiliki satu atribut yang
dinonaktifkan.<!DOCTYPE html>
<html:html>
<html:head>
<html:title>A Look Into HTML6</html:title>
</html:head>
<html:body>
<html:button>Click Here</html:button>
</html:body>
</html:html>
9. <html:media>
Tag ini membungkus semua tag <media> seperti
<img>, <video>, <embed>, dll dengan menggunakan tag <html:media>, Anda tidak lagi harus menentukan tag untuk masing-masing jenis file. Tag <html:media>
yang anda gunakan akan dieksekusi oleh browser berdasarkan jenis
atribut (bila ada), atau hanya akan menggunakan ekstensi dasar, atau
dengan “tipe MIME”.<!DOCTYPE html>
<html:html>
<html:head>
<html:title>A Look Into HTML6</html:title>
</html:head>
<html:body>
<!-- Image akan ada disini -->
<html:media src="img1/logo.jpg" type="image">
<!--Video tidak perlu mendeklarasikan tipenya -->
<html:media src="videos/slide.mov">
</html:body>
</html:html>
Gambaran Umum Jenis Tag
Serupa dengan yang ada saat ini dan versi html sebelum nya, HTML6
juga akan memiliki dua jenis tag seperti tag tunggal dan tag ganda. Tag
tunggal tidak akan memiliki konten teks, dan sepertinya hanya akan
memiliki atribut. Sebagai contoh:
<html:meta type="author" content="tutweb">
<html:meta type="author" content="tutweb" /> <html:link href="./a.html">Teks berbasis konten</html:link>
<!-- Ini adalah cara singkatnya... -->
<foo class="xyz" />
<!-- ...aslinya seperti dibawah ini: -->
<foo class="xyz"></foo>
0 komentar:
Posting Komentar