Panduan Gaya dan Konvensi Kode (5) HTML

Konvensi kode HTML

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

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

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

HTML5 akan lebih lembut dalam proses verifikasi kode.

Dengan HTML5, anda harus menciptakan sendiriPraktik yang terbaik, pedoman gaya, dan konvensi kode.

Cerdas dan berjaminan masa mendatang

Penggunaan logis gaya yang dapat membuat orang lain dengan mudah memahami dan menggunakan HTML anda.

Di masa mendatang, program seperti pembaca XML mungkin akan memerlukan untuk membaca HTML anda.

Menggunakan sintaks yang baik seperti XHTML dapat membuatnya lebih cerdas.

Keterangan:Pastikan gaya stylis anda cerdas, bersih, bersih, dan berformat yang baik.

Gunakan jenis dokumen yang benar

Pastikan selalu mengumumkan jenis dokumen di baris pertama dokumen:

<!DOCTYPE html>

Jika anda selalu mempertahankan tanda terima kecil, maka anda dapat menggunakan:

<!doctype html>

Gunakan nama elemen kecil

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

Kami menyarankan untuk menggunakan nama elemen kecil:

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

Tidak baik sekali:

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

Sangat buruk:

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

Bahkan cukup baik:

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

Menutup semua elemen HTML

Dalam HTML5, anda tidak perlu menutup semua elemen (seperti elemen <p>).

Kami menyarankan untuk menutup semua elemen HTML:

Kelihatan buruk:

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

Kelihatan bagus:

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

Penutup elemen HTML kosong

Pada HTML5, penutup elemen kosong adalah pilihan.

Diizinkan seperti ini:

<meta charset="utf-8">

Juga diizinkan seperti ini:

<meta charset="utf-8" />

Sisi miring (/) adalah penting di dalam XHTML dan XML.

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

Gunakan nama atribut kecil

HTML5 mengizinkan nama atribut campuran besar dan kecil.

Kami menyarankan untuk menggunakan nama atribut kecil:

  • Nama atribut gabungan adalah buruk
  • Para pengembang berada di adat untuk menggunakan nama atribut kecil (contoh di dalam XHTML)
  • Nama atribut kecil terlihat lebih bersih menurut situasi
  • Nama atribut kecil lebih mudah ditulis

Kelihatan buruk:

<div CLASS="menu">

Kelihatan bagus:

<div class="menu">

Nilai atribut ditulis di dalam tanda kutip

HTML5 mengizinkan nilai atribut tanpa tanda kutip.

Kami menyarankan untuk menambahkan tanda kutip ke nilai atribut:

  • Jika nilai atribut mengandung nilai, maka harus digunakan tanda kutip
  • Gaya gabungan adalah sangat buruk
  • Nilai yang ditulis di dalam tanda kutip lebih mudah dibaca

Nilai atribut ini tidak sah karena mengandung spasi:

<table class=table striped>

Ini adalah yang sah:

<table class="table striped">

Atribut yang diperlukan

Pertahankan selalu untuk menggunakan gambar alt Atribut. Atribut ini penting saat gambar tidak dapat ditampilkan.

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

Pertahankan selalu untuk menentukan ukuran gambar. Hal ini akan mengurangi blinks, karena browser akan mempertahankan ruang untuk gambar sebelum gambar dimuat.

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

Spasi dan tanda sama dengan

Spasi di sebelah kiri dan kanan tanda sama dengan adalah sah:

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

tetapi ruang kosong yang jarang lebih mudah dibaca, Tetapi ruang kosong yang jarang lebih mudah dibaca, dan mengelompokkan entitas menjadi suatu kesatuan yang lebih baik:

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

hindari baris kode yang panjang

Ketika menggunakan editor HTML, bergerak ke kiri dan kanan untuk membaca kode HTML sangat不便.

Jangan perlu membiarkan baris kode melebihi 80 karakter.

Baris kosong dan indentasi

Jangan menambah baris kosong tanpa alasan.

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

Untuk meningkatkan keterbacaan, tambahkan indentasi dengan dua spasi. Jangan gunakan TAB.

Jangan gunakan baris kosong dan indentasi yang tidak penting.

Tidak perlu:

<body>
  <h1>Bandar Terkenal</h1>
  <h2>Tokyo</h2>
  <p>
    Tokyo adalah ibu kota Jepang, pusat Kawasan Besar Tokyo,
    dan kawasan metropolitan yang paling padat di dunia.
    Ia adalah tempat kerajaan Jepang dan Istana Kerajaan,
    dan tempat tinggal keluarga kerajaan Jepang.
  </p>
</body>

Lebih baik:

<body>
<h1>Bandar Terkenal</h1>
<h2>Tokyo</h2>
<p>
Tokyo adalah ibu kota Jepang, pusat Kawasan Besar Tokyo,
dan kawasan metropolitan yang paling padat di dunia.
Ia adalah tempat kerajaan 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 diabaikan <html> dan <body>?

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

Kod berikut adalah untuk diuji sesuai HTML5:

Contoh

<!DOCTYPE html>
<head>
  <title>Tile Laman</title>
</head>
<h1>Ini adalah tajuk.</h1>
<p>Ini adalah paragraf.</p>

Coba sendiri

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

Elemen <html> adalah elemen dasar teks. Ia adalah tempat ideal untuk menetapkan bahasa laman.

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

Pengisytihara bahasa penting untuk aplikasi aksesabiliti (pembaca layar) dan pencari.

Mengabaikan <html> atau <body> boleh meletakkan DOM dan perisian XML runtuh.

Mengabaikan <body> akan menyebabkan kesalahan di pelayar lama (IE9).

Dapat diabaikan <head>?

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

Secara lalai, pelayar akan menambahkan semua elemen sebelum <body> ke elemen <head> lalai.

Dengan mengabaikan tag <head>, anda dapat mengurangi ke kompleksan HTML:

Contoh

<!DOCTYPE html>
<html>
<title>Tile Laman</title>
<body>
  <h1>Ini adalah tajuk.</h1>
  <p>Ini adalah paragraf.</p>
</body>
</html>

Coba sendiri

Keterangan:Untuk para pengembang web, cara menyingkirkan tag adalah asing. Membangun aturan memerlukan waktu.

Metadata

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

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

Untuk memastikan penjelasan yang tepat, serta indeks pencari yang benar, tentukan bahasa dan pengkodean karakter 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

Keterangan yang pendek seharusnya ditulis di baris tunggal, dan tambahkan ruang setelah <!-- dan tambahkan ruang sebelum -->:

<!-- This is a comment -->

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

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

Keterangan yang panjang lebih mudah dilihat, jika mereka disingkat dua ruang

Gaya

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

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

Aturan yang pendek dapat disingkat ke baris satu, seperti ini:

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

Aturan yang panjang seharusnya dibagi menjadi beberapa baris:

body {
  warna_latar: lightgrey;
  keluarga_teks: "Arial Black", Helvetica, sans-serif;
  ukuran_teks: 16em;
  warna: hitam;
}
  • Tanda kurung buka dan pemilih berada di baris yang sama
  • Gunakan ruang sebelum tanda kurung buka
  • Gunakan indentasi berjumlah dua karakter
  • Gunakan tanda titik bertitik dan ruang di antara atribut dan nilai
  • Gunakan ruang setelah setiap koma atau tanda titik serupa
  • Gunakan tanda titik koma setelah setiap pasangan nilai atribut (termasuk yang terakhir)
  • Hanya gunakan tanda kutip untuk melingkungi nilai apabila nilai mengandung ruang
  • Letakkan tanda kurung tutup di baris baru, tanpa ruang sebelumnya
  • Jiwa untuk menghindari setiap baris melebihi 80 karakter

Keterangan:Menambahkan ruang di belakang koma atau tanda titik serupa adalah aturan umum untuk semua jenis penulisan.

Muatkan JavaScript di HTML

Gunakan sintaks sederhana untuk memuat skrip eksternal (atribut type tak diperlukan):

<script src="myscript.js">

Mengakses elemen HTML melalui JavaScript

Konsekuensi penggunaan gaya HTML yang 'kelihatan buruk' 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 pemberian nama yang sama di HTML (dengan JavaScript).

Buka panduan gaya JavaScript.

Gunakan nama berkas kecil

Sebagian besar web server (Apache, Unix) hati hati dengan besar kecil huruf nama berkas:

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

Web server lain (Microsoft, IIS) tak berhati hati dengan besar kecil huruf:

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

Jika Anda menggunakan penggunaan ukuran yang campur, Anda harus tetap konsisten dengan tinggi.

Jika Anda berpindah dari server yang tak berhati hati dengan besar kecil huruf ke server yang hati hati, kesalahan kecil ini akan merusak situs web Anda.

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

Ekstensi Berkas

Nama berkas HTML seharusnya menggunakan ekstensi .html(tidak .htm)

Berkas CSS seharusnya menggunakan ekstensi .css.

Berkas JavaScript seharusnya menggunakan ekstensi .js.