HTML Style Guide dan Code Convention dari w3schools

HTML Style Guide dan Code Convention dari w3schools dapat digunakan sebagai pedoman penulisan kode saat berkolaborasi dalam proyek HTML. Tentusaja, code convention atau style guide ini bakal jadi cetak biru penulisan HTML agar “seirama” dengan developer lain. Jika ingin mengetahui lebih jauh pentingnya code convention dapat membaca artikel berjudul “Gunakan Code Convention / Code Style Guide dari Google atau Airbnb untuk Proyek Kolaborasi“.

Aturan pertama adalah selalu deklarasi dokumen menggunakan kode berikut:

<!DOCTYPE html>

Setiap penulisan elemen HTML selalu gunakan lowercase atau huruf kecil.

<body>
</body>

Jangan menuliskan elemen HTML menggunakan uppercase atau huruf besar/kapital.

<BODY>
</BODY>

Sekalipun penulisan huruf kapital diperbolehkan, namun w3school merekemendasikan penggunaan huruf kecil karena lebih mudah dituliskan. Selain itu penggunaan huruf kecil akan terlihat lebih rapi. Menggabungkan huruf besar dan huruf kecil, sekalipun bisa akan terlihat buruk. Yang paling penting, kebanyakan developer menuliskan elemen HTML dalam huruf kecil.

W3school merekomendasikan menutup seluruh elemen HTML. Seperti elemen paragraf, sekalipun bisa dibaca oleh peramban tanpa penutup, sebaiknya gunakan penutup untuk semua elemen HTML.

<p>Ini adalah paragraf pertama
<p>Ini adalah paragraf kedua

Penulisan elemen HTML tanpa penutup tidak direkomendasikan, sebaiknya tulisan elemen HTML denan penutup

<p>Ini adalah paragraf pertama</p>
<p>Ini adalah paragraf kedua</p>

Selanjutnya selalu gunakan lowercase atau huruf kecil pada nama atribut dan selalu kutip nilai atribut.

//BURUK
<div ID=header></div>

//BAIK
<div id="header"></div>

Penggunaan kutipan diperlukan untuk menghindari kesalahan yang terjadi saat nama attribut mengandung spasi

//BURUK dan tidak dapat berjalan
<div id=header atas></div>

Selalu deklarasikan alt, width, dan height pada gambar

//BURUK
<img src="images/image1.jpg"/>

//BAIK
<img src="images/image1.jpg" alt="image1" style="width:10%;height:10%;">

HTML memperbolehkan penggunaan spasi setelah tanda equal (=) , namun jika mengikuti pedoman w3school sebaiknya hindari spasi

//BURUK
<img src = "images/image1.jpg" alt = "image1" style = "width:10px;height:10px;" >

//BAIK
<img src="images/image1.jpg" alt="image1" style="width:10px;height:10px;">

Hindari juga penulisan kode yang terlalu panjang, untuk membuatnya pendek hindari jeda enter tanpa alasan.

//BURUK
<body>

<h1>Title</h1>

<b>Sub Title</b>

<p>
Ini adalah paragraf pertama
</p>

</body>

//BAIK
<body>

<h1>Title</h1>

<b>Sub Title</b>
<p>Ini adalah paragraf pertama</p>

</body>

Selain tata aturan penulisan, dalam menuliskan baris kode HTML, anda tidak boleh melewatkan penulisan elemen berikut:

//WAJIB ADA menurut w3school

//elemen judul
<title>Judul</title>

//attribut bahasa
<html lang="en-us">

//meta data
<meta charset="UTF-8">

Penyimpanan berkas HTML bisa disimpan dengan file berekstensi .HTML juga .HTM

Masih banyak lagi style guide HTML yang direkomendasikan oleh w3school. Jika ingin mengetahui setiap aturan HTML Style Guide dan Code Convention dari w3schools anda dapat melihatnya pada tautan berikut ini https://www.w3schools.com/html/html5_syntax.asp.