Skip to main content

HTML Dasar Part 06: Cara Membuat Judul di HTML

Setelah kita sudah paham untuk cara membuat paragraf di HTML sebelumnya. Sekarang kita akan membahas tentang cara membuat judul di html. Untuk mendukung belajar koding HTML kita, siapkan dulu kopi agar cepat masuk ke otak materi ini hehehhe 😄.


Sebelum masuk mendalam, bayangin saja dulu apabila sebuah konten atau artikel tidak memiliki judul, bagaimana ? Tentu saja, konten tersebut tidak menarik, sudah tidak ada judul apalagi sub judul nya kan. Jangan-jangan Kamu akan bingung untuk membaca konten nya.

Karena itulah penyebabnya kita memerlukan sebuah judul atau heading. Lalu yang menjadi pertanyaan, bagaimana cara membuat judul atau heading tersebut? Nah, untuk itulah kita bahas disini. Simak penjelasan dibawah ini

Cara Membuat Judul atau Heading di HTML

HTML sendiri menyediakan sebuah tag khusus untuk membuat judul atau heading ini didalam HTML. Ini dikenal sebagai tag heading.

Tag heading ini dibuat untuk Judul dari sebuah konten atau paragraf.

Langsung saja, kita praktekkan belajar koding untuk membuat judul di HTML.

Silahkan buka text editor dan ketikkan kode dibawah ini dan save dengan nama judul.html

Contoh tag heading membuat judul di HTML


<!DOCTYPE html>
<html>
    <head>
        <title>Belajar Koding Judul di HTML</title>
    </head>
    <body>
        <h1>Ini adalah Judul tag h1 Level 1</h1>
        <h2>Ini adalah Judul tag h2 Level 2</h2>
        <h3>Ini adalah Judul tag h3 Level 3</h3>
        <h4>Ini adalah Judul tag h4 Level 4</h4>
        <h5>Ini adalah Judul tag h5 Level 5</h5>
        <h6>Ini adalah Judul tag h6 Level 6</h6>
    </body>
</html>
 

Hasilnya :

Cara Membuat Judul di HTML

Tag heading itu sendiri terdiri dari 6 level atau 6 tingkatan, yaitu dari tag <h1> hingga tag <h6> yang berguna untuk membuat struktur website. Tag <h1> untuk judul pertama, tag <h2> untuk sub judul, tag <h3> untuk sub sub judul dan seterusnya. Struktur website yang teratur akan menjadi nilai tambah di Search Enging

Tag heading tersebut akan tampil di web browser secara default dengan huruf dicetak tebal. Ukuran teks dari tag heading dibuat berbeda. Dari tag <h1> yang paling besar hingga tag <h6> yang paling kecil.

Dalam sebuah halaman yang ada diwebsite, hanya akan ada satu tag saja untuk tag <h1>. Namun, untuk tag <h2>, <h3>, <h4>, <h5> dan <h6> bisa digunakan lebih dari satu begitu juga dengan tag paragraf <p>.

Mari kita coba untuk membuat HTML yang sederhana dengan menggunakan beberapa tag heading dan paragraf disetiap heading. Ketik kode dibawah ini kemudian simpan dan jalankan !


<!DOCTYPE html>
<html>
<head>
  <title>Belajar Koding Judul di HTML</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>
 

Hasilnya :

Secara umum tag <h1> digunakan untuk judul dari sebuah konten atau artikel yang ada pada halaman website dan dapat mewakili artikel secara keseluruhan.

Untuk cara membuat judul HTML ditengah dan cara membuat judul berwarna di html, kita akan mempelajari di belajar koding CSS.


Bukan hanya judul dan paragraf saja, struktur HTML dari sebuah halaman website memerlukan daftar (biasanya dikenal dengan list. Dalam belajar koding HTML dasar selanjutnya, kita akan membahas cara membuat list/daftar di HTML.


Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar