Belajar Elemen HTML5
Pada artikel serial html5 kali ini kita akan membahas tentang elemen – elemen yang ada pada html5. Oh iya sebelumnya saya jelaskan dulu kenapa HTML 4.01 diperbaharui ialah karena beberapa elemen dalam HTML 4.01 sudah usang, tidak pernah digunakan, atau tidak banyak memberikan manfaat, maka lahirlah HTML5. Silakan baca dulu tutorial tentang perbedaan HTML dengan HTML5 ini untuk lebih memperkaya latar belakang perubahan HTML menjadi HTML5.
Seperti contohnya pada elemen HTML5 untuk mendefinisikan video, seperti klip video atau video stream lainnya menggunakan tag <video>, mendefinisikan tag suara, seperti musik atau audio lain menggunakan tag <audio>, mendefinisikan konten tertanam, seperti plug-in menggunakan tag <embed>.
Ok, untuk lebih jelasnya berikut ini contoh – contoh elemen pada html5 :
Elemen Markup
| Tag | Penjelasan |
| <article> | Untuk konten eksternal, seperti teks dari artikel-berita, blog, forum, atau konten lain dari sumber eksternal |
| <aside> | Untuk konten selain konten itu ditempatkan di samping konten yang masuk harus berkaitan dengan isi sekitarnya |
| <command> | Sebuah tombol, atau radiobutton, atau sebuah kotak centang |
| <details> | Untuk rincian menggambarkan tentang sebuah dokumen, atau bagian dari dokumen |
| <summary> | Sebuah keterangan, atau ringkasan, dalam rincian elemen |
| <figure> | Untuk pengelompokan bagian dari konten berdiri sendiri, bisa video |
| <figcaption> | Keterangan dari tokoh bagian |
| <footer> | Untuk footer dari dokumen atau bagian, dapat meliputi nama penulis, tanggal dokumen, informasi kontak, atau informasi hak cipta |
| <header> | Untuk penerapan suatu dokumen atau bagian, dapat mencakup navigasi |
| <hgroup> | Untuk bagian dari pos, menggunakan <h1> untuk <h6>, di mana yang terbesar adalah pos utama bagian tersebut, dan yang lainnya sub-judul |
| <mark> | Untuk teks yang harus disorot |
| <meter> | Untuk pengukuran, digunakan hanya jika nilai-nilai maksimum dan minimum diketahui |
| <nav> | Untuk bagian navigasi atau menu |
| <progress> | Keadaan pekerjaan berlangsung |
| <ruby> | Untuk penjelasan ruby (catatan Cina atau karakter) |
| <rt> | Untuk penjelasan tentang penjelasan ruby |
| <rp> | Apa untuk menunjukkan browser yang tidak mendukung elemen ruby |
| <section> | Untuk bagian dalam dokumen. Seperti bab, header, footer, atau bagian lain dari dokumen |
| <time> | Untuk menentukan waktu atau tanggal, atau keduanya |
Elemen Media
| Tag | Penjelasan |
| <audio> | Untuk konten multimedia , suara, musik atau streaming audio lainya |
| <video> | Untuk konten video , seperti klip film atau Streaming video lainya |
| <source> | Untuk sumber suatu media pada elemen media, menjelaskan didalam video atau media audio |
| <embed> | Untuk mengisi embedded , contohnya seperti plug-in atau mengambil video dari Youtube. |
Elemen Kanvas
Elemen kanvas menggunakan JavaScript untuk membuat gambar pada halaman web.
| Tag | Penjelasan |
| <canvas> | Untuk membuat gambar pada halaman web |
Elemen Form
| Tag | Penjelasan |
| <datalist> | Daftar pilihan untuk nilai input |
| <keygen> | Hasilkan kunci untuk mengotentikasi pengguna |
| <output> | Untuk berbagai jenis output, seperti output yang ditulis oleh script |
Input Type Attribute Values
Untuk kontrol input yang lebih baik sebelum mengirimnya ke server:
| Tipe | Penjelasan |
| tel | Nilai input untuk nomor telepon |
| search | Untuk bidang pencarian |
| url | Nilai input untuk memasukkan URL |
| Untuk mengisi email atau lebih dari 1 email | |
| datetime | Untuk pengisian waktu dan tanggal |
| date | Untuk pengisian tanggal |
| month | Untuk pengisian bulan |
| week | Untuk pengisian minggu |
| time | Untuk pengisian waktu |
| datetime-local | Untuk pengisian lokal waktu/tanggal |
| number | Untuk pengisian nomer |
| range | Untuk pengisian rentang waktu |
| color | Untuk pengisian heksadesimal sebuah warna, contohnya #FF8800 |
Seperti yang saya jelaskan bahwa pada html5 ini adalah menyederhanakan html versi sebelumnya, untuk artikel selanjutnya adalah membahas struktur penyederhanaan pada html5.
4 Responses to “Belajar Elemen HTML5”
Comment from prothelord
Time June 12, 2012 at 11:19 pm
Errornya apa dan di browser apa?
Comment from Ahmad Lukman Nulhakim
Time June 17, 2012 at 7:25 pm
Materi yang sangat menarik.
Enak untuk dipelajari..
Saya baru mempelajari HTML…
Ditunggu Materi selanjutnya pak Admin.
Terimakasih
Comment from kenzoo
Time August 30, 2012 at 12:24 pm
malem gan.. monanya nii
sy coba cek blog sy pake validatorw3.org.. bbanyak erornya. trs cari tutor ane ngikuti ganti metta. eror berkurang banyak,
tp masih banyak jg yng eror.
contohnya kaya gini..
Line 752, Column 177: Element div not allowed as child of element span in this context. (Suppressing further errors from this subtree.)
…3211787200778109′ style=’display:none’>Kenzoo Kha<div id='IDCommentPostI…
Contexts in which element div may be used:
Where flow content is expected.
Content model for element span:
Phrasing content.
itu maksudnya apa ya gan. banyak yng erornya kaya gituan. untuk lebih lebih detailnya agan bisa liat di n cek url saya di validator tersebut.. makasihbanget gan..
Write a comment
You need to login to post comments!
Comment from Muhammad Septi Rosidi
Time June 12, 2012 at 7:23 pm
Bagaimana dengan Meta Tag HTML5 khusus untuk meta IE=EmulateIE7, MSSmartTagsPreventParsing, distribution, language dan SPIDERS? karna error dari template sy ada disana.
Satu lagi…
Di HTML5 penyumbang terbesar error adalah kode ini:
Bagiman mengatasinya???