Fungsi Heading HTML pada Website

Heading sering digunakan untuk membuat judul berita, atau judul informasi lain di dalam halaman website. Fungsi heading pada HTML adalah untuk menunjukkan bagian-bagian penting pada konten website. Tampilan heading umumnya berupa teks yang berukuran lebih besar dan tebal (bold). Namun bukan berarti heading digunakan untuk membuat teks tebal (bold). Gunakan heading hanya untuk membuat judul atau sub judul.

Apakah Heading HTML Penting?

Mesin pencari (Search Engine) menggunakan heading untuk mengindeks struktur dan konten halaman web. Begitu juga dengan pembaca yang membaca berita berdasarkan judulnya, untuk itu heading sangat penting digunakan dalam membuat halaman website.

Membuat Heading Pada HTML

Dalam membuat Heading, ada 6 jenis heading yang penggunaannya dapat disesuaikan dengan keinginan programmer.

Heading 1, biasanya digunakan untuk judul utama
Heading 2, digunakan untuk sub judul
Begitu juga untuk Heading 3, heading 4, Heading 5 dan Heading 6

Latihan Membuat Heading pada HTML:

<!DOCTYPE html>
<html>
<head>
	<title>Belajar Heading HTML Bersama SolusiLain.Com</title>
</head>
<body>

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

<!DOCTYPE html>

<html>

<head>

<title>Belajar Heading HTML Bersama SolusiLain.Com</title>

</head>

<body>

<h1>Belajar Heading 1 HTML</h1>

<h2>Belajar Heading 2 HTML</h2>

<h3>Belajar Heading 3 HTML</h3>

<h4>Belajar Heading 4 HTML</h4>

<h5>Belajar Heading 5 HTML</h5>

<h6>Belajar Heading 6 HTML</h6>

</body>

</html>

Hasil Latihan di atas:

Belajar Heading 1 HTML

Belajar Heading 2 HTML

Belajar Heading 3 HTML

Belajar Heading 4 HTML

Belajar Heading 5 HTML

Belajar Heading 6 HTML

Dari latihan heading di atas, terlihat bahwa Heading 1 sampai Heading 6 memiliki ukuran yang semakin kecil, kalian dapat menyesuaikan penggunaannya sesuai kebutuhan.

Tampilan hasil latihan heading HTML di Browser terlihat pada gambar di bawah ini.

Dengan menerapkan heading HTML maka informasi yang kita sajikan akan lebih rapi dan terstruktur serta mudah diindex oleh search engine seperti Google dan Bing.

Belajar Heading Pada HTML