Panduan Style HTML


Kode HTML yang konsisten, bersih, dan rapi memudahkan orang lain membaca dan memahami kode Anda.

Berikut beberapa panduan dan tips untuk membuat kode HTML yang baik.


Selalu Deklarasikan Jenis Dokumen

Selalu deklarasikan jenis dokumen sebagai baris pertama dalam dokumen Anda.

Jenis dokumen yang benar untuk HTML adalah:

<!DOCTYPE html>

Gunakan Nama Elemen Huruf Kecil

HTML memungkinkan pencampuran huruf besar dan kecil dalam nama elemen.

Namun, sebaiknya gunakan nama elemen huruf kecil, karena:

  • Mencampur nama huruf besar dan huruf kecil terlihat buruk
  • Pengembang (developer) biasanya menggunakan nama huruf kecil
  • Huruf kecil terlihat lebih bersih
  • Huruf kecil lebih mudah untuk diketik

Baik:

<body>
<p>Ini adalah sebuah paragraf.</p>
</body>

Buruk:

<BODY>
<P>Ini adalah sebuah paragraf.</P>
</BODY>

Tutup Semua Elemen HTML

Di HTML, Anda tidak harus menutup semua elemen (misalnya elemen <p>).

Namun, sangat disarankan untuk menutup semua elemen HTML, seperti ini:


Baik:

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

Buruk:

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

Gunakan Nama Atribut Huruf Kecil

HTML memungkinkan pencampuran huruf besar dan huruf kecil dalam nama atribut.

Namun, sebaiknya gunakan nama atribut huruf kecil, karena:

  • Mencampur nama huruf besar dan huruf kecil terlihat buruk
  • Pengembang biasanya menggunakan nama huruf kecil
  • Huruf kecil terlihat lebih bersih
  • Huruf kecil lebih mudah untuk ditulis

Baik:

<a href="https://www.ianzune.com/html/">Kunjungi tutorial HTML saya</a>

Buruk:

<a HREF="https://www.ianzune.com/html/">Kunjungi tutorial HTML saya</a>

Selalu Kutip Nilai Atribut

HTML memungkinkan nilai atribut tanpa tanda kutip.

Namun, kami merekomendasikan mengutip nilai atribut, karena:

  • Pengembang biasanya mengutip nilai atribut
  • Nilai yang dikutip lebih mudah dibaca
  • Anda HARUS menggunakan tanda kutip jika nilainya mengandung spasi

Baik:

<table class="striped">

Buruk:

<table class=striped>

Sangat buruk:

Ini tidak akan berfungsi, karena nilainya mengandung spasi:

<table class=table striped>

Selalu Tentukan alt, lebar, dan tinggi untuk Gambar

Selalu tentukan atribut alt untuk gambar. Atribut ini penting jika gambar karena alasan tertentu tidak dapat ditampilkan.

Juga, selalu tentukan width dan height dari gambar. Ini mengurangi kedipan, karena browser dapat menyediakan ruang untuk gambar sebelum memuat.


Baik:

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

Buruk:

<img src="html5.gif">

Spasi dan Tanda Setara

HTML memungkinkan spasi di sekitar tanda yang sama. Namun tanpa spasi lebih mudah dibaca dan mengelompokkan entitas menjadi lebih baik.


Baik:

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

Buruk:

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

Hindari Baris Kode Panjang

Saat menggunakan editor HTML, TIDAK nyaman untuk menggulir ke kanan dan kiri untuk membaca kode HTML.

Cobalah untuk menghindari baris kode yang terlalu panjang.


Baris Kosong dan Indentasi

Jangan menambahkan baris kosong, spasi, atau indentasi tanpa alasan.

Untuk mudah dibaca, tambahkan baris kosong untuk memisahkan blok kode besar atau logis.

Untuk mudah dibaca, tambahkan dua spasi indentasi. Jangan gunakan tombol tab.


Baik:

<body>

<h1>Kota Terkenal</h1>

<h2>Jakarta</h2>
<p>Jakarta adalah ibu kota Indonesia, yang terletak di pulau Jawa,
dan menjadi salah satu kota metropolitan.
Jakarta menjadi pusat pemerintahan dan bisnis di Indonesia,
serta rumah bagi banyak keluarga pejabat pemerintah.</p>

Buruk:

<body>

  <h1>Kota Terkenal</h1>

  <h2>Jakarta</h2>

  <p>
    Jakarta adalah ibu kota Indonesia, yang terletak di pulau Jawa,
    dan menjadi salah satu kota metropolitan.
    Jakarta menjadi pusat pemerintahan dan bisnis di Indonesia,
    serta rumah bagi banyak keluarga pejabat pemerintah.
  </p>

</body>

Contoh Tabel yang Baik:

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

Contoh Daftar yang Baik:

 <ul>
  <li>Pontianak</li>
  <li>Mekah</li>
  <li>Madinah</li>
</ul>

Jangan Lewatkan Elemen <title>

Elemen <title> diperlukan dalam HTML.

Isi judul halaman sangat penting untuk pengoptimalan mesin pencari (SEO). Judul halaman digunakan oleh algoritma mesin pencari untuk memutuskan urutan saat daftar halaman dalam hasil pencarian.


Fungsi elemen <title>:

  • mendefinisikan judul di bilah alat browser
  • memberikan judul untuk halaman tersebut ketika ditambahkan ke favorit
  • menampilkan judul halaman dalam hasil mesin pencari

Jadi, cobalah untuk membuat judul seakurat mungkin:

<title>Panduan Style HTML</title>

Menghilangkan <html> dan <body>

Halaman HTML akan memvalidasi tanpa tag <html> dan <body>:


Contoh

<!DOCTYPE html>
<head>
  <title>Judul Halaman</title>
</head>

<h1>Ini adalah heading</h1>
<p>Ini adalah paragraf.</p>

Namun, sangat disarankan untuk selalu menambahkan tag <html> dan <body>.

Menghilangkan tag <body> dapat menimbulkan kesalahan di browser lama.

Menghilangkan <html> dan <body> juga dapat merusak perangkat lunak DOM dan XML.


Menghilangkan <head>

Tag <head> HTML juga bisa dihilangkan.

Browser akan menambahkan semua elemen sebelum tag <body>, ke elemen default <head>.


Contoh

<!DOCTYPE html>
<html>
<title>Halaman Judul</title>
<body>

<h1>Ini adalah heading</h1>
<p>Ini adalah paragraf.</p>

</body>
</html>

Namun, tetap sebaiknya gunakan tag <head>.


Tutup Elemen HTML Kosong?

Dalam HTML, adalah opsional untuk menutup elemen kosong.

Diizinkan:

<meta charset="utf-8">

Juga Diizinkan:

<meta charset="utf-8" />

Jika Anda mengharapkan perangkat lunak XML / XHTML untuk mengakses halaman Anda, pertahankan garis miring penutup (/), karena diperlukan dalam XML dan XHTML.


Tambahkan Atribut lang

Anda harus selalu menyertakan atribut lang di dalam tag <html>, untuk menyatakan bahasa halaman Web. Ini dimaksudkan untuk membantu mesin pencari dan browser.


Contoh

<!DOCTYPE html>
<html lang="en-us">
<head>
  <title>Halaman Judul</title>
</head>
<body>

<h1>Ini adalah heading</h1>
<p>Ini adalah paragraf.</p>

</body>
</html>

Meta Data

Untuk memastikan interpretasi yang tepat dan pengindeksan mesin pencari yang benar, bahasa dan pengkodean karakter <meta charset="charset"> harus didefinisikan sedini mungkin dalam dokumen HTML: 

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="UTF-8">
  <title>Halaman Judul</title>
</head>

Mengatur Viewport (Area Pandang)

Viewport atau Area pandang adalah area halaman web yang terlihat oleh pengguna. Dan bervariasi menurut perangkat, akan menjadi lebih kecil di ponsel daripada di layar komputer.

Anda harus memasukkan elemen <meta> berikut di semua halaman web Anda: 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Ini akan memberikan instruksi kepada browser tentang cara mengontrol dimensi dan penskalaan halaman.

Bagian width=device-width mengatur lebar halaman untuk mengikuti lebar layar perangkat (yang akan bervariasi tergantung pada perangkat).

Bagian initial-scale=1.0 mengatur tingkat zoom awal saat halaman pertama kali dimuat oleh browser.


Komentar HTML

Komentar singkat harus ditulis dalam satu baris, seperti ini:

<!-- This is a comment -->

Komentar yang lebih dari satu baris, harus ditulis seperti ini:

<!--
  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 diamati jika diberi jarak dengan dua spasi.


Menggunakan Style Sheets

Gunakan sintaks sederhana untuk menautkan ke style sheets (atribut type tidak diperlukan): 

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

Aturan CSS pendek dapat ditulis dikompresi, seperti ini:

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

Aturan CSS yang panjang harus ditulis dalam beberapa baris:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}

  • Tempatkan braket pembuka pada baris yang sama dengan selektor
  • Gunakan satu spasi sebelum kurung buka
  • Gunakan dua spasi indentasi
  • Gunakan titik koma setelah setiap pasangan nilai properti, termasuk yang terakhir
  • Hanya gunakan tanda kutip di sekitar nilai jika nilainya mengandung spasi
  • Tempatkan braket penutup pada baris baru, tanpa spasi di depan

Memuat JavaScript dalam HTML

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

<script src="myscript.js">

Mengakses Elemen HTML dengan JavaScript

Menggunakan kode HTML yang "tidak rapi" dapat menyebabkan kesalahan JavaScript.

Kedua pernyataan JavaScript ini akan menghasilkan hasil yang berbeda:

getElementById("Demo").innerHTML = "Hello";
getElementById("demo").innerHTML = "Hello";

Gunakan Nama File Huruf Kecil

Beberapa server web (Apache, Unix) peka huruf besar kecil tentang nama file: "london.jpg" dan tidak dapat diakses sebagai "London.jpg".

Server web lain (Microsoft, IIS) tidak peka huruf besar/kecil: "london.jpg" dapat diakses sebagai "London.jpg".

Jika Anda menggunakan campuran huruf besar dan kecil, Anda harus menyadari hal ini.

Jika Anda berpindah dari case-insensitive ke case-sensitive server, bahkan kesalahan kecil pun akan merusak web Anda.

Untuk menghindari masalah ini, selalu gunakan nama file huruf kecil.


Ekstensi File

File HTML harus memiliki ekstensi .html (.htm diperbolehkan).

File CSS harus memiliki ekstensi .css.

File JavaScript harus memiliki ekstensi .js.


Perbedaan Antara .htm dan .html?

Tidak ada perbedaan antara ekstensi file .htm dan .html.

Keduanya akan diperlakukan sebagai HTML oleh browser web dan server web apa pun.


Nama File Default

Ketika URL tidak menentukan nama file di akhir (seperti "https://www.ianzune.com/"), server hanya menambahkan nama file default, seperti "index.html", "index.htm", "default.html", atau "default.htm".

Jika server Anda dikonfigurasi hanya dengan "index.html" sebagai nama file default, file Anda harus bernama "index.html", dan bukan "default.html".

Namun, server dapat dikonfigurasi dengan lebih dari satu nama file default. Biasanya Anda dapat mengatur nama file default sebanyak yang Anda inginkan.


Sumber referensi: w3schools

Komentar

Posting Komentar