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
<h3></h3>	Font Size: 1.17em Font Weight: bolder	18.72 px
<h4></h4>	Font Size: 1em Font Weight: bolder	16 px
<h5></h5>	Font Size: .83em Font Weight: bolder	13.28 px
<h6></h6>	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.	id-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

Kode berikut adalah contoh kode yang yang akan diterapkan sebagai contoh.

<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