Panduan Gaya HTML
Kode HTML yang konsisten, bersih, dan rapi memudahkan orang lain untuk membaca dan memahami kode Anda.
Berikut adalah beberapa panduan dan tips untuk membuat kode HTML yang baik.
Selalu Nyatakan Jenis Dokumen
Selalu nyatakan 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 huruf kecil dalam nama elemen.
Namun, sebaiknya gunakan nama elemen huruf kecil, karena:
- Mencampur nama huruf besar dan kecil terlihat buruk
- Pengembang biasanya menggunakan nama huruf kecil
- Huruf kecil terlihat lebih bersih
- Huruf kecil lebih mudah ditulis
Bagus:
<body>
<p>This is a paragraph.</p>
</body>Buruk:
<BODY>
<P>This is a paragraph.</P>
</BODY>Tutup Semua Elemen HTML
Dalam HTML, Anda tidak harus menutup semua elemen (misalnya <p>elemen).
Namun, kami sangat menyarankan untuk menutup semua elemen HTML, seperti ini:
Bagus:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>Buruk:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</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 kecil terlihat buruk
- Pengembang biasanya menggunakan nama huruf kecil
- Huruf kecil terlihat lebih bersih
- Huruf kecil lebih mudah ditulis
Bagus:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>Buruk:
<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>Selalu Mengutip Nilai Atribut
HTML memungkinkan nilai atribut tanpa tanda kutip.
Namun, kami menyarankan untuk mengutip nilai atribut, karena:
- Pengembang biasanya mengutip nilai atribut
- Nilai yang dikutip lebih mudah dibaca
- Anda HARUS menggunakan tanda kutip jika nilainya mengandung spasi
Bagus:
<table
class="striped">Buruk:
<table class=striped>Sangat buruk:
Ini tidak akan berfungsi, karena nilainya berisi spasi:
<table class=table striped>Selalu Tentukan alt, lebar, dan tinggi untuk Gambar
Selalu tentukan altatribut untuk gambar. Atribut ini penting jika gambar karena alasan tertentu tidak dapat ditampilkan.
Juga, selalu tentukan widthdan
heightdari gambar. Ini mengurangi kedipan, karena browser dapat memesan ruang untuk gambar sebelum dimuat.
Bagus:
<img
src="html5.gif" alt="HTML5" style="width:128px;height:128px">Buruk:
<img
src="html5.gif">Spasi dan Tanda Sama dengan
HTML memungkinkan spasi di sekitar tanda sama dengan. Tetapi space-less lebih mudah dibaca dan mengelompokkan entitas dengan lebih baik.
Bagus:
<link rel="stylesheet" href="styles.css">Buruk:
<link
rel = "stylesheet" href = "styles.css">Hindari Garis 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.
Garis Kosong dan Lekukan
Jangan menambahkan baris, spasi, atau lekukan kosong tanpa alasan.
Agar mudah dibaca, tambahkan baris kosong untuk memisahkan blok kode besar atau logis.
Agar mudah dibaca, tambahkan dua spasi lekukan. Jangan gunakan tombol tab.
Bagus:
<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>
Buruk:
<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>
Contoh Tabel yang Baik:
<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>
Contoh Daftar yang Baik:
<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
Jangan Pernah Lewati Elemen <title>
Elemen <title>ini diperlukan dalam HTML.
Isi judul halaman sangat penting untuk optimasi mesin pencari (SEO)! Judul halaman digunakan oleh algoritme mesin pencari untuk menentukan urutan saat mencantumkan halaman dalam hasil pencarian.
<title>elemen :
- mendefinisikan judul di bilah alat browser
- memberikan judul untuk halaman ketika ditambahkan ke favorit
- menampilkan judul halaman dalam hasil mesin pencari
Jadi, cobalah untuk membuat judul seakurat dan sebermakna mungkin:
<title>HTML
Style Guide and Coding Conventions</title>
Menghilangkan <html> dan <body>?
Halaman HTML akan divalidasi tanpa tag <html>dan
:<body>
Contoh
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Namun, kami sangat menyarankan untuk selalu menambahkan tag <html>dan
!<body>
Mengabaikan <body>dapat menghasilkan kesalahan di browser lama.
Menghilangkan <html>dan <body>
juga dapat merusak perangkat lunak DOM dan XML.
Menghilangkan <head>?
Tag HTML <head> juga dapat dihilangkan.
Browser akan menambahkan semua elemen sebelumnya <body>, ke elemen default <head>
.
Contoh
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Namun, sebaiknya gunakan <head>tag.
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 langatribut di dalam <html>tag, untuk mendeklarasikan bahasa halaman Web. Ini dimaksudkan untuk membantu mesin pencari dan browser.
Contoh
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Metadata
Untuk memastikan interpretasi yang tepat dan pengindeksan mesin pencari yang benar, bahasa dan pengkodean karakter harus didefinisikan sedini mungkin dalam dokumen HTML:<meta charset="charset">
<!DOCTYPE html>
<html
lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
Mengatur Viewport
Area pandang adalah area halaman web yang terlihat oleh pengguna. Ini bervariasi dengan perangkat - itu akan lebih kecil di ponsel daripada di layar komputer.
Anda harus menyertakan <meta>elemen berikut di semua halaman web Anda:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ini memberikan petunjuk kepada browser tentang cara mengontrol dimensi dan penskalaan halaman.
Bagian width=device-widthmengatur lebar halaman untuk mengikuti lebar layar perangkat (yang akan bervariasi tergantung pada perangkat).
Bagian initial-scale=1.0ini mengatur tingkat zoom awal saat halaman pertama kali dimuat oleh browser.
Berikut adalah contoh halaman web tanpa tag meta viewport, dan halaman web yang sama dengan tag meta viewport:
Tip: Jika Anda menjelajahi halaman ini dengan ponsel atau tablet, Anda dapat mengklik dua tautan di bawah untuk melihat perbedaannya.
Komentar HTML
Komentar singkat harus ditulis dalam satu baris, seperti ini:
<!-- This is a comment -->
Komentar yang membentang 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 indentasi dengan dua spasi.
Menggunakan Lembar Gaya
Use simple syntax for linking to style sheets (the
type attribute is not necessary):
<link rel="stylesheet" href="styles.css">
Short CSS rules can be written compressed, like this:
p.intro {font-family:Verdana;font-size:16em;}
Long CSS rules should be written over multiple lines:
body {
background-color: lightgrey;
font-family: "Arial
Black", Helvetica, sans-serif;
font-size: 16em;
color:
black;
}
- Place the opening bracket on the same line as the selector
- Use one space before the opening bracket
- Use two spaces of indentation
- Use semicolon after each property-value pair, including the last
- Only use quotes around values if the value contains spaces
- Place the closing bracket on a new line, without leading spaces
Loading JavaScript in HTML
Use simple syntax for loading external scripts (the
type attribute is not necessary):
<script src="myscript.js">
Accessing HTML Elements with JavaScript
Using "untidy" HTML code can result in JavaScript errors.
These two JavaScript statements will produce different results:
Example
getElementById("Demo").innerHTML = "Hello";
getElementById("demo").innerHTML
= "Hello";
Visit the JavaScript Style Guide.
Use Lower Case File Names
Some web servers (Apache, Unix) are case sensitive about file names: "london.jpg" cannot be accessed as "London.jpg".
Other web servers (Microsoft, IIS) are not case sensitive: "london.jpg" can be accessed as "London.jpg".
If you use a mix of uppercase and lowercase, you have to be aware of this.
If you move from a case-insensitive to a case-sensitive server, even small errors will break your web!
To avoid these problems, always use lowercase file names!
File Extensions
HTML files should have a .html extension (.htm is allowed).
CSS files should have a .css extension.
JavaScript files should have a .js extension.
Differences Between .htm and .html?
There is no difference between the .htm and .html file extensions!
Both will be treated as HTML by any web browser and web server.
Default Filenames
When a URL does not specify a filename at the end (like "https://www.w3schools.com/"), the server just adds a default filename, such as "index.html", "index.htm", "default.html", or "default.htm".
If your server is configured only with "index.html" as the default filename, your file must be named "index.html", and not "default.html".
However, servers can be configured with more than one default filename; usually you can set up as many default filenames as you want.