Scribd Logo

Bahasa

Unggah

Selamat datang di Scribd!

Pengenalan HTML6

Diunggah oleh

Muslimin
3 tayangan6 halaman
HTML6

Hak Cipta

© © All Rights Reserved

Format Tersedia

DOC, PDF, TXT atau baca online dari Scribd

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Laporkan Dokumen Ini

Deskripsi:

HTML6

Hak Cipta:

© All Rights Reserved
Unduh sebagai DOC, PDF, TXT atau baca online dari Scribd
Tandai sebagai konten tidak pantas
3 tayangan6 halaman

Pengenalan HTML6

Diunggah oleh

Muslimin

Deskripsi:

HTML6

Hak Cipta:

© All Rights Reserved
Unduh sebagai DOC, PDF, TXT atau baca online dari Scribd
Tandai sebagai konten tidak pantas
dari 6

Pengenalan HTML6 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.
Baca juga:

Mengenal Struktur HTML5


Belajar HTML5 dan CSS3

29 Kehebatan HTML5 Infographic

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:
xmlns:xhtml="http://www.w3.org/1999/xhtml"

HTML6 akan memberikan kita manfaat untuk menggunakan tag yang kita inginkan dan tidak
perlu hanya menggunakan tag yang sudah didefinisikan.

Contoh Kode dan Struktur HTML6


<!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>

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 diatas tadi.
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 masingmasing 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" />

Dibandingkan dengan tag ganda, Anda tidak perlu menutup tag tunggal anda. Tag ganda
memiliki tag pembuka dan penutup, karena mereka memiliki beberapa konten. Namun, dalam
kasus tag ganda tidak memiliki konten berbasis teks, Anda dapat mengurangi menjadi
penutup tunggal dari satu variasi. Sebagai contoh:
<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>

Kesimpulan
HTML6 saat ini masih blum datang. Tapi ide tentang apa yang akan ditawarkan telah
disediakan oleh Oscar Godson melalui HTML6Spec. Posting ini hanya membantu Anda
memberikan gambaran tentang beberapa konsep dasar HTML6 versi Oscar Goodson.

Anda mungkin juga menyukai