Panduan Gaya dan Konvensi Kode (5) HTML

Konvensi kode HTML

Pengembang web seringkali tak yakin tentang gaya kode dan sintaks yang digunakan dalam HTML.

Dalam periode 2000 sampai 2010, banyak pengembang web berpindah dari HTML ke XHTML.

Dengan XHTML, para pengembang harus menulis kode yang benar dan berformat baik.

HTML5 akan lebih lembut dalam proses verifikasi kode.

Dengan HTML5, Anda harus menciptakan sendiriPraktek yang terbaik, pedoman gaya, dan konvensi kode.

Cerdas dan berjaminan masa depan

Penggunaan yang logis dari gaya, dapat membuat orang lain dengan mudah memahami dan menggunakan HTML Anda.

Di masa mendatang, program seperti pemabaca XML, mungkin perlu membaca HTML Anda.

Menggunakan sintaks yang baik seperti XHTML, lebih cerdas.

Keterangan:Harap selalu mempertahankan gaya yang cerdas, bersih, bersih, dan berformat baik.

Gunakan tipe dokumen yang benar

Harap selalu menyatakan tipe dokumen di baris pertama dokumen:

<!DOCTYPE html>

Jika Anda selalu tetap menggunakan tag kecil, maka dapat digunakan:

<!doctype html>

Gunakan nama elemen kecil

HTML5 mengijinkan untuk menggunakan huruf campuran besar dan kecil dalam nama elemen.

Kami menyarankan untuk menggunakan nama elemen kecil:

  • Nama campuran huruf besar dan kecil tidak baik
  • Para pengembang biasa menggunakan nama kecil (seperti dalam XHTML)
  • Huruf kecil lebih bersih untuk ditulis
  • Huruf kecil lebih mudah untuk ditulis

Tidak terlalu baik:

<SECTION> 
  <p>Ini adalah paragraf.</p>
</SECTION>

Sangat buruk:

<Section> 
  <p>Ini adalah paragraf.</p>
</SECTION>

Cukup bagus:

<section> 
  <p>Ini adalah paragraf.</p>
</section>

Menutup semua elemen HTML

Dalam HTML5, Anda tidak perlu menutup semua elemen (contoh <p> elemen).

Kami menyarankan untuk menutup semua elemen HTML:

Tampak buruk:

<section>
  <p>This is a paragraph.
  <p>This is a paragraph.
</section>

Tampak bagus:

<section>
  <p>Ini adalah paragraf.</p>
  <p>Ini adalah paragraf.</p>
</section>

Penutup elemen HTML kosong

Dalam HTML5, penutup elemen kosong adalah pilihan.

Diizinkan seperti ini:

<meta charset="utf-8">

Juga diizinkan seperti ini:

<meta charset="utf-8" />

Garis bercut (/) di XHTML dan XML adalah wajib.

Jika Anda mengharapkan perangkat lunak XML untuk mengakses halaman Anda, tetap menjaga kebiasaan ini adalah ide yang bagus.

Gunakan nama atribut kecil

HTML5 mengizinkan nama atribut campuran kapital

Kami menyarankan untuk menggunakan nama atribut kecil:

  • Nama atribut gabungan tidak baik
  • Para pengembang biasa menggunakan nama atribut kecil (contoh di XHTML)
  • Nama atribut kecil tampak lebih bersih
  • Nama atribut kecil mudah ditulis

Tampak buruk:

<div CLASS="menu">

Tampak bagus:

<div class="menu">

Nilai atribut diquote

HTML5 mengizinkan nilai atribut tanpa kutipan

Kami menyarankan nilai atribut diquote:

  • Jika nilai atribut mengandung nilai, maka harus digunakan kutipan
  • Gaya gabungan sangat buruk
  • Nilai yang diquote lebih mudah dibaca

Nilai atribut ini tidak berlaku karena mengandung spasi:

<table class=table striped>

Ini adalah yang berlaku:

<table class="table striped">

Atribut yang diperlukan

Selalu gunakan gambar alt Atribut. Atribut ini penting saat gambar tidak dapat ditampilkan.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Selalu tentukan ukuran gambar. Ini akan mengurangi kenaikan, karena peramban akan menempatkan ruang untuk gambar sebelum gambar dimuat.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Spasi dan sama

Spasi di sebelah kiri dan kanan dari sama diperbolehkan:

<link rel = "stylesheet" href = "styles.css">

Tetapi meminimalisir spasi lebih mudah dibaca, Tetapi spasi yang sedikit lebih mudah dibaca, dan menggabungkan entitas yang lebih baik bersama-sama:

<link rel="stylesheet" href="styles.css">

Jangan gunakan baris kode yang panjang.

Ketika menggunakan editor HTML, membaca kode HTML dengan menggulir kiri dan kanan sangat不便.

Jangan pernah melebihi 80 karakter untuk baris kode.

Baris kosong dan indentasi

Jangan menambah baris kosong tanpa alasan.

Untuk meningkatkan keterbacaan, tambahkan baris kosong untuk memisahkan blok kode besar atau logis.

Untuk meningkatkan keterbacaan, tambahkan indentasi 2 spasi. Jangan gunakan TAB.

Jangan gunakan baris kosong dan indentasi yang tidak perlu.

Tidak perlu:

<body>
  <h1>Kota Terkenal</h1>
  <h2>Tokyo</h2>
  <p>
    Tokyo adalah ibu kota Jepang, pusat area Tokyo Besar,
    dan area metropolitan yang paling padat di dunia.
    Ini adalah tempat pemerintah Jepang dan Istana Kerajaan,
    dan tempat tinggal keluarga Kerajaan Jepang.
  </p>
</body>

Lebih baik:

<body>
<h1>Kota Terkenal</h1>
<h2>Tokyo</h2>
<p>
Tokyo adalah ibu kota Jepang, pusat area Tokyo Besar,
dan area metropolitan yang paling padat di dunia.
Ini adalah tempat pemerintah Jepang dan Istana Kerajaan,
dan tempat tinggal keluarga Kerajaan Jepang.
</p>
</body>

Contoh tabel:

<table>
  <tr>
    <th>Nama</th>
    <th>Deskripsi</th>
  <tr>
  <tr>
    <td>A</td>
    <td>Deskripsi A</td>
  <tr>
  <tr>
    <td>B</td>
    <td>Deskripsi B</td>
  <tr>
</table>

Contoh daftar:

<ol>
  <li>LondonA</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ol>

Dapat mengabaikan <html> dan <body>?

Dalam standar HTML5, tag <html> dan <body> dapat diabaikan.

Berikut adalah kode yang divalidasi sebagai HTML5:

Contoh

<!DOCTYPE html>
<head>
  <title>Judul Halaman</title>
</head>
<h1>Ini adalah judul.</h1>
<p>Ini adalah paragraf.</p>

Coba sendiri

Kami tidak menyarankan untuk mengabaikan tag <html> dan <body>.

Elemen <html> adalah elemen akar teks. Ini adalah tempat ideal untuk menentukan bahasa halaman.

<!DOCTYPE html>
<html lang="en-US">

Untuk aplikasi aksesibilitas (pembaca layar) dan mesin pencari, deklarasi bahasa penting.

Mengabaikan <html> atau <body> dapat membuat DOM dan software XML mengalami kegagalan.

Mengabaikan <body> dapat menyebabkan kesalahan di peramban lama (IE9).

Dapat mengabaikan <head>?

Dalam standar HTML5, tag <head> juga dapat diabaikan.

Secara default, peramban akan menambahkan semua elemen sebelum <body> ke elemen <head> default.

Dengan mengabaikan tag <head>, Anda dapat mengurangi kompleksitas HTML:

Contoh

<!DOCTYPE html>
<html>
<title>Judul Halaman</title>
<body>
  <h1>Ini adalah judul.</h1>
  <p>Ini adalah paragraf.</p>
</body>
</html>

Coba sendiri

Keterangan:Untuk para pendekar web, cara membuang tanda penutup adalah asing. Membangun aturan memerlukan waktu.

Metadata

Elemen <title> adalah wajib di HTML5. Silakan buat judul yang berarti.

<title>HTML5 Syntax and Coding Style</title>

Untuk memastikan penjelasan yang tepat dan indeks pencari yang benar, tentukan bahasa dan karakter encoding di dokumen secepat mungkin:

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Syntax and Coding Style</title>
</head>

Komentar HTML

komentar yang pendek harus ditulis di baris tunggal, dan tambahkan spasi setelah --> dan sebelum -->:

<!-- This is a comment -->

komentar yang panjang, melintasi beberapa baris, harus ditulis di baris terpisah melalui <!-- dan -->:

<!-- 
  Ini adalah contoh komentar yang panjang. Ini adalah contoh komentar yang panjang. Ini adalah contoh komentar yang panjang.
  Ini adalah contoh komentar yang panjang. Ini adalah contoh komentar yang panjang. Ini adalah contoh komentar yang panjang.
-->

komentar yang panjang lebih mudah dilihat jika mereka disapu dengan 2 spasi.

Gaya

Gunakan sintaks sederhana untuk menghubungkan gaya (attribut type tidak diperlukan):

<link rel="stylesheet" href="styles.css">

aturan yang pendek dapat dikompresi ke baris satu, seperti ini:

p.into {font_family:"Verdana"; font-size:16em;}

aturan yang panjang harus dibagi menjadi beberapa baris:

body {
  warna_latar: lightgrey;
  font_family: "Arial Black", Helvetica, sans-serif;
  ukuran_teks: 16em;
  warna: hitam;
}
  • Tanda kurung buka dan pemilih berada di baris yang sama
  • Gunakan spasi sebelum tanda kurung buka
  • Gunakan indentasi 2 karakter
  • Gunakan tanda titik dan spasi setelah atribut dan nilai
  • Gunakan spasi setelah setiap koma atau tanda titik seru
  • Gunakan tanda titik koma setelah setiap pasangan nilai atribut (termasuk yang terakhir)
  • Hanya gunakan tanda kutip untuk membalut nilai jika nilai mengandung spasi
  • Letakkan tanda kurung penutup di baris baru, tanpa spasi sebelumnya
  • hindari setiap baris melebihi 80 karakter

Keterangan:Menambahkan spasi setelah koma atau tanda titik seru adalah aturan umum untuk semua tipe penulisan.

Memuat JavaScript di HTML

Gunakan sintaks sederhana untuk memuat skrip eksternal (attribut type tidak diperlukan):

<script src="myscript.js">

Akses Elemen HTML melalui JavaScript

Akibat dari gaya HTML yang 'sederhana', dapat menyebabkan kesalahan JavaScript.

Kedua kalimat JavaScript ini akan menghasilkan hasil yang berbeda:

var obj = getElementById("Demo")
var obj = getElementById("demo")

Coba sendiri

Jika memungkinkan, gunakan konvensi penamaan yang sama (dengan JavaScript) di HTML.

Buka panduan gaya JavaScript.

Gunakan nama berkas kecil

Sebagian besar server web (Apache, Unix) hati hati terhadap besaran huruf nama berkas:

Tidak dapat diakses dengan london.jpg untuk London.jpg.

Server web lain (Microsoft, IIS) tak berhati hati terhadap besaran huruf:

Dapat diakses dengan london.jpg atau London.jpg untuk London.jpg.

Jika menggunakan campuran besaran huruf, Anda harus mempertahankan konsistensi yang tinggi.

Jika Anda berpindah dari server yang tak berhati hati terhadap besaran huruf ke server yang hati hati terhadap besaran huruf, kesalahan kecil ini akan merusak situs Anda.

Untuk menghindari masalah ini, selalu gunakan nama berkas kecil (jika memungkinkan).

Ekstensi Berkas

Nama berkas HTML harus menggunakan ekstensi .html（bukan .htm）。

Berkas CSS harus menggunakan ekstensi .css.

Berkas JavaScript harus menggunakan ekstensi .js.