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

Kamu telah mencapai part 7 dari 14 seri Belajar HTML Dasar

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

Belajar HTML Dasar