Jika anda diminta menuliskan daftar barang yang harus dibeli pada dengan HTML apa yang akan anda lakukan?

Mungkin anda bisa membuatnya seperti ini:

1
2
3
4
<h1>Daftar Barang untuk dibeli:</h1>
<p>- Flash disk 64GB</p>
<p>- Kabel Data USB 3.0</p>
<p>- Kertas A4</p>

Hasilnya memang akan terlihat seperti sebuah list. Tapi, ini bukanlah cara membuat list yang benar di HTML.

Membuat List di HTML

Elemen List di HTML

HTML sudah menyediakan elemen untuk membuat list. Ada tiga macam jenis list yang bisa dibuat di HTML:

  • Ordered List adalah list yang terurut;
  • Unordered List adalah list yang tak terurut;
  • dan Descriptiona List adalah list yang berisi definisi.

Mari kita bahas satu-per-satu:

  1. Ordered List di HTML
    Ordered list dibuat dengan tag ol. Lalu di dalamnya diisi dengan item-item yang akan dimasukkan ke dalam list. Item dibuat dengan tag li (list item).

    Contoh:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Membuat Ordered List</title>
    </head>

    <body>
        <h1>Buah Favoritku:</h1>
        <ol>
            <li>Jeruk</li>
            <li>Durian</li>
            <li>Pisang</li>
            <li>Pepaya</li>
            <li>Mangga</li>
        </ol>
    </body>
    </html>

    List di atas diurutkan berdasarkan angka dari 1, 2, 3, sampai 5.

    Lalu bagaimana kalau kita ingin menggunakan huruf seperti a, b, c atau angka romawi seperti I, II, III?

    Untuk membuat yang seperti itu, kita bisa menggunakan atribut type pada tag ol dan berikut ini nilai yang bisa diberikan:

    • a untuk alfabet a, b, c, dan seterusnya;
    • A untuk alfabet A, B, C, dan seterusnya;
    • i untuk angka romawi i, ii, iii, dan seterusnya;
    • I untuk angka romawi I, II, III, dan seterusnya.

    Contoh:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    <!DOCTYPE html>
    <html>

    <head>
        <title>Ordered List dengan Atribut Type</title>
    </head>

    <body>
        <h3>List dengan type alfabet</h3>
        <ol type='a'>
            <li>Tutorial List di HTML</li>
            <li>Tutorial Link di HTML</li>
            <li>Tutorial Tabel di HTML</li>
        </ol>
        <h3>List dengan type alfabet kapital (huruf besar)</h3>
        <ol type='A'>
            <li>Tutorial List di HTML</li>
            <li>Tutorial Link di HTML</li>
            <li>Tutorial Tabel di HTML</li>
        </ol>
        <h3>List dengan type romawi</h3>
        <ol type='i'>
            <li>Tutorial List di HTML</li>
            <li>Tutorial Link di HTML</li>
            <li>Tutorial Tabel di HTML</li>
        </ol>
        <h3>List dengan type romawi kapital</h3>
        <ol type='I'>
            <li>Tutorial List di HTML</li>
            <li>Tutorial Link di HTML</li>
            <li>Tutorial Tabel di HTML</li>
        </ol>
    </body>

    </html>

  2. Unordered List di HTML

    Unordered list adalah list yang tak terurut yang menggunakan simbol-simbol pada item-nya. Unordered list dibuat dengan tag ul dan untuk item-nya dibuat juga dengan tag li.

    Tag ul di HTML
    Contoh:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Membuat Unordered List</title>
    </head>

    <body>
        <h1>Bahasa Pemrograman untuk dipelajari:</h1>
        <ul>
            <li>Javascript</li>
            <li>PHP</li>
            <li>Java</li>
            <li>Python</li>
            <li>Kotlin</li>
        </ul>
    </body>
    </html>

    Secara default simbol yang digunakan oleh unordered list adalah lingkaran kecil (disc). Kita juga bisa menggantinya dengan atribut type.

    Berikut ini nilai yang bisa diberikan untuk atribut type:

    • square untuk simbol persegi;
    • disc (default) untuk simbol lingkaran disc;
    • none tidak memakai simbol;
    • circle untuk simbol lingkaran;

    Contoh:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Membuat Unordered List</title>
    </head>

    <body>
        <h1>Bahasa Pemrograman untuk dipelajari:</h1>
        <ul type="square">
            <li>Javascript</li>
            <li>PHP</li>
            <li>Java</li>
            <li>Python</li>
            <li>Kotlin</li>
        </ul>
        <h1>Framework untuk dipelajari:</h1>
        <ul type="circle">
            <li>Vuejs</li>
            <li>Svelte</li>
            <li>Reactjs</li>
        </ul>
        <h1>Tools untuk dipelajari:</h1>
        <ul type="none">
            <li>Gulp</li>
            <li>NPM</li>
            <li>Js Lint</li>
        </ul>
        <h1>Pelajari juga:</h1>
        <ul type="disc">
            <li>JSON</li>
            <li>XML</li>
            <li>Markdown</li>
        </ul>
    </body>
    </html>

    Selain menggunakan type, kita juga bisa menggunakan gambar. Ini dilakukan dengan style CSS.

    Contohnya:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Membuat Unordered List</title>
    </head>

    <body>
        <h1>Bahasa Pemrograman untuk dipelajari:</h1>
        <ul style="list-style-image: url(https://assets.ubuntu.com/sites/ubuntu/latest/u/img/favicon.ico)">
            <li>Javascript</li>
            <li>PHP</li>
            <li>Java</li>
            <li>Python</li>
            <li>Kotlin</li>
        </ul>
    </body>
    </html>

  3. Description List di HTML

    Description List adalah list yang berisi deskripsi atau penjelasan dari sesuatu.

    Ada tiga tag yang digunakan untuk membuat description list:

    • dl (description list) tag untuk memulai description list;
    • dt (description term) tag untuk membuat kata yang akan dideskripsikan;
    • dd (description description) tag untuk membuat penjelasan dari kata.

    Format penulisannya seperti ini:

    Description list di HTML
    Contoh:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>Membuat Description List</title>
    </head>

    <body>
        <h1>Daftar istilah:</h1>
        <dl>
            <dt>Kopi</dt>
            <dd>Sebuah minuman berwarna hitam. Menurut pendapat lain kopi adalah air yang dimasak sampai gosong.</dd>
            <dt>Kopi Black Magic</dt>
            <dd>Kopi hitam atau kopi tradisional yang dibuat dengan mantra-mantra.</dd>
            <dt>White Coffee</dt>
            <dd>Kopi berwarna putih, kandungan kafeinnya sedikit.</dd>
            <dt>Kopi++</dt>
            <dd>Kopi ini mampu meningkatkan imajinasi 99 kali lipat.</dd>
        </dl>
    </body>

    </html>

List di dalam List (Nested List)

List juga dapat dibuat di dalam list, misalkan kita ingin menggabungkan ordered list dengan unordered list.

Caranya, list yang di dalam ditulis di dalam tag li.

Contoh:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang='en'>

<head>
    <title>List di dalam List</title>
</head>

<body>
    <h1>Distro Linux dan Keluarganya</h1>
    <ol>
        <li>Debian
            <ul>
                <li>Ubuntu</li>
                <li>Mint</li>
                <li>elementaryOS</li>
            </ul>
        </li>
        <li>RedHat
            <ul>
                <li>Fedora</li>
            </ul>
        </li>
        <li>Slackware</li>
    </ol>
</body>

</html>

Intinya anda harus tahu dan paham cara membuat list, baik itu ordered list, unordered list, dan juga description list.

Membuat Tabel di HTML

Salah satu cara atau format menampilkan informasi dalam web adalah dengan tabel.

Tabel terdiri dari 4 unsur utama:

  • Baris
  • Kolom
  • Sel
  • Garis
  • Unsur Tabel

Lalu, bagaimana cara membuat tabel di HTML?

Kita bisa membuatnya dengan beberapa tag yang sudah disediakan di HTML.

Tag untuk Membuat Tabel di HTML

Ada beberapa tag yang harus diingat untuk membuat tabel di HTML:

  • Tag table untuk membungkus tabelnya
  • Tag thead untuk membungkus bagian kepala tabel
  • tbody untuk membungkus bagian body dari tabel
  • Tag tr (tabel row) untuk membuat baris
  • Tag td (table data) untuk membuat sel
  • Tag th (table head) untuk membuat judul pada header

Tag yang paling penting untuk diingat adalah tag table, tr, dan td. Sementara tag yang lain adalah tambahan (opsional), boleh digunakan boleh tidak.

Mari kita lihat contohnya:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
    <title>Belajar Membuat Tabel HTML</title>
</head>
<body>

    <table>
        <tr>
            <td>Baris 1 kolom 1</td>
            <td>baris 1 kolom 2</td>
        </tr>
        <tr>
            <td>Baris 2 kolom 1</td>
            <td>baris 2 kolom 2</td>
        </tr>
    </table>

</body>
</html>

Mengapa tidak ada garisnya? karena kita tidak menambahkan atribut border pada tabelnya.

Agar Tabelnya memiliki garis, silakan tambahkan atribut border=”1” di dalam tag table.

Sehingga akan menjadi seperti ini:

1
2
3
4
5
6
7
8
9
10
<table boder="1">
    <tr>
        <td>Baris 1 kolom 1</td>
        <td>baris 1 kolom 2</td>
    </tr>
    <tr>
        <td>Baris 2 kolom 1</td>
        <td>baris 2 kolom 2</td>
    </tr>
</table>

Nilai “1” pada atribut border adalah ukuran garisnya. Semakin besar ukurannya, maka akan semakin besar pula ukuran garisnya.

Nilai “1” adalah ukuran garis yang paling kecil.

Mengatur Jarak Sel dengan Cellpadding

Atribut cellpadding adalah atribut untuk mengatur jarak teks dengan garis di dalam sel.

Atribut ini dapat kita berikan kepada tag table.

Contoh:

1
2
3
4
5
6
7
8
9
10
<table border="1" cellpadding="10">
    <tr>
        <td>Baris 1 kolom 1</td>
        <td>baris 1 kolom 2</td>
    </tr>
    <tr>
        <td>Baris 2 kolom 1</td>
        <td>baris 2 kolom 2</td>
    </tr>
</table>

Nilai “10” pada atribut cellpadding adalah ukuran jarak antara teks sel dengan garis.

Menambahkan Warna pada Sel dan Baris

Untuk menambahkan warna pada sel dan baris, kita bisa menambahkan atribut bgcolor di dalam tag td (untuk sel) atau tr (untuk baris).

Contoh:

1
2
3
4
5
6
7
8
9
10
<table border="1" cellpadding="10">
    <tr>
        <td bgcolor="yellow">Baris 1 kolom 1</td>
        <td>baris 1 kolom 2</td>
    </tr>
    <tr bgcolor="#00ff80">
        <td>Baris 2 kolom 1</td>
        <td>baris 2 kolom 2</td>
    </tr>
</table>

Nilai atribut bgcolor bisa kita isi dengan kode warna dalam heksadesimal atau nama warna dalam bahasa inggris.

Menggabungkan Sel Tabel

Atribut yang digunakan untuk menggabungkan sel tabel adalah rowspan dan colspan:

  • rowspan untuk menggabungkan baris;
  • colspan untuk menggabungkan kolom.

Atribut ini bisa kita berikan kepada tag td atau th.

Mari kita lihat contohnya:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
    <head>
        <title>Belajar Membuat Tabel HTML</title>
</head>
<body>
    <table border="1">
        <tr>
            <th rowspan="2" bgcolor="yellow">Bulan</th>
            <th colspan="2" bgcolor="#00ff80">Hasil Panen</th>
        </tr>
        <tr>
            <th>Padi</th>
            <th>Kacang</th>
        </tr>
        <tr>
            <td>Januari</td>
            <td>500 Kg</td>
            <td>231 Kg</td>
        </tr>
        <tr>
            <td>Februari</td>
            <td>342 Kg</td>
            <td>423 Kg</td>
        </tr>
        <tr>
            <td>Maret</td>
            <td>432 Kg</td>
            <td>124 Kg</td>
        </tr>
        <tr>
            <td>April</td>
            <td>453 Kg</td>
            <td>523 Kg</td>
        </tr>
    </table>

</body>
</html>

Menyisipkan Elemen yang Lain ke dalam Sel

Di salam sel td dan th, kita bisa menyisipkan elemen HTML yang lain, seperti gambar, link, video, list, dsb.

Contoh:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
    <head>
        <title>Belajar Membuat Tabel HTML</title>
</head>
<body>
    <table border="1">
        <tr>
            <th colspan="3" bgcolor="yellow">Produk Unggulan</th>
        </tr>
        <tr>
            <td rowspan="4">
                <img src="https://www.petanikode.com/img/bibit.png" width="200" />
            </td>
        </tr>
        <tr>
            <td>Nama</td>
            <td>Benih Kode</td>
        </tr>
        <tr>
            <td>Harga</td>
            <td>Rp 192.000</td>
        </tr>
        <tr>
            <td>Fitur</td>
            <td>
                <ul>
                    <li>Dilengkapi Dokumentasi</li>
                    <li>Ukuran: 31MB</li>
                    <li>Masa Tanam: 6 Bulan</li>
                    <li>Lisensi: MIT</li>
                </ul>
            </td>
        </tr>
    </table>

</body>
</html>

Menurut penulis, bagian tersulit saat membuat tabel di HTML adalah saat menggabungkan sel. Karena kita harus teliti, berapa ukuran sel yang akan digabungkan dengan rowspan dan colspan.

Saran penulis, Sering-sering latihan dengan contoh kasus tertentu. Coba lihat tabel-tabel yang ada di sekeliling kita, lalu coba buat tabel tersebut dalam HTML.

Cara Membuat Form pada HTML

Web tidak hanya digunakan untuk menampilkan informasi saja, Web juga digunakan untuk mengambil informasi atau data dari pengunjung. Salah satu cara untuk mengambil informasi dari pengunjung ialah menggunakan form. Form dalam web bisa disamakan dengan formulir di dunia nyata. Form dapat diisi, kemudian diproses dengan program tertentu. Pada tutorial ini, kita akan belajar cara membuat form di HTML. Hanya membuat saja ya, Tidak sampai memproses datanya. Karena itu masuk ke dalam topik pembahasan yang lain.

Form di HTML dapat kita buat dengan tag form. Tag ini memiliki beberapa atribut yang harus diberikan, seperti:

  • action untuk menentukan aksi yang akan dilakukan saat data dikirim;
  • method metode pengiriman data.

Contoh:

1
2
3
<form action="proses.php" method="GET">
<!-- form field di sini -->
</form>

Untuk atribut action, kita dapat mengisinya dengan alamat URL dari endpoint yang akan memproses form. Secara sederhana,—pada contoh di atas— kita akan menyuruh file proses.php untuk memproses data form. Nanti akan kita pelajari pada PHP. Kode HTML di atas, tidak akan menghasilkan apa-apa. Karena kita belum membuat field-nya.

Apa itu Field? Field adalah ruas yang dapat diisi dengan data.

Contoh field:

1
<input type="text" name="info" />

Field memiliki beberapa atribut yang harus diberikan:

  • type merupakan type dari field.
  • name merupakan nama dari field yang akan menjadi kunci dan variabel di dalam program.

Latihan: Membuat Form Login

Sebagai latihan, mari kita buat form login. Pada form login, terdapat beberapa field dan elemen:

  • Field untuk input username atau email;
  • Field untuk input password;
  • Checkbox untuk remember me;
  • Tombol untuk login.

Berikut ini kodenya:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
    <title>Form Login</title>
</head>
<body>
    <form action="login.php" method="POST">
        <fieldset>
        <legend>Login</legend>
        <p>
            <label>Username:</label>
            <input type="text" name="username" placeholder="username..." />
        </p>
        <p>
            <label>Password:</label>
            <input type="password" name="password" placeholder="password..." />
        </p>
        <p>
            <label><input type="checkbox" name="remember" value="remember" /> Remember me</label>
        </p>
        <p>
            <input type="submit" name="submit" value="Login" />
        </p>
        </fieldset>
    </form>
</body>
</html>

Sekarang perhatikan!

Pada kode di atas, kita membuat empat buah field:

  • input username dengan tipe text;
  • input password dengan tipe password;
  • input remember dengan tipe checkbox;
  • input submit dengan tipe submit;

Lalu ketiga filed ini dibungkus ke dalam tag fieldset. Nanti tag fieldset ini akan membuat sebuah garis. Di dalam tag fieldset, kita membuat tag legend untuk memberikan teks pada fieldset.

Lalu, perhatikan juga atribut yang digunakan pada setiap field.

  • Atribut placeholder untuk menampilkan teks sementara (placeholder);
  • Atribut value untuk memberikan nilai default pada field.

Setiap field kita bungkus dalam tag p agar terlihat rapi dan juga kita berikan sebuah label dengan tag label.

Latihan: Membuat Form Contact

Latihan Selanjutnya, kita akan membuat form contact. Form ini berfungsi untuk menghubungi atau kontak admin.

Silakan ikuti kode berikut:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
    <title>Contact Us</title>
</head>
<body>
    <form action="contact.php" method="POST">
        <fieldset>
        <legend>Contact</legend>
        <p>
            <label>Name:</label>
            <input type="text" name="name" placeholder="your name..." />
        </p>
        <p>
            <label>Subject:</label>
            <input type="text" name="subject" placeholder="subject..." />
        </p>
        <p>
            <label>Email:</label>
            <input type="email" name="email" placeholder="your email..." />
        </p>
        <p>
            <input type="submit" name="submit" value="Send" />
        </p>
        </fieldset>
    </form>
</body>
</html>

Pada contoh di atas, kita memberikan type=”email” untuk field email, agar filed ini harus diisi dengan email saja.

Coba saja isi dengan yang lain, lalu klik Send, maka akan muncul pesan peringatan.

Latihan: Membuat Form Register

Semakin banyak latihan, semakin bagus. Berikutnya kita akan coba membuat form registrasi.
Form ini berisi field untuk:

  • Input nama lengkap;
  • Input username;
  • Input email;
  • Input password;
  • Input jenis kelamin;
  • Input Agama;
  • Input Biografi.
  • dsb.

Mari kita buat

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
<head>
    <title>Registrasi</title>
</head>
<body>
    <form action="contact.php" method="POST">
        <fieldset>
        <legend>Registrasi</legend>
        <p>
            <label>Nama:</label>
            <input type="text" name="nama" placeholder="Nama lengkap..." />
        </p>
        <p>
            <label>Username:</label>
            <input type="text" name="username" placeholder="Username..." />
        </p>
        <p>
            <label>Email:</label>
            <input type="email" name="email" placeholder="Your email..." />
        </p>
        <p>
            <label>Password:</label>
            <input type="password" name="password" placeholder="Passowrd..." />
        </p>
        <p>
            <label>Jenis kelamin:</label>
            <label><input type="radio" name="jenis_kelamin" value="laki-laki" /> Laki-laki</label>
            <label><input type="radio" name="jenis_kelamin" value="perempuan" /> Perempuan</label>
        </p>
        <p>
            <label>Agama:</label>
            <select name="agama">
                <option value="islam">Islam</option>
                <option value="kristen">Kristen</option>
                <option value="hindu">Hindu</option>
                <option value="budha">Budha</option>
            </select>
        </p>
        <p>
            <label>Biografi:</label>
            <textarea name="biografi"></textarea>
        </p>
        <p>
            <input type="submit" name="submit" value="Daftar" />
        </p>
        </fieldset>
    </form>
</body>
</html>

Apa saja field baru yang ada di form tersebut?

  • Field radio;
  • Field select option;
  • Field textearea.

Apa bedanya radio dengan checkbox?

Jika kita ingin agar pengunjung memilih salah satu, maka kita gunakan radio. Tapi kalau kita ingin pengunjung memilih lebih dari satu, maka kita gunakan checkbox. Lalu untuk select option, sifatnya sama seperti radio. Cuma dia bentuknya berbeda. Lalu untuk menginputkan teks yang panjang, kita gunakan tag textarea.

Latihan: Membuat Form Tingkat Lanjut

Field-field di atas merupakan jenis field yang sering digunakan dalam pembuatan form. Masih ada jenis field lagi yang belum kita coba, seperti meter, color, url, number, date, datetime, dsb.

Mari kita coba beberapa:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
    <title>Form HTML</title>
</head>
<body>
    <form action="contact.php" method="POST">
        <fieldset>
        <legend>Form</legend>
        <p>
            <label>Alamat Web:</label>
            <input type="url" name="name" placeholder="Masukan URL Web..." />
        </p>
        <p>
            <label>Tanggal Lahir:</label>
            <input type="date" name="tanggal" />
        </p>
        <p>
            <label>Umur:</label>
            <input type="number" min="10" max="90" name="umur" />
        </p>
        <p>
            <input type="submit" name="submit" value="Send" />
        </p>
        </fieldset>
    </form>
</body>
</html>

Apabila di browser anda tidak tampil kalender seperti di atas, coba gunakan browser versi terbaru.

Apa Selanjutnya? Apa yang kita pelajari pada tutorial ini adalah tag dan field dasar—dan sering digunakan—dalam pembuatan form.

Masih terdapat banyak tipe field lagi yang belum kita coba. Seperti: meter, color, time, dsb.

Karena itu, silakan berlatih terus dan silahkan cek dokumentasi resminya untuk mengetahui lebih lanjut mengenai fitur-fitur field lain pada HTML 5.

Elemen Semantik Dalam HTML

Sejauh ini kita sudah mengenal beberapa tag dasar di HTML, seperti elemen paragraf, heading, list, tabel, link, dan form. Lalu pertanyaannya, Bagaimana cara menata elemen-elemen ini agar terlihat bagus? Jawabannya adalah kita butuh sebuah layout.

Nah, di HTML terdapat beberapa elemen yang khusus untuk melakukan ini. Yakni elemen semantik seperti tag header, aside, footer, article, dll.

Elemen semantik sebenarnya tidak hanya digunakan untuk membuat layout saja. Ia juga digunakan untuk membuat elemen lain. Untuk lebih jelasnya, mari kita pelajari lebih detail.

Ketika pertama kali HTML dibuat, elemen semantik belum tersedia dan belum dibuat. Orang-orang membuat layout dengan menggunakan tag yang salah. Ada yang membuatnya dengan tag tabel dan ada juga dengan tag div. Ini sebenarnya tidak sepenuhnya salah, karena membuat layout dengan kedua tag itu benar-benar bisa. Tetapi Ini bukanlah cara yang baik dan akan membuat kode HTML kita sulit terbaca. Karena itu hadirlah elemen semantik sebagai solusi.

Elemen semantik mulai ditambahkan pada HTML 5. Elemen semantik adalah elemen-elemen yang menyatakan makna atau tujuan dari elemen itu sendiri. Misalnya tag footer, tag ini digunakan untuk membuat elemen footer atau bagian kaki dari web. Jangan gunakan tag ini di bagian paling atas, karena maknanya sudah jelas untuk footer. Jadi tidak akan ada lagi yang namanya penyalahgunaan tag. Karena setiap tag sudah punya tujuan masing-masing.

Berikut ini daftar elemen-elemen semantik:

  • article — untuk membuat elemen artikel;
  • aside — untuk membuat elemen bagian samping;
  • details — untuk membuat elemen detail atau spoiler;
  • figcaption — untuk membuat teks caption pada figure;
  • figure — untuk membuat figur atau gambar pada artikel;
  • footer — untuk membuat elemen bagian kaki dari web;
  • header — untuk membuat kepala kop dari web;
  • main — untuk membuat elemen utama;
  • mark — untuk menandai teks;
  • nav — untuk membuat navigasi;
  • section — untuk membuat bagian artikel;
  • summary — untuk membuat ringkasan artikel atau isi spoiler;
  • time — untuk membuat elemen yang menyatakan waktu;
  • dan masih banyak lagi.

Mengapa Harus Pakai Elemen Semantik? Salah satu keuntungan menggunakan elemen semantik adalah dokumen HTML kita akan mudah dibaca, baik itu oleh manusia maupun mesin.

Coba perhatikan kode berikut:

1
2
3
4
5
6
7
8
9
10
<div id="header"></div>
<div class="section">
	<div class="article">
		<div class="figure">
			<img>
			<div class="figcaption"></div>
		</div>
	</div>
</div>
<div id="footer"></div>

Ini adalah contoh layout yang dibuat dengan tag div. Tag ini memang bagus untuk membungkus elemen HTML.

Kamu mungkin akan mudah paham dengan membaca nama-nama class yang diberikan pada elemen div. Ada div yang bertugas untuk membuat elemen header, article, footer, dan sebagainya.

Sekilas, tidak ada masalah dengan ini. Tapi nanti kalau elemen div nya sudah banyak, kita akan kesulitan membacanya.

Sekarang coba bandingkan dengan kode ini:

1
2
3
4
5
6
7
8
9
10
<header></header>
<section>
	<article>
		<figure>
			<img>
			<figcaption></figcaption>
		</figure>
	</article>
</section>
<footer></footer>

Ini tentunya akan lebih muda dibaca.

Oh iya, elemen semantik juga bagus untuk SEO. Jadi kalau mau websitemu disukai mesin pencari, sebaiknya gunakanlah elemen ini.

Membuat Layout dengan Elemen Semantik

Nah, sekarang mari kita belajar membuat layout dengan elemen semantik.

Buatlah file baru dengan nama layout.html, kemudian isi dengan kode berikut:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Contoh Layout dengan Elemen Semantik</title>
</head>

<body>

  <header>
    <h1>Belajar Elemen Semantik di HTML</h1>
  </header>

  <nav>
    <a href="#">Home</a> |
    <a href="#">About</a> |
    <a href="#">Contact</a>
  </nav>

  <article>
    <h1>Tutorial Semantik Elemen untuk Pemula</h1>
    <p>Semantik elemen adalah elemen yang memiliki makna dan tujuan.
      Tujuannya agar kode HTML mudah dibaca dan tidak ada penyalahgunaan tag.
      Elemen semantik bagus untuk SEO dan juga dapat meningkatkan accessibility.
    </p>
  </article>

  <footer>
    Copyright &copy; 2020 by Petani Kode
  </footer>

</body>

</html>

Setelah itu, buka dengan web browser.

Hasilnya akan terlihat biasa saja dan sama seperti contoh-contoh sebelumnya. Ini karena kita belum memberikan style CSS.

Karena itu, mari kita coba memberikan style CSS untuk elemen semantik.

Style untuk Elemen Semantik

Cara memberikan style untuk elemen semantik sama saja seperti memberikan style pada elemen lainnya. Tinggal membuat atribut style, lalu mengisinya dengan kode style CSS.

Oke, sekarang coba ubah contoh yang tadi menjadi seperti ini:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Contoh Layout dengan Elemen Semantik</title>
</head>

<body style="background-color: silver;">

  <header style="background-color: white;">
    <h1>Belajar Elemen Semantik di HTML</h1>
  </header>

  <nav>
    <a href="#">Home</a> |
    <a href="#">About</a> |
    <a href="#">Contact</a>
  </nav>

  <article style="background-color: white;">
    <h1>Tutorial Semantik Elemen untuk Pemula</h1>
    <p>Semantik elemen adalah elemen yang memiliki makna dan tujuan.
      Tujuannya agar kode HTML mudah dibaca dan tidak ada penyalahgunaan tag.
      Elemen semantik bagus untuk SEO dan juga dapat meningkatkan accessibility.
    </p>
  </article>

  <footer style="background-color: white;">
    Copyright &copy; 2020 by Petani Kode
  </footer>

</body>

</html>

Kita memberikan warna latar untuk elemen body dan juga beberapa elemen semantik.

Mencoba Elemen Semantik Lainnya

Tidak semua elemen semantik bertujuan untuk membuat layout, ada juga beberapa elemen semantik lainnya yang bertujuan untuk membuat elemen tertentu.

Mari kita pelajari elemen semantik lainnya.

Elemen detail dan summary

Tag detail dan summary merupakan tag untuk membuat elemen spoiler. Tag detail akan berisi semua detail konten, lalu tag summary akan menjadi tombol yang bisa diklik untuk menampikan detail isinya.

Elemen details di HTML
Contoh:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Contoh Elemen Semantik</title>
</head>

<body>

  <article>
    <h1>Laptop Terbaik untuk Programmer</h1>

    <details>
      <summary>Lihat Spesifikasi</summary>
      Prosesor: Intel Core i9, RAM 32GB, SSD 1TB, HDD 4TB
    </details>
  </article>

</body>

</html>

Elemen time

Tag time merupakan tag untuk membuat elemen waktu. Elemen waktu biasanya dibutuhkan untuk menampilkan waktu.

Misalnya, Waktu saat sebuah postingan dibuat, waktu saat sebuah pesan dibaca, waktu keberangkatan, dan lain sebagainya.

Contoh:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Contoh Elemen Semantik</title>
</head>

<body>

  <article>
    <h1>Waktu di HTML</h1>

    <p>
      Ditulis pada <time datetime="2020-20-07">20 July 2020</time>
    </p>
    <p>
      Hari ini saya ada acara dari pukul <time>08:00</time> sampai pukul
      <time>10:00</time>.
    </p>
  </article>

</body>
</html>

Elemen time akan ditampilkan apa adanya. Atribut datetime berfungsi untuk memberikan nilai tanggal dan waktu yang nantinya akan dibaca oleh program.

Apa Selanjutnya? Kita baru saja belajar tentang elemen semantik. Intinya, kamu harus menggunakan elemen semantik agar kode HTML-nya mudah dibaca.

Nggak pakai elemen semantik, websitemu bisa dibilang masih kuno 😄. Jadi pakailah elemen semantik.