HTML5 Tips 1: Kecepatan pengembangan teknologi saat ini luar biasa. Jika Anda tidak hati -hati, Anda mungkin tidak dapat mengikutinya. Pengembangan generasi baru HTML-HTML5 terus membawa kita kejutan baru. Kami akan memperkenalkan beberapa teknik HTML kepada Anda melalui artikel ini.
1. Jenis dokumen baru (Doctype)
<! Doctype html public -// w3c // dtd xhtml 1.0 transisi // en
http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
Apakah Anda masih menggunakan tipe dokumen XHTML di atas yang merepotkan dan sulit diingat? Jika ini masih terjadi, saatnya untuk beralih ke jenis dokumen HTML5 yang baru.
<! Doctype html>
Sekarang hanya membutuhkan 15 karakter yang sederhana. (Catatan: Deklarasi Doctype Anda perlu muncul di baris pertama file HTML Anda.)
2. Elemen Grafik (Gambar)
Apakah Anda masih mempertimbangkan untuk menggunakan kode berikut untuk menandai gambar?
<mg src = path/to/image alt = tentang gambar/>
<p> Gambar Mars. </p>
Kode di atas tidak dapat dikaitkan dengan judul grafik secara sederhana dan semantik, karena hanya dibungkus dengan tanda paragraf dan elemen gambar, dan HTML5 meningkatkan ini dengan memperkenalkan elemen <figure>. Saat digunakan bersama dengan elemen <figCaption>, kita dapat memasangkan judul grafis dengan grafik. Kodenya adalah sebagai berikut:
<figure>
<img src = path/to/image alt = tentang gambar/>
<figcaption>
<p> Ini adalah gambar sesuatu yang menarik. </p>
</baption>
</tigur>
3. Mendefinisikan ulang <small>
Ternyata Anda dapat menggunakan elemen <small> untuk membuat subtitle terkait erat dengan logo. Namun, sekarang HTML5 telah memodifikasi penggunaan ini, dan elemen <small> telah didefinisikan ulang, atau lebih tepat, sekarang digunakan untuk mewakili kata -kata kecil atau catatan samping lainnya (seperti pemberitahuan hak cipta di bagian bawah situs web).
4. Tidak ada lagi skrip atau jenis tautan yang diperlukan
Kemungkinan besar Anda masih menambahkan properti tipe ke tautan dan tag skrip Anda seperti kode di bawah ini.
<tautan rel = stylesheet href = path/to/stylesheet.css type = text/css/>
<type skrip = teks/javascript src = path/to/script.js> </script>
Di HTML5, ini tidak lagi diperlukan. Ini berarti bahwa kedua label ini masing -masing mewakili gaya dan skrip. Karena itu, kita dapat menghapus semua atribut tipe mereka. Kodenya adalah sebagai berikut:
<tautan rel = stylesheet href = path/to/stylesheet.css/>
<skrip src = path/to/script.js> </script>
5. Gunakan atau tidak menggunakan kutipan
Ingat, html5 berbeda dari xhtml, dan Anda tidak perlu membungkus atribut dalam kutipan jika Anda tidak menyukainya. Namun, jika Anda berpikir menggunakan kutipan akan membuat Anda merasa lebih nyaman, tentu saja tidak akan ada masalah.
<p class = myclass id = someId> mulai reaktor.
6. Jadikan konten Anda dapat diedit
Salah satu fitur yang sangat kuat dari HTML5 dapat diedit, yang, sesuai namanya, akan memungkinkan pengguna untuk mengedit konten teks apa pun yang terkandung dalam suatu elemen (termasuk elemen anaknya). Ini memiliki berbagai macam kegunaan, seperti daftar tugas sederhana atau situs berbasis wiki, dan salah satu keuntungannya adalah menggunakan penyimpanan lokal.
<! Doctype html>
<html lang = en>
<head>
<meta charset = UTF-8 ″>
<title> untitled </iteme>
</head>
<body>
<H2> Daftar yang harus dilakukan </h2>
<ul puas = true>
<li> Break Mekanik Cab Driver. </li>
<li> Berkendara ke pabrik yang ditinggalkan
<li> Tonton video self </li>
</ul>
</body>
</html>
Atau, seperti yang dikatakan trik kelima, Anda juga dapat menulis kode pada baris sembilan seperti ini (tanpa kutipan):
<ul puas = true>
7. Input email
Jika kami menerapkan jenis email untuk menentukan bentuk input, kami dapat memerintahkan browser untuk hanya mengizinkan input string yang sesuai dengan struktur alamat email yang valid. Meskipun verifikasi bentuk bawaan akan segera tiba, kami tidak dapat sepenuhnya mengandalkan ini. Browser yang lebih tua tidak mengerti jenis email ini, mereka hanya kembali ke kotak teks normal.
<! Doctype html>
<html lang = en>
<head>
<meta charset = UTF-8 ″>
<title> untitled </iteme>
</head>
<body>
<Form Action = Method = get>
<Label untuk = Email> Email: </label>
<Input ID = Nama Email = Jenis Email = Email />
<type type = kirim> Kirim formulir </button>
</form>
</body>
</html>
Ketika datang ke elemen dan atribut yang didukung oleh browser dan tidak mendukung, Anda harus tahu bahwa semua browser tidak dapat diandalkan saat ini. Misalnya, Opera hanya mendukung verifikasi email jika Anda menentukan atribut nama. Namun, itu tidak mendukung atribut placeholder (seperti yang akan dibahas di bawah). Akhirnya, sementara Anda dapat menggunakan bentuk verifikasi ini, jangan terlalu mengandalkannya.