Element baru pada html 5

Internet telah banyak berkembang sejak kemunculan html 4.01. Dengan munculnya html 5 yang tentunya merupakan upgrade dari html 4.01 yang muncul dengan element baru.
Element-element baru pada html 5 :

  • Markup Elements
Tag  Description
<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
<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

 

 

  • Media Elements
Tag  Description
<audio> Untuk konten multimedia, suara, musik atau audio lain aliran
<video> Untuk konten video, misalnya klip video atau video lainnya stream
<source> Untuk sumber daya media untuk elemen media, yang didefinisikan di  dalam video atau audio elemen
<embed> Untuk konten tertanam, seperti plug-in

 

contoh:

<html>
<head>
  <title>Media Elements</title>
</head>
<body>
<video width="320" height="240" controls="controls">
  <source src=?video.mp4" type="video/mp4" />
</video>
<audio controls="controls">
  <source src="audio.ogg" type="audio/ogg" />
 </audio>
</body>
</html>

 

  • The Canvas Element :menggunakan javascript untuk membuat gambar pada halaman web.
Tag  Description
<canvas> Untuk membuat grafik dengan script

 

contoh:

<canvas id="canvas" width="200" height="100" style="border:1px solid #c3c3c3;">
</canvas>
<script type="text/javascript">
var c=document.getElementById("canvas");
var cxt=c.getContext("2d");
cxt.fillStyle="blue";
cxt.beginPath();
cxt.fillRect(0,0,150,75);
cxt.closePath();
cxt.fill();
</script>

 

 

  • Form Element
 Tag  Description
<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
 Type  Description
tel Nilai input nomor telepon
search Field input adalah field pencarian
url Nilai input URL
email Nilai input satu atau lebih alamat email
datetime Nilai input tanggal dan / atau waktu
date Nilai input tanggal
month Nilai input bulan
week Nilai input seminggu
time Nilai input waktu jenis
datetime-local Nilai input adalah tanggal lokal / waktu
number Nilai input nomor
range Nilai input nomor dalam kisaran tertentu
color Nilai input warna heksadesimal, seperti # FF8800



Comments:

Post a Comment:
Comments are closed for this entry.