Home / HTML / Belajar HTML – Heading Element (h1 – h6)

Belajar HTML – Heading Element (h1 – h6)

Heading element digunakan untuk membuat judul (heading) di dalam halaman HTML. Heading element terdiri dari 6 level atau 6 tingkatan, yakni dari <h1> sampai dengan <h6>.

Berikut adalah contoh tampilan tag <h1> sampai dengan tag <h6> di dalam web browser:

<!DOCTYPE html>
  <html>
    <head>
        <meta charset="UTF-8">
          <title>Belajar Link HTML</title>
    </head>
    <body>
       <h1>Judul Artikel dengan h1</h1>
       <h2>Judul Artikel dengan h2</h2>
       <h3>Judul Artikel dengan h3</h3>
       <h4>Judul Artikel dengan h4</h4>
       <h5>Judul Artikel dengan h5</h5>
       <h6>Judul Artikel dengan h6</h6>
   </body>
 </html>

Belajar HTML - Heading Element (h1 – h6)

Dapat anda lihat, secara default bawaan web browser, seluruh tag heading ditampilkan dalam huruf tebal dan dalam berbagai ukuran font. Tag <h1> tampil dengan ukuran font besar, dan tag <h6> menggunakan ukuran font kecil. Jika ingin mengubah efek ini, bisa dilakukan dengan CSS.

Heading element termasuk ke dalam block level element dan akan tampil terpisah di dalam baris baru. Web browser juga akan menambahkan beberapa spasi sebelum dan sesudah heading.

Heading element yang memiliki 6 tingkatan ini mencerminkan kegunaannya untuk membuat struktur judul website. Judul dari sebuah artikel sebaiknya ditulis dengan tag <h1>, sub judul ditulis menggunakan <h2>, sub sub judul dengan <h3>, dst. Struktur yang teratur juga menjadi nilai tambah untuk search engine.

Agar struktur menjadi konsisten, usahakan agar tidak ‘melompati’ struktur penulisan. Contoh ‘lompatan’ ini seperti membuat judul dengan <h1>, kemudian langsung menggunakan tag <h4> untuk sub judulnya.

Selain dalam artikel, heading element juga sering dijadikan judul sidebar, judul untuk bagian footer, dan berbagai bagian lain dari website.

Jika anda melihat sebuah judul artikel yang juga berfungsi sebagai link, biasanya hal ini dilakukan dengan menyisipkan tag <a> diantara header element, seperti contoh berikut:


<h1>
  <a href="http://www.beliprogram.com/tutorial_HTML_dasar.html">
             Belajar Tutorial HTML Dasar
</a>
</h1>

About admin

Check Also

Sejarah dan Perkembangan Bahasa HTML

Belajar HTML – Style Element

Tag <style> digunakan untuk menginput kode style ke dalam halaman HTML. Kode style yang umumnya …

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *