Belajar HTML dari Nol: Pengenalan Dasar HTML untuk Pemula

Dalam membuat halaman web, HTML tidak sendirian. Ada bahasa lain lagi yang menjadi pelengkapnya, yakni CSS dan Javascript.

CSS adalah bahasa khusus yang digunakan untuk memperindah tampilan web.

Lalu Javascript bertugas untuk membuat halaman web menjadi hidup. Karena dengan Javascript, kita dapat menentukan fungsi-fungsi maupun efek yang akan diterapkan di website.

Struktur Dasar HTML

Penulisan kode HTML selalu dimulai dengan deklarasi DOCTYPE, lalu menuliskan tag <html> dan di dalamnya terdapat tag <head> dan <body>.

Kalau kita perhatikan struktur dasar kode HTML terdiri dari tiga bagian penting:

Bagian Deklarasi
Bagian HEAD
Bagian BODY

Mari kita bahas satu-per-satu:

1. Bagian Deklarasi

Coba perhatikan kode pada baris pertama: <!DOCTYPE html>.

Ini adalah tag deklarasi untuk menyatakan tipe dokumen dan versinya. Pada contoh di atas, kita menyatakan dokumen ini bertipe HTML dan versinya adalah HTML 5.

Nah, untuk HTML versi 4 beda lagi cara deklarasinya.

Contoh untuk HTML 4.01:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Cukup panjang, Lalu apakah boleh kita tidak menulis kode <!DOCTYPE html> ini?

Boleh-boleh saja, dokumen HTML-nya akan tetap bisa dibuka di web browser. Tapi, ini tentunya akan melanggar aturan standar yang dibuat W3C.

Kita bisa mengecek apakah HTML yang ditulis sudah benar atau tidak di https://validator.w3.org/.

Berikutnya, di bawah tag deklarasi <!DOCTYPE html> terdapat tag pembuka untuk HTML:

<html lang="en">

Tag <html> wajib ada di setiap dokumen HTML. Pada tag ini, kita memberikan atribut lang="en" untuk menyatakan kalau konten dokumen HTML ini akan menggunakan bahasa inggris.

Nah di dalam tag <html> ini, terdapat dua tag penting lagi yakni: tag <head> dan tag <body> setelah itu barulah terakhir tag HTML ditutup dengan </html>.

2. Bagian HEAD

Bagian HEAD adalah bagian kepala dari HTML. Dimulai dari tag <head> dan ditutup dengan </head>.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Belajar HTML #01</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

Pada bagian HEAD, biasanya digunakan untuk menuliskan tag-tag yang akan dibaca oleh mesin.

Seperti:

Tag meta untuk SEO.
Tag <title> untuk judul.
Tempat menulis kode CSS dan Javascript.
dan lain-lain.

3. Bagian BODY

Bagian BODY adalah bagian yang akan ditampilkan pada web browser. Penulisannya di mulai dari tag <body> dan ditutup dengan </body>.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Belajar HTML #01</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

Di sinilah nanti kita akan banyak menuliskan konten dengan berbagai macam tag. Saat ini kita baru mengisinya dengan tag <p>. Tag <p> adalah tag yang digunakan untuk membuat paragraf.

Apa Selanjutnya?

Berikutnya silahkan pelajari tentang definisi tag, elemen, dan atribut:

Belajar HTML #02: Mengenal tag, elemen, dan atribut dalam HTML

Jika ada yang belum jelas, bisa ditanyakan melalui komentar.

Note!
Untuk tutorial HTML lainnya, silahkan cek di List tutorial HTML

Hartoko88