Cara Membuat Judul / Heading di HTML (tag h1) ( Part VIII)

Kali ini kita akan membahas tentang cara membuat judul (heading) di dalam HTML. HTML menyediakan tag khusus untuk membuat judul atau di dalam HTML lebih di kenal dengan istilah: heading. Heading dirancang terpisah dari paragraf. Tag Heading biasanya digunakan untuk judul dari paragraf, atau bagian dari text yang merupakan judul.

Headings adalah elemen HTML yang digunakan untuk menampilkan judul dari sebuah konten. Elemen headings ada 6 jenis, yakni <h1>, <h2>, <h3>, <h4>, <h5> dan <h6>.

Elemen <h1> menunjukkan tingkat kepentingan yang lebih tinggi daripada <h2> dan seterusnya. Elemen <h1> umumnya akan ditampilkan dengan ukuran huruf yang lebih besar dibanding <h2>, dan begitu seterusnya sampai <h6>.

Bila kita hendak membuat judul sebuah konten, maka gunakanlah <h1> sebagai prioritas utama. Bila hendak membuat subjudul di dalam konten, maka gunakan <h2>, dan bila hendak membuat sub-subjudul, maka gunakan <h3>, dan seterusnya.

Tag heading di dalam HTML terdiri dari 6 tingkatan, yaitu <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>. Tag heading secara default akan ditampilkan oleh web browser dengan huruf tebal (bold). Tampilan dari tag header juga dibuat bertingkat. Tag header <h1> memiliki ukuran huruf paling besar, sedangkan <h6> terkecil.

Berikut adalah contoh penggunaan tag heading di dalam HTML:
<!DOCTYPE html>
<html>
<head>
  <title>penggunaan tag heading</title>
</head>
<body>
  <h1>ini adalah judul dengan h1 </h1>
  <h2>ini adalah judul dengan h2 </h2>
  <h3>ini adalah judul dengan h3 </h3>
  <h4>ini adalah judul dengan h4 </h4>
  <h5>ini adalah judul dengan h5 </h5>
  <h6>ini adalah judul dengan h6 </h6>
</body>
</html>
Outputnya akan keluar seperti ini :



Biasanya dalam sebuah halaman akan ada hanya 1 tag <h1>, dan beberapa tag <h2> dan <h3> dengan beberapa tag <p>. Berikut adalah contoh struktur artikel HTML sederhana dengan menggunakan tag <p> dan beberapa tag heading:

<!DOCTYPE html>
<html>
<head>
  <title>Belajar HTML Dasar</title>
</head>
<body>
  <h1>Judul Artikel Kamu</h1>
  <p>.....pembahasan artikel kamu.....</p>
    <h2>Sub Judul Artikel 1</h2>
    <p>.....pembahasan sub artikel 1.....</p>
    <h2>Sub Judul Artikel 2</h2>
    <p>.....pembahasan sub artikel 2.1.....</p>
      <h2>Sub Sub Judul Artikel 2.1</h2>
      <p>.....pembahasan sub sub artikel 2.1.....</p>
</body></html>
Output



Dengan menggunakan beberapa tag heading dan paragraf, kita bisa membuat struktur sederhana konten HTML. Search Engine seperti Google akan memberikan nilai lebih untuk heading. Biasanya semakin tinggi tingkat heading, semakin tinggi pula penekanan search engine. Tag <h1> dianggap lebih bernilai dari pada <h2>. Tag <h1> umumnya digunakan untuk judul sebuah konten / artikel, sehingga dianggap dapat mewakili keseluruhan artikel. Selain terdiri dari paragraf dan judul, sebuah struktur artikel juga perlu membuat daftar, atau dikenal sebagai list. Berikutnya kita akan membuat sebuah daftar/list di HTML (tag ol, ul dan li).
LihatTutupKomentar