Home / HTML / Belajar HTML – Aturan Dasar Penulisan HTML

Belajar HTML – Aturan Dasar Penulisan HTML

Setelah membahas tentang struktur dasar HTML, kita akan masuk ke dalam aturan dasar penulisan HTML. Karena kita menggunakan HTML5, maka aturannya sedikit berbeda bila dibandingkan dengan XHTML (terutama jika anda pernah mempelajarinya). XHTML adalah ‘pendahulu’ dari HTML5. XHTML pada awalnya dirancang sebagai penerus HTML 4.01 yang dianggap ‘terlalu bebas’, dan karena itu XHTML dikenal dengan aturan penulisan yang lebih ketat. Ketika pengembangan XHTML berhenti dan tidak dilanjutkan, HTML5 hadir sebagai penerusnya. HTML5 membuat aturan-aturan penulisan ini menjadi ‘kembali longgar’. Sebagai contoh, jika di dalam XHTML penulisan tag dan atribut harus menggunakan huruf kecil, di dalam HTML5 hal ini tidak menjadi masalah.

Case Sensitivity

Case Sensitivity adalah istilah yang membahas apakah sebuah bahasa pemrograman membedakan penulisan huruf kecil dan huruf besar. Di dalam XHTML, seluruh tag, nama atribut, dan nilai atribut harus ditulis di dalam huruf kecil. Akan tetapi dalam HTML5, penulisan huruf besar dan huruf kecil akan dianggap sama. Baik tag <P> maupun tag <p> sama-sama diperbolehkan di dalam HTML5.

Walaupun demikian, karena faktor kebiasaan dan agar terkesan lebih rapi, saya menyarankan anda untuk menggunakan huruf kecil pada penulisan seluruh tag, atribut, dan nilai atribut.

Pengecualiannya adalah pada penulisan DTD, yakni ditulis menggunakan huruf besar: <!DOCTYPE html>. Walaupun kita juga bisa menulisnya menggunakan huruf kecil, seperti <!doctype html>, tapi mayoritas web programmer menggunakan huruf besar untuk penulisan DTD.

Self Closing Tag

Beberapa tag di dalam HTML ada yang tidak memiliki pasangan tag pembuka dan tag penutup, contohnya adalah tag <meta>, <br> dan <img>. Tag-tag ini disebut juga sebagai void element.

Di dalam XHTML, tag yang berdiri sendiri harus ditutup dengan cara menambahkan tanda garis miring depan ‘ / ‘ (forward slash) sebelum kurung siku penutup tag.

Sebagai contoh, tag <br> yang digunakan untuk membuat baris baru, di dalam XHTML ditulis menjadi <br />. Penulisan seperti ini disebut juga dengan self closing tag.

Di dalam HTML5, aturan ini tidak lagi diwajibkan. Penulisan <br> maupun <br /> sama-sama dianggap “sah”.

Beberapa programmer ada yang tetap menggunakan ‘gaya penulisan’ XHTML seperti: <br /> karena terkesan lebih rapi. Tapi ada pula yang berpendapat bahwa ini adalah cara ‘kuno’, dan cukup menulisnya dengan: <br>. Anda boleh mengikuti cara penulisan yang manapun, asal konsisten sepanjang kode HTML agar tidak membuat bingung.

Pasangan Tag Penutup

Karena sebagian besar tag ditulis berpasangan, kita harus hati-hati agar tidak lupa menulis pasangan tag penutup-nya. Kesalahan ini bisa berakibat tampilan halaman web jadi berantakan. Sebagai contoh, tag <em> dan tag <strong> digunakan untuk mempertegas sebuah kata atau kalimat. Tag <em> akan ditampilkan dengan huruf miring (italic), dan tag <strong> akan ditampilkan dengan huruf tebal (bold). Kedua tag ini banyak dipakai dalam paragraf. Jika kita ‘lupa’ menutup tag <em> atau tag <strong> tampilan seluruh halaman bisa jadi rusak. Sebagai contoh, perhatikan kode HTML berikut ini:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar HTML</title>
</head>
<body>
<h1>Belajar HTML</h1>
<p>Salah satu hal yang unik dari <strong>HTML</strong>
(dan juga <em>CSS & JavaScript<em>) adalah kita bisa
melihat dengan bebas kode-kode yang digunakan untuk
membuat sebuah halaman web.</p>
</body>
</html>

Belajar HTML - Aturan Dasar Penulisan HTML

Jika anda menjalankan kode HTML diatas, seluruh teks mulai dari ‘CSS & JavaScript’ hingga ‘halaman web.’ ditampilkan dengan huruf miring. Padahal yang saya inginkan untuk tampil miring hanya teks ‘CSS & JavaScript’ saja.

Letak kesalahan pada kode diatas adalah pada tag <em>, dimana saya lupa untuk menambahkan tanda penutup “</em>”. Seharusnya halaman diatas ditulis sebagai berikut:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar HTML</title>
</head>
<body>
<h1>Belajar HTML</h1>
<p>Salah satu hal yang unik dari <strong>HTML</strong>
(dan juga <em>CSS & JavaScript</em>) adalah kita bisa
melihat dengan bebas kode-kode yang digunakan untuk
membuat sebuah halaman web.</p>
</body>
</html>

Belajar HTML - Aturan Dasar Penulisan HTML

Whitespace

Whitespace adalah istilah yang merujuk kepada karakter ‘spasi’ yang tidak tampil di layar, contohnya adalah karakter spasi, tab, dan karakter enter (yang dikenal juga dengan karakter carriage returns).

Di dalam HTML, whitespace akan diabaikan, termasuk jika ditulis di dalam teks. Sebagai contoh, kedua kode HTML dibawah ini akan menghasilkan tampilan yang sama:


<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Belajar HTML</title>
</head><body><h1>Belajar HTML</h1><p>Jangan diganggu! lagi serius belajar.</p>
</body></html>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar HTML</title>
</head>
<body>
<h1>Belajar HTML</h1>
<p>Jangan diganggu! lagi serius belajar.</p>
</body>
</html>

Walaupun whitespace tidak akan diproses, menyisipkan spasi dan tab ke dalam kode HTML akan membuatnya lebih mudah dibaca.

Berkaitan dengan whitespace, dalam HTML terdapat tag <br> yang bisa digunakan sebagai pengganti ‘Enter’. Tag <br> merupakan singkatan dari break, akan membuat teks setelahnya tampil pada baris baru. Tag ini merupakan salah satu tag yang sangat sering anda jumpai.

Selain itu, HTML juga memiliki tag <hr> (Horizontal Line) untuk membuat garis horizontal. Berikut contoh penggunaannya:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar HTML</title>
</head>
<body>
Berikut adalah beberapa aplikasi web browser yang bisa anda gunakan: <br>
<hr>
Google Chrome <br>
Mozilla Firefox <br>
Microsoft Internet Explorer <br>
Opera <br>
Apple Safari <br>
</body>
</html>

Belajar HTML - Aturan Dasar Penulisan HTML

Membuat Komentar

Dalam membuat kode HTML (dan juga kode program pada umumnya), kadang kita perlu menambahkan beberapa keterangan di dalam kode program, apakah itu berupa catatan kecil tentang tanggal dan waktu program dibuat, atau keterangan untuk apa kita menulis kode tersebut.

Keterangan ini biasa disebut komentar (comment). Di dalam HTML, komentar dibuat menggunakan tag pembuka: <!– dan tag penutup: –>. Seluruh teks yang ada diantara kedua tag ini akan dianggap sebagai komentar sehingga tidak akan diproses dan tidak ditampilkan oleh web browser.

Berikut adalah contoh penulisan komentar di dalam HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar HTML</title>
</head>
<body>
<!-- Ini adalah komentar, dan tidak akan ditampilkan pada web browser -->
<h1>Belajar HTML</h1>
<p>HTML is fun!</p>
</body>
</html>

Selain sebagai catatan, komentar juga sering digunakan untuk membuat keterangan siapa pembuat kode program, atau membatasi sebuah blok kode HTML. Berikut contoh penggunaannya:

<!DOCTYPE html>
<!--
Author: Adi perdana
Author URL: http://www.beliprogram.com
Version: 1.3
License: GNU General Public License v2 or later
-->
<html>
<!-- start head section -->
<head>
<meta charset="UTF-8">
<title>Belajar HTML</title>
</head>
<!-- start body section -->
<body>
<!-- main article -->
<h1>Belajar HTML</h1>
<p>HTML is fun!</p>
</body>
</html>

Belajar HTML - Aturan Dasar Penulisan HTML

Dalam contoh kode HTML diatas, saya menggunakan beberapa komentar untuk membuat identitas file HTML serta menandai bagian-bagian tertentu dari halaman. Metode penulisan seperti ini akan memudahkan pembacaan struktur halaman terutama untuk kode HTML yang panjang.

 

Belajar HTML - Aturan Dasar Penulisan HTML

 

About admin

Check Also

Sejarah dan Perkembangan Bahasa HTML

Belajar HTML – Title Element

Tag <title> mungkin menjadi tag paling penting di bagian <head>. Tag ini berfungsi untuk menampilkan …

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *