Skip to HeaderSkip to PostSkip to Footer

HTML Headings

Daftar Isi

    HTML Headings - Berikut ini adalah rangkuman tentang tag/ elemen HTML headings.

    Apa itu HTML Headings?

    HTML Headings atau <h1>, <h2>, <h3>, <h4>, <h5>, <h6> adalah sebuah elemen HTML yang berfungsi untuk menampilkan heading document di halaman website.

    HTML Headings hanya mempunyai 6 jenis tag dimulai yaitu <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>. Selain keenam tag tersebut bukan termasuk HTML headings yang valid.

    Elemen seperti <h7> atau <h8> tetap akan ditampilkan oleh browser namun tidak memberi penekanan apapun pada screen reader bahwa elemen tersebut adalah heading.

    Screen reader dan web crawler membaca HTML Headings dengan skala prioritas dengan <h1> sebagai yang paling penting, lalu <h2> dan seterusnya hingga <h6> sebagai heading dengan skala prioritas paling kecil.

    Tips: Penggunaan HTML Headings membantu search engine crawler untuk menentukan mana judul artikel dan mana sub-judul. Jadi, ada baiknya mengoptimalkan penggunaan HTML Heading dalam konten web/ blog.

    Default Stylesheet

    HTML Element Default Stylesheet Pixel Height
    <h1></h1>
    • Font Size: 2em
    • Font Weight: bolder
    32 px
    <h2></h2>
    • Font Size: 1.5em
    • Font Weight: bolder
    24 px
    <h1></h1>
    • Font Size: 1.17em
    • Font Weight: bolder
    18.72 px
    <h1></h1>
    • Font Size: 1em
    • Font Weight: bolder
    16 px
    <h1></h1>
    • Font Size: .83em
    • Font Weight: bolder
    13.28 px
    <h1></h1>
    • Font Size: .67em
    • Font Weight: bolder
    10.72 px

    Atribut dan Fungsi

    Atribut Fungsi Value Contoh
    class Berisikan class selector untuk CSS Styling. class-selector <h1 class='heading1'>Judul Artikel</h1>
    id Berisikan kode unik id selector untuk CSS Styling dan element targeting. class-selector <h1 id='heading1'>Judul Artikel</h1>
    style Berisikan code styling CSS untuk gambar. CSS Value <h1 style='font-size:3rem'>Judul Artikel</h1>

    Contoh Penerapan

    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>

    Hasil

    Heading 1

    Heading 2

    Heading 3

    Heading 4

    Heading 5
    Heading 6
    Note: Ukuran yang tampil di bagian hasil sudah terpengaruh oleh CSS Styling, sehingga tidak tampil sebagaimana default.

    Catatan

    • Gunakan HTML Headings sesuai urutan berdasarkan skala prioritas. Melompat penggunaan pada dokumen tidak direkomendasikan.

    Penutup

    Itulah sedikit rangkuman tentang HTML Headings yang bisa saya bagikan. Jika ada yang kurang, kurang jelas, atau salah silahkan beritahukan atau tanyakan saja melalui kolom komentar di bawah. Semoga bermanfaat dan sampai jumpa di tulisan saya lainnya.

    Headings sangat membantu pembaca konten memahami setiap bagian dari konten pada webpage.Ninura

    Komentar

    Posting Komentar

    Harap berikan komentar yang relevan dengan topik tulisan.
    Jangan menyertakan link yang tidak berhubungan dengan konten tulisan. Apabila komentar mengandung link (apalagi yang tidak relevan), maka komentar akan dihapus.
    Budayakan sopan santun, hindari penggunaan bahasa yang provokatif, SARA, pornografi.
    Kritik dan saran yang membangun untuk konten ataupun untuk blog sangat berarti bagi Ninura.