Pengenalan HTML6 — Pengertian — Struktur dan Fitur Terbarunya | Tutorial Web Design Indonesia

Pengenalan HTML6 — Pengertian — Struktur dan Fitur Terbarunya

TWD Editorial URL:https://www.tutorial-webdesign.com/ySyIo
December 6th, 2014 News, Web Development 30 Comments

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.

html6

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:

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 &copy; 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 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" />

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.

Semoga ini bisa membantu anda mengenal fitur-fitur baru dari HTML6.

Follow @tut_web

Tags:

Sort URL https://www.tutorial-webdesign.com/ySyIo
Back To Top

Penulis :

TWD Editorial

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

http://tutorial-webdesign.com

Comments

30 thoughts on “Pengenalan HTML6 — Pengertian — Struktur dan Fitur Terbarunya”

Lukman Fitrianto says:

December 6, 2014 at 12:28

HTML dasar saja saya belum khatam, malah HTML 6 sudah nongol, waduh. Tambah mumet, tapi bersyukur ada TWD yang selalu update pengetahuannya. Makasih.

Reply
- TWD Editorial says:
  
  December 6, 2014 at 12:37
  
  Sama-sama….minta dukungan nya selalu agar bisa terus update
  
  Reply
Syauqi says:

December 6, 2014 at 12:37

Haaaaaa >.<
Masih blm paham sama yang 5 muncul yang 6 -_-v

Reply
sancoLgates says:

December 6, 2014 at 13:05

oalah canvas html:5 ajj belom abis di bongkar gan :'(

Nice Info gan

Reply
summon agus says:

December 6, 2014 at 16:15

saya kira pada dasarnya sama… cuman sedikit tambahan..
malah lebih simple HTML5… tp apa daya… harus mengikuti perkembangan..

Reply
Gantengers says:

December 6, 2014 at 17:22

wah perkembangan bagus untuk dunia coding tapi sayang untuk yang menggunakan html 5 udah ke 6 sekarang

Reply
anonim says:

December 6, 2014 at 21:50

wa pusing -_-
tag nya aneh-aneh

Reply
humayraa says:

December 7, 2014 at 05:19

Browser yang Dah Support apa aja bos?

Reply
dipan jati says:

December 7, 2014 at 06:27

makasih informasi ilmunya gan, sangat bermanfaat bagi saya

Reply
Alwin says:

December 7, 2014 at 11:14

HTML5 aja masih belum dikuasai semua, konsep HTML6 udah nongol aja ._.

Reply
javas says:

December 7, 2014 at 14:02

hehe baiknya dikasih keterangan di awal artikel bahwa ini bukan spec resmi, sesuai dengan disclaimer dari situs aslinya:

“Seriously, it was just some random thing I did for fun one day. It’s in NO WAY a real spec and should not be taken seriously”

Reply
- TWD Editorial says:
  
  December 7, 2014 at 14:30
  
  Kalau dibaca sampai akhir, maka akan mengerti kalau dibagian akhir artikel sudah disampaikan ini adalah spec html6 dari Oscar Godson
  
  Reply
YJA says:

December 7, 2014 at 23:47

sempat kaget jg kok udh ada versi 6 :D

nice share

Reply
HTML 6 is coming | Muhammad Irsal says:

December 8, 2014 at 12:05

[…] Sumber : http://www.tutorial-webdesign.com/pengenalan-html6-pengertian-struktur-dan-fitur-terbarunya/ […]

Reply
Irfan P says:

December 8, 2014 at 16:36

Saya kira sudah resmi diumumkan… ternyata hehehe…
Padahal saya belum tamat belajar html 5 nya…

Nice share min…

Reply
- Amdi says:
  
  December 22, 2014 at 21:59
  
  kira udah launching… :D
  
  Reply
coder ngaco says:

December 8, 2014 at 23:09

ini ngambil dari http://html6spec.com/ kan?

Bukannya di paragraf awal situs ini udah bilang “It’s in no way a real spec and should not be taken seriously. “.

Standar html6 belum ada..

Reply
- TWD Editorial says:
  
  December 8, 2014 at 23:41
  
  Kan dibagian akhir sudah dijelaskan, silahkan dibaca artikel nya sampai akhir
  
  Reply
cakasuma says:

December 9, 2014 at 02:03

sru nih, stiapstruktur harus nulis html:x. i agree with 6 better, memang susah nulis tag

Reply
Chibi Blog says:

December 9, 2014 at 22:59

html5 belom bener udh muncul html6 aja, nice info

Reply
Alhira Technologies says:

December 22, 2014 at 10:27

sangat bagus gan, makasih contohnya. bermanfaat baget bagi kami

Reply
Dikri says:

December 22, 2014 at 22:41

thx brad membantu untuk newbie seperti sy, lanjutkan brad.

Reply
Ope Site says:

January 10, 2015 at 10:32

html5 belum nyicipin, html6 udah mulai nongol

Reply
Achmad Muharya says:

January 24, 2015 at 15:13

Meskipun belum selesai belajar HTML yang sudah ada, tapi yang ini kayanya patutu ditunggu deh :D

Reply
First Look into HTML6 | Vebcy says:

May 14, 2015 at 09:00

[…] Image courtesy of Web Design Indonesia […]

Reply
printer hero says:

October 7, 2015 at 20:46

saya ingin sekali mempelajari html mas , dan sekarang masih belajar memperdalam html 5 , laah kok sekarang udah 6 , dan sepertinya fiturnya lebih banyak lagi yah mas T_T

Reply
aaijul says:

November 9, 2015 at 11:22

wah, banyak info yang saya dapatkan di sini, semoga berkembang terus ya min, ^_^
HTML5 aja masih keder, HTML6 udh siap-siap keluar, :3
semoga aja HTML6 ini bisa lebih mudah di pahami :D

terima kasih infonya min, sukses terus :)

Reply
Joshua says:

November 13, 2015 at 16:20

penjelasan nya sangat bagus. ternyata penggunaan html 6 lebih praktis dari pada generasi sebelumnya

Reply
Bang Zendy says:

March 22, 2016 at 00:17

sepertinya pengadaan syntax pada update html6 nanti akan lebih simple dan sedikit rumit wkwk

Reply
grosirbros says:

August 1, 2016 at 13:46

masih lebih familiar dengan HTML 5 tapi tetap harus update… nice share gan thanks

Reply