Konvensi HTML Coding
pengembang web sering tidak pasti tentang gaya coding dan sintaks untuk digunakan dalam HTML.
Antara tahun 2000 dan 2010, banyak pengembang web dikonversi dari HTML ke XHTML.
Dengan XHTML, pengembang dipaksa untuk menulis valid dan "well-formed" kode.
HTML5 adalah sedikit lebih ceroboh ketika datang untuk kode validasi.
Dengan HTML5, Anda harus membuat sendiri Best Practice, Style Guide dan Coding Konvensi.
Be Smart dan Masa Depan Bukti
Sebuah penggunaan konsekuen gaya, membuatnya lebih mudah bagi orang lain untuk memahami dan menggunakan HTML Anda.
Di masa depan, program-program seperti pembaca XML, mungkin ingin membaca HTML Anda.
Menggunakan well-formed "close to XHTML" sintaks, bisa menjadi cerdas.
Selalu menjaga gaya Anda cerdas, rapi, bersih, dan well-formed.
Gunakan Dokumen Benar Type
Selalu menyatakan jenis dokumen sebagai baris pertama dalam dokumen Anda:
<!DOCTYPE html>Jika Anda ingin konsistensi dengan tag huruf kecil, Anda dapat menggunakan:
<!DOCTYPE html>Gunakan Bawah Kasus Nama Element
HTML5 memungkinkan pencampuran huruf besar dan huruf kecil di nama elemen.
Kami merekomendasikan menggunakan nama elemen huruf kecil:
- Pencampuran nama besar dan huruf kecil yang buruk
- Pengembang digunakan untuk menggunakan nama huruf kecil (as in XHTML)
- Huruf kecil terlihat lebih bersih
- Huruf kecil lebih mudah untuk menulis
Buruk:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>Sangat buruk:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>Baik:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>Tutup Semua HTML Elements
Dalam HTML5, Anda tidak harus menutup semua elemen (for example the <p> element) .
Sebaiknya menutup semua elemen HTML:
Terlihat buruk:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>Mencari yang baik:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>Tutup Kosong HTML Elements
Dalam HTML5, itu adalah opsional untuk menutup elemen kosong.
Ini diperbolehkan:
<meta charset="utf-8">Ini juga diperbolehkan:
<meta charset="utf-8" />Slash (/) diperlukan dalam XHTML dan XML.
Jika Anda mengharapkan perangkat lunak XML untuk mengakses halaman Anda, mungkin ide yang baik untuk tetap.
Gunakan Bawah Kasus Atribut Nama
HTML5 memungkinkan pencampuran huruf besar dan huruf kecil dalam nama atribut.
Kami merekomendasikan menggunakan nama atribut huruf kecil:
- Pencampuran nama besar dan huruf kecil yang buruk
- Pengembang digunakan untuk menggunakan nama huruf kecil (as in XHTML)
- Huruf kecil terlihat lebih bersih
- Huruf kecil lebih mudah untuk menulis
Terlihat buruk:
<div CLASS="menu">Mencari yang baik:
<div class="menu">Nilai kutipan Atribut
HTML5 memungkinkan nilai atribut tanpa tanda kutip.
Sebaiknya mengutip nilai atribut:
- Anda harus menggunakan tanda kutip jika nilai berisi spasi
- Pencampuran gaya tidak pernah baik
- nilai-nilai dikutip lebih mudah dibaca
Ini tidak akan bekerja, karena nilai mengandung spasi:
<table class=table striped>Ini akan bekerja:
<table class="table striped">Atribut gambar
Selalu gunakan alt atribut dengan gambar. Hal ini penting ketika gambar tidak dapat dilihat.
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">Selalu menentukan ukuran gambar. Ini mengurangi berkedip-kedip karena browser dapat memesan ruang untuk gambar sebelum dimuat.
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px ">Ruang dan Tanda Sama
Ruang di sekitar tanda sama adalah hukum:
<link rel = "stylesheet" href = "styles.css">Tapi ruang-kurang lebih mudah dibaca, dan kelompok entitas yang lebih baik bersama-sama:
<link rel="stylesheet" href="styles.css">Hindari Long Code Garis
Bila menggunakan editor HTML, itu tidak nyaman untuk menggulir ke kanan dan kiri untuk membaca kode HTML.
Cobalah untuk menghindari baris kode lebih panjang dari 80 karakter.
Garis kosong dan Indentasi
Jangan menambahkan baris kosong tanpa alasan.
Untuk dibaca, tambahkan baris kosong untuk memisahkan blok kode besar atau logis.
Untuk dibaca, tambahkan 2 ruang lekukan. Jangan gunakan TAB.
Jangan gunakan baris kosong yang tidak perlu dan lekukan. Hal ini tidak perlu untuk menggunakan baris kosong antara item pendek dan terkait. Hal ini tidak perlu indent setiap elemen:
yang tidak perlu:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
</p>
</body>Lebih baik:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>
</body>Tabel Contoh:
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>Daftar Contoh:
<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>Menghilangkan <html> dan <body> ?
Dalam standar HTML5, <html> tag dan <body> tag dapat dihilangkan.
Kode berikut akan memvalidasi sebagai HTML5:
Contoh
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p> Cobalah sendiri " Kami tidak menyarankan menghilangkan <html> dan <body> tag.
The <html> elemen root dokumen. Ini adalah tempat yang direkomendasikan untuk menentukan bahasa halaman:
<!DOCTYPE html>
<html lang="en-US">Mendeklarasikan bahasa adalah penting untuk aplikasi aksesibilitas (screen readers) dan mesin pencari.
Menghilangkan <html> atau <body> dapat crash DOM dan perangkat lunak XML.
Menghilangkan <body> dapat menghasilkan kesalahan dalam browser lama (IE9) .
Menghilangkan <head> ?
Dalam standar HTML5, <head> tag juga bisa dihilangkan.
Secara default, browser akan menambahkan semua elemen sebelum <body> , untuk default <head> elemen.
Anda dapat mengurangi kompleksitas HTML, dengan menghilangkan <head> tag:
Contoh
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> Cobalah sendiri " Menghilangkan tag adalah asing bagi pengembang web. Ini butuh waktu untuk ditetapkan sebagai pedoman.
meta data
The <title> elemen yang diperlukan dalam HTML5. Membuat judul yang bermakna mungkin:
<title>HTML5 Syntax and Coding Style</title>Untuk memastikan interpretasi yang tepat, dan pengindeksan mesin pencari yang benar, baik bahasa dan pengkodean karakter harus didefinisikan sedini mungkin dalam dokumen:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>HTML5 Syntax and Coding Style</title>
</head>HTML Komentar
Komentar singkat harus ditulis dalam satu baris, dengan spasi setelah <!-- and a space before --> :
<!-- This is a comment -->Komentar panjang, mencakup banyak baris, harus ditulis dengan <!-- and --> Pada baris yang berbeda:
<!--
This is a long comment example. This is a long comment example. This is a long comment example.
This is a long comment example. This is a long comment example. This is a long comment example.
-->komentar panjang lebih mudah untuk mengamati, jika mereka menjorok 2 spasi.
Style Sheets
Gunakan sintaks yang sederhana untuk menghubungkan style sheet (the type attribute is not necessary) :
<link rel="stylesheet" href="styles.css">aturan singkat dapat tertulis dikompresi, pada satu baris, seperti ini:
p.into {font-family: Verdana; font-size: 16em;}aturan lama harus ditulis lebih dari beberapa baris:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}- Tempatkan braket pembukaan pada baris yang sama sebagai pemilih.
- Gunakan satu ruang sebelum braket pembukaan.
- Gunakan 2 ruang lekukan.
- Gunakan usus ditambah satu ruang antara masing-masing properti dan nilainya.
- Gunakan spasi setelah setiap koma atau titik koma.
- Gunakan koma setelah setiap pasangan properti-nilai, termasuk yang terakhir.
- Hanya menggunakan tanda kutip nilai jika nilai berisi spasi.
- Tempatkan braket penutupan pada baris baru, tanpa spasi terkemuka.
- Hindari garis-garis lebih dari 80 karakter.
Menambahkan spasi setelah koma, atau titik koma, adalah aturan umum dalam semua jenis tulisan.
Memuat JavaScript dalam HTML
Gunakan sintaks yang sederhana untuk memuat skrip eksternal (the type attribute is not necessary) :
<script src="myscript.js">Mengakses Elemen HTML dengan JavaScript
Sebuah konsekuensi dari menggunakan "untidy" gaya HTML, mungkin mengakibatkan kesalahan JavaScript.
Kedua pernyataan JavaScript akan menghasilkan hasil yang berbeda:
Jika memungkinkan, gunakan konvensi yang sama penamaan (as JavaScript) di HTML.
Kunjungi JavaScript Style Guide .
Gunakan Bawah Kasus Nama File
Kebanyakan server web (Apache, Unix) adalah case sensitif tentang nama file:
london.jpg tidak dapat diakses sebagai London.jpg.
Server web lainnya (Microsoft, IIS) tidak case sensitif:
london.jpg dapat diakses sebagai London.jpg atau london.jpg.
Jika Anda menggunakan campuran huruf besar dan kecil, Anda harus sangat konsisten.
Jika Anda berpindah dari kasus tidak sensitif, untuk kasus server yang sensitif, bahkan kesalahan kecil akan mematahkan web Anda.
Untuk menghindari masalah ini, selalu menggunakan nama file huruf kecil (if possible) .
Ekstensi File
File HTML harus memiliki ekstensi html (or .htm ) .
File CSS harus memiliki ekstensi .css.
File JavaScript harus memiliki ekstensi js.
Perbedaan Antara .htm dan .html
Tidak ada perbedaan antara .htm dan ekstensi .html. Keduanya akan diperlakukan sebagai HTML oleh browser web atau web server.
Perbedaan adalah budaya:
.htm "smells" dari sistem DOS awal dimana sistem membatasi ekstensi untuk 3 karakter.
.html "smells" dari sistem operasi Unix yang tidak memiliki keterbatasan ini.
Perbedaan teknis
Ketika URL tidak menentukan nama file (like http://www.w3ii.com/css/) , server mengembalikan nama file default. nama file standar umum adalah index.html, index.htm, default.html, dan default.htm.
Jika server Anda dikonfigurasi hanya dengan "index.html" sebagai nama file default, file Anda harus dinamai "index.html" , bukan "index.htm."
Namun, server dapat dikonfigurasi dengan lebih dari satu nama file default, dan biasanya Anda dapat mengatur sebanyak nama file standar yang diperlukan.
Pokoknya, ekstensi penuh untuk file HTML html, dan tidak ada alasan itu tidak boleh digunakan.