Tutorial HTML Dasar Part 7: Cara Membuat Judul di HTML (tag h1)

Cara Membuat Judul Di HTML – Pada tutorial sebelumnya kita sudah membahas tentang bagaimana cara membuat paragraf di HTML. Nah, pada pembelajaran kita kali ini, kita akan membahas mengenai cara membuat judul atau heading di HTML menggunakan tag <h1>
.
Cara Membuat Judul di HTML Dengan Tag <h1>
HTML sudah menyediakan tag khusus untuk membuat sebuah judul atau lebih dikenal di dalam HTML adalah sebutan heading. Heading sudah di susun terpisah dari paragraf (tag p). Tag heading biasanya digunakan untuk judul dari sebuah text atau paragraf, atau hal lain yang merupakan judul.
Tag heading di dalam HTML terdiri dari 6 tingkatan, dimana semakin besar angkanya, maka semakin besar text dari judul tersebut. Contoh ketika kita menggunakan h1, maka text judul akan besar, dan ketika kita menggunakan tag h2, maka text judul lebih mengecil, seperti itu lah. 6 tingkatan tersebut diantaranya <h1>
, <h2>
, <h3>
, <h4>
, <h5>
, dan <h6>
.
Untuk mengetahui lebih jelas tentang h1 – h6, anda bisa melihat contoh di bawah ini untuk penggunaan heading pada HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tag heading dalam HTML</title> </head> <body> <h1>Ini adalah judul menggunakan h1</h1> <h2>Ini adalah judul menggunakan h2</h2> <h3>Ini adalah judul menggunakan h3</h3> <h4>Ini adalah judul menggunakan h1</h4> <h5>Ini adalah judul menggunakan h2</h5> <h6>Ini adalah judul menggunakan h3</h6> </body> </html>
Nanti hasilnya akan seperti gambar dibawah ini:
Biasanya pada sebuah halaman hanya akan ada 1 tag <h1>
saja, dan juga beberapa tag <h2>
dan <h3>
dengan beberapa tag <p>
. Berikut ini adalah contoh struktur artikel dengan sub artikel pada HTML yang sangat sederhana menggunakan beberapa tag <p>
dan juga tag heading.
<!DOCTYPE html> <html> <head> <title>tag heading dalam HTML</title> </head> <body> <h1>Judul Artikel</h1> <p>isi artikel</p> <h2>Sub Judul Artikel 1</h2> <p>sub isi artikel 1</p> <h2>Sub Judul Artikel 2</h2> <p>isi sub artikel 2.1</p> <h2>Sub Sub Judul Artikel 2.1</h2> <p>isi sub sub artikel 2.2</p> </body>
Dengan menggunakan beberapa tag diatas (tag paragraf dan heading), kita jadi lebih mudah untuk membuat struktur untuk artikel HTML. Selain itu, Search Engine seperti Google akan memberikan nilai tambahan untuk penggunaan heading ini.
Nah, jadi itulah penjelasan tentang cara penggunaan judul (heading dalam HTML), sudah mengerti? Ohya, selain terdiri dari paragraf dan judul, sebuah struktur artikel juga memerlukan sebuah daftar (list). Pada tutorial kita selanjutnya akan membahas mengenai cara membuat daftar (list) pada HTML dengan menggunakan tag <ul>, <ol>, <li>.
Dibawah ini merupakan semua list dari proses part Belajar HTML Dasar- Tutorial HTML Dasar Part 1: Pengenalan HTML
- Tutorial HTML Dasar Part 2: Apa Fungsi Web Browser?
- Tutorial HTML Dasar Part 3: Memilih Text Editor Untuk HTML
- Tutorial HTML Dasar Part 4: Menjalankan File HTML
- Tutorial HTML Dasar Part 5: Struktur Dasar HTML
- Tutorial HTML Dasar Part 6: Cara Membuat Paragraf di HTML
- Tutorial HTML Dasar Part 7: Cara Membuat Judul di HTML (tag h1)
- Tutorial HTML Dasar Part 8: Cara Membuat Daftar/List di HTML (tag li)
- Tutorial HTML Dasar Part 9: Cara Membuat link di HTML (tag a)
- Tutorial HTML Dasar Part 10: Cara Menambahkan Gambar di HTML (tag img)
- Tutorial HTML Dasar Part 11: Cara Membuat Tabel di HTML (tag table)
- Tutorial HTML Dasar Part 12: Cara Memberikan Komentar di HTML
- Tutorial HTML Dasar Part 13: Cara Membuat Form di HTML (tag form)
- Tutorial HTML Dasar Part 14: Gabungan File HTML (Finish)