Belajar HTML Dasar Part 8: Cara Membuat Judul / Heading di HTML (tag h1)

Setelah mempelajari cara membuat paragraf HTML pada tutorial sebelumnya, dalam tutorial belajar HTML dasar kali ini kita akan membahas tentang cara membuat judul (heading) di dalam HTML.


Cara Membuat Judul (heading) di 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.

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>

Cara Membuat Judul di HTML
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</h1>
  <p>.....pembahasan artikel.....</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>

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. Dalam tutorial selanjutnya kita akan membahas tentang Cara Membuat Daftar/List di HTML menggunakan tag <ol>, <ul> dan <li>.


eBook HTML Uncover Duniailkom
Anda serius ingin menguasai HTML? Duniailkom telah menyusun eBook HTML Uncover. eBook ini membahas HTML dengan lebih detail dan lebih lengkap hingga fitur terbaru HTML5. Penjelasan lebih lanjut bisa ke: eBook HTML Uncover Duniailkom.

Tutorial Terkait:

33 Comments

  1. teguh
    21 Dec 13
    • Andre
      21 Dec 13
  2. toko komputer
    28 Mar 14
    • Andre
      30 Mar 14
  3. darwati
    22 May 14
    • Andre
      27 May 14
  4. mutya
    11 Sep 14
    • Andre
      16 Sep 14
  5. Tan Pah Kaa
    21 Oct 14
    • Andre
      31 Oct 14
  6. Anonymous
    28 Nov 14
  7. ARIF
    14 May 15
    • Andre
      15 May 15
  8. julian
    07 Nov 15
  9. bufet minimalis
    26 Jan 16
    • Andre
      19 Oct 16
  10. Fajar
    09 Aug 16
    • Andre
      19 Oct 16
  11. muh.thita ndiba
    26 Sep 16
  12. fery prayudi
    17 Oct 16
    • Andre
      19 Oct 16
    • Andre
      01 Jan 17
  13. Rudi
    28 Feb 17
    • Andre
      21 May 17
  14. muh akbar
    14 May 17
    • Andre
      21 May 17
  15. ardaris trisna
    11 Jun 17
  16. fajar septianda
    16 Oct 17
    • Andre
      17 Oct 17
  17. anggoro puguh
    27 Oct 17
    • Andre
      29 Oct 17

Add Comment