Elemen baru di HTML 5

Penulis：Eve Cole Waktu Pembaruan：2009-05-31 00:37:41

Menurut pendapat saya, HTML 5 adalah solusi kompromi. Meski tidak radikal, namun dapat mendorong kemajuan teknologi yang berkelanjutan. Tidak ada namespace, elemen tidak perlu ditutup (yang tentu saja bukan merupakan keuntungan), dan browser dapat menangani beberapa kesalahan dengan lunak. Semuanya mengikuti praktik HTML 4 di abad terakhir. Dalam hal rendering HTML, browser terjebak pada level tahun 1999. Untuk itu, HTML 5 merupakan solusi pragmatis, yang tidak hanya dapat terus memproses HTML yang telah tersebar di seluruh penjuru dunia selama bertahun-tahun, tetapi juga memudahkan produsen browser untuk menambahkan fitur-fitur baru. Ini disebut degradasi dengan anggun. Mari kita lihat beberapa elemen baru yang ditambahkan oleh HTML 5.

Elemen struktural

Ini sungguh menyenangkan. Saat ini, kami hanya dapat mendefinisikan struktur melalui div "universal", mencoba mengekspresikan masing-masing header, bottom, atau sidebar dengan menetapkan nilai id atributnya seperti header, footer, sidebar, dll. Dengan mereka, penulis kode tidak perlu lagi khawatir tentang penamaan ID, yang memiliki lebih banyak manfaat semantik untuk ponsel, pembaca, dan perangkat lainnya. HTML 5 menambahkan elemen struktur baru untuk mengekspresikan struktur yang paling umum digunakan berikut:

bagian: Ini dapat menyatakan bagian atau bab dari sebuah buku, atau bagian dalam bab

header: Header di badan halaman. Bukan elemen kepala

footer: Bagian bawah halaman (footer), yang dapat menjadi lokasi tanda tangan email

nav: kumpulan link ke halaman lain

artikel: Catatan independen di blog, majalah, ringkasan, dll.

Misalnya, beranda sebuah blog, yang ditulis dalam HTML 5, akan terlihat seperti ini (dengan beberapa penghilangan):

Berikut isi kutipannya:

<<!DOCTYPE HTML>
<HTML>
<kepala>
<title>nyata</title>
</kepala>
<tubuh>
<tajuk>
<h1>Realazy</h1>
</tajuk>
<bagian>
<artikel>
<h2><a href="http://realazy.org/blog">Judul</a></h2>
<p>Kontennya ada di sini...(hilangkan kata nnya)</p>
</artikel>
<artikel>
<h2><a href="http://realazy.org/blog">Judul 2</a></h2>
<p>Konten 2 ada di sini...(hilangkan kata n)</p>
</artikel>
...
</bagian>
<catatan kaki>
<nav>
<ul>
<li><a href="http://realazy/blog">Navigasi 1</a></li>
<li><a href="http://realazy/blog">Navigasi 2</a></li>
...
</ul>
</nav>
<p>© 2007 realazy</p>
</footer>
</tubuh>
</HTML>Elemen semantik blok tingkat blok
HTML juga menambahkan tiga elemen tingkat blok berikut:

ke samping
gambar/kode>
dialog
di samping dapat digunakan untuk menyatakan catatan, tip, sidebar, ringkasan, sisipan kutipan, dll. sebagai konten tambahan. Misalnya saja ekspresikan sidebar blog seperti ini:

<samping>
<h3>Artikel terbaru</h3>
<ul>
<li><a href="http://realazy.org/blog/">Judul artikel</a></li>
...
</ul>
Elemen </aside>figure mewakili gambar tingkat blok dengan deskripsi. Misalnya:

<gambar>
<legend>Inilah deskripsi gambarnya</legend>
<img alt="Teks alternatif gambar" src="/path/to/img.png" />
Elemen </figure>dialog digunakan untuk mengekspresikan percakapan antar orang. Dalam HTML 5, dt digunakan untuk mewakili pembicara, dan dd digunakan untuk mewakili konten pembicara. menyukai:

<dialog>
<dt>Buddha</dt>
<dd>Warna adalah kekosongan</dd>
<dt>Wukong</dt>
<dd>Saya sekarang memerlukan beberapa elemen semantik sebaris yang kosong

Elemen m digunakan untuk menandai beberapa teks yang tidak memerlukan penekanan. Ini masih kontroversial dan pada akhirnya dapat diubah menjadi penanda.

Elemen waktu, seperti namanya, digunakan untuk menyatakan waktu. Diperlukan fitur datetime untuk menunjukkan waktu yang dapat dikenali mesin, seperti:

<time datetime="2008-08-08T20:08:08">20:08:08 malam tanggal 8 Agustus 2008</tiem> Elemen meter menyatakan nilai dalam rentang tertentu. Dapat digunakan untuk gaji, persentase, pecahan, dll. Misalnya:

Mohon maaf karena saya hanya memiliki <meter>150cm</meter>. Ia juga memiliki 6 fitur untuk mengungkapkan berbagai arti, seperti:

<p>Skor Anda adalah: <meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B+</meter>.</p >

Ada juga kemajuan, sesuai dengan namanya, digunakan untuk menyatakan kemajuan:

Pencapaian sasaran: <progress value="40" max="100">40%</progress> Sematkan multimedia

Menambahkan elemen video dan audio. Seperti namanya, masing-masing digunakan untuk menyisipkan video dan suara. Adapun formatnya, implementasinya diserahkan kepada browser, dan HTML tidak lagi memerlukan kode khusus untuk memutar format tertentu. Sama seperti img, bisa ditampilkan baik itu png, jpg atau gif. Khususnya, mereka dapat berisi konten. Misalnya, Anda dapat memasukkan lirik ke dalam lagu tertentu:

Berikut isi kutipannya:
<audio src="Siapa yang tidur denganmu.mp3">
<p>Air matanya mengering</p>
<p>Bagaimana aku bisa menanggung kesalahan pada diriku sendiri</p>
<p>Ada momen sedih dan gembira</p>
...
</audio>

interaktivitas

HTML 5 juga disebut Aplikasi Web 1.0, sehingga kemampuan interaktifnya juga semakin berkembang. Tag berikut dirancang untuk meningkatkan pengalaman interaktif laman:

Berikut isi kutipannya:
detail
datagrid
menu
memerintah

detail

Ini digunakan untuk mewakili bagian konten tertentu, tetapi konten tersebut mungkin tidak ditampilkan secara default. Ini akan ditampilkan setelah berinteraksi dengan legenda melalui beberapa cara (seperti mengklik). Ini agak mirip dengan metode saat ini yang menyembunyikan konten melalui JavaScript dan menampilkannya setelah diklik. Misalnya:

Rekam setiap bagian kehidupan dalam satu kalimat,

Berikut isi kutipannya:
<detail>
<legend>Lainnya</legend>
<p>Berkomunikasi dan berbagi, mendekatkan Anda dan teman Anda, mendukung MSN/GTalk/QQ, SMS, WAP seluler</p>
</details>Dapat memiliki atribut terbuka untuk menampilkan detail atau tidak.

Datagrid digunakan untuk mengontrol data dan dapat diperbarui oleh pengguna atau skrip.

menu ada di HTML 2, tetapi HTML 4 menjadikannya usang. Limbah HTML 5 digunakan dan elemen perintah ditambahkan selama periode tersebut.

Referensi: Elemen baru di HTML 5