Banner HTML

Menggunakan Elemen Heading Di HTML

Heading adalah termasuk konten umum yang dapat Anda temui dengan mudah di halaman sebuah web. Untuk membuat suatu heading di halaman web, Anda dapat menggunakan elemen HTML mulai dari h1 sampai dengan h6. Heading merupakan elemen blok (block element) yang dapat berisi elemen HTML lainnya dan ketika ditampilkan di browser (peramban) akan memulai di baris baru.

Tiap-tiap elemen heading mempunyai font dan ukuran default yang semuanya ditentukan dari font dasar browser yang digunakan. Font dasar dari browser umumnya adalah Times New Roman dengan ukuran 16 pixel. Namun demikian, Anda masih dapat merubah nilainya dengan menggunakan CSS. Elemen heading tidak dimaksudkan untuk memformat teks (text), melainkan untuk menyediakan struktur yang logis untuk dokumen Anda.

Heading pertama dari halaman web seharusnya adalah elemen h1 yang menandai heading paling penting. Heading penting level berikutnya seharusnya elemen h2. Setelah h2, heading berikutnya seharusnya h3 dan bukan h4, begitu seterusnya. Ini berarti Anda perlu turun satu level dan tidak seharusnya melompat dua atau lebih ke level heading di bawahnya. Ketika Anda menggunakan struktur heading secara benar, ini akan membantu mesin telusur (search engine) melakukan indek (indexing) website secara lebih baik dan memberikan kemudahan akses pada device seperti screen reader. Berikut ini adalah tabel elemen heading dari h1 sampai dengan h6.

Elemen Heading Di HTML
Elemen Keterangan
h1 Membuat heading level 1 dengan konten tebal (bold) dan ukuran font 200% dari ukuran font dasar.
h2 Membuat heading level 2 dengan konten tebal (bold) dan ukuran font 150% dari ukuran font dasar.
h3 Membuat heading level 3 dengan konten tebal (bold) dan ukuran font 117% dari ukuran font dasar.
h4 Membuat heading level 4 dengan konten tebal (bold) dan ukuran font 100% dari ukuran font dasar.
h5 Membuat heading level 5 dengan konten tebal (bold) dan ukuran font 83% dari ukuran font dasar.
h6 Membuat heading level 6 dengan konten tebal (bold) dan ukuran font 67% dari ukuran font dasar.

Berkut ini contoh penggunaan elemen heading (h1 dan h2). Elemen h1 digunakan untuk menandai heading paling penting. Elemen h1 ini memiliki dua sub-heading yang menandai heading penting level berikutnya. Untuk membuat sub-heading ini, digunakan elemen h2. Anda tidak dianjurkan melompat menggunakan dua atau lebih level heading dibawahnya, misalnya h3, h4 atau h5, untuk menjaga tetap terciptanya struktur yang logis.

<!DOCTYPE html>
<html>
<head>
<title>Menggunakan Elemen Heading.</title>
</head>
<body>
<h1>Karakteristik Bahasa Pemrograman Java.</h1>
<p>Tulis penjelasan tentang karakteristik bahasa pemrograman Java di sini...</p>
<h2>Object-Oriented.</h2>
<p>Tulis penjelasan tentang object-oriented di sini...</p>
<h2>Architecture-Neutral.</h2>
<p>Tulis penjelasan tentang Architecture-Neutral di sini...
</body>
</html>

Karakteristik Bahasa Pemrograman Java.

Tulis penjelasan tentang karakteristik bahasa pemrograman Java di sini...

Object-Oriented.

Tulis penjelasan tentang object-oriented di sini...

Architecture-Neutral.

Tulis penjelasan tentang Architecture-Neutral di sini...

Untuk memperbaiki mutu konten, Anda dapat berpartisipasi dengan cara melaporkan apabila menemukan kesalahan ketik, kata-kata rangkap, redaksi kurang pas (jelas), gambar pendukung tidak ada dan sebagainya melalui form Kontak Kami untuk mendapatkan perbaikan. Terima kasih atas kerjasamanya.

Hindro HindriantoHindro adalah pendiri sekaligus admin termasmedia.com dan topikit.com, blog online yang mengulas teknologi informasi. Dunia web mulai ditekuni tahun 2012 dengan mempelajari CMS Joomla dan Wordpress. Beberapa buku yang sekarang dipelajari antara lain PHP, HTML5, ASP.NET 4.5, JavaScript, CSS3, MySQL, Adobe Dreamweaver, Adobe Photoshop dan Adobe Flash.