Ade Roni Information Technology Enthusiast, akan merasa senang jika bisa saling bertukar knowledge tentang teknologi, programming dan blogging.

Cara Membuat Heading HTML Beserta Contohnya

2 min read

Cara Membuat Tag Heading HTML Pada Halaman Website

Pada artikel sebelumnya tentang Pengertian dan Struktur Dasar HTML, kita sudah sedikit membahasa tentang tag heading HTML pada artikel. Pada kesempatan kali ini kita akan coba belajar bagaimana cara membuat heading atau judul pada HTML.

Pengertian Heading HTML

Tag Heading merupakan tag yang disediakan oleh HTML untuk membuat sebuah judul pada teks dalam sebuah halaman web. Tag Heading secara default ditampilkan oleh browser dengan ukuran lebih besar dan lebih tebal (bold) dari teks biasa. Tidak hanya sekedar untuk memberikan penampilan yang lebih tegas dan penekanan, Tag Heading juga sangat penting dalam kaitannya dengan teknik Search Engine Optimization (SEO).

Ketika kita menambahkan heading pada konten web kita, tag heading ini merepresentasikan garis besar halaman pada sebuah browser. Alat bantu baca seperti screen reader membaca garis besar halaman untuk bantu memetakan dan mengarahkan pengguna selama menjelajahi halaman. Selain itu, heading juga merupakan elemen yang dicari oleh mesin pencarian contohnya Google Search, oleh karena itu penggunaan heading yang tepat sangat berpengaruh terhadap Search Engine Optimization (SEO) sebuah website.

Tag Heading dalam HTML terdiri dari 6 tingkatan berdasarkan tingkat penting dan ukurannya. Tag Heading tersebut adalah <h1>, <h2>, <h3>, <h4>, <h5> dan <h6>. Tag H1 memiliki ukuran paling besar, sedangkan Tag H6 memiliki ukuran paling kecil.

Perlu diperhatikan bahwa walaupun Tag Heading pada HTML ini memiliki ukuran yang bervariasi dan lebih tebal serta besar dari tag biasa, namun jangan gunakan Tag Heading ini hanya untuk membuat tulisan yang lebih besar. Gunakanlah Tag Heading hanya untuk membuat judul dan subjudul, bukan untuk membuat tulisan berukuran besar. Karena pada dasarnya untuk membuat tulisan besar kita bisa menggunakan CSS.

Biasanya H1 hanya digunakan satu kali dalam sebuah halaman web, yaitu sebagai judul utama (judul besar). H2, H3 dan seterusnya bisa kita gunakan beberapa kali sebagai sub judul sesuai dengan tingkat kedalaman konten website kita.

Cara Membuat Heading di HTML

Judul pada HTML dapat kita buat dengan tag sampai . Tag digunakan pada judul level pertama. Lalu tag lainnya digunakan pada sub heading atau level berikutnya. Masing-masing judul akan ditampilkan dengan ukuran teks yang bebeda. Tag adalah yang paling besar, dan tag paling kecil.

Berikut ini contoh penerapan heading empat level pada sebuah dokumen. Tiap level heading dituliskan dengan cara yang sama.

<!DOCTYPE HTML>
<html>
    <head>
        <title>TAG Heading HTML</title>
    </head>
    <body>
        <h1>Heading H1</h1>
        <h2>Heading H2</h2>
        <h3>Heading H3</h3>
        <h4>Heading H4</h4>
        <h5>Heading H5</h5>
        <h6>Heading H6</h6>
    </body>
</html>

Berikut tampilannya jika dijalankan pada browser :

Cara Menggunakan Tag Heading HTML Pada Halaman Website

Pada browser standarnya heading akan ditampilkan dengan tulisan tebal (bold text), dimulai dari h1 dengan ukuran teks paling besar kemudian berurutan sesuai dengan level heading-nya.

<!DOCTYPE HTML>
<html>
    <head>
        <title>Penggunaan TAG Heading HTML</title>
    </head>
    <body>
        <h1>Judul Utama</h1>
        
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

        <h2>Sub Judul</h2>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

        <h2>Sub Judul</h2>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

        <h3>Sub dari Sub Judul</h3>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    </body>
</html>

Berikut tampilannya jika dijalankan pada browser :

Contoh Penggunaan Tag Heading HTML Pada Halaman Website

Sebagai penutup, perlu diingat pastikan menggunakan Tag Heading dalam membuat halaman web, karena Tag Heading sangat berperan penting dalam meningkatkan nilai web kita di mata Search Engine. Demikianlah artikel tentang cara menggunakan Tag Heading pada HTML. Semoga bermanfaat.

Ade Roni Information Technology Enthusiast, akan merasa senang jika bisa saling bertukar knowledge tentang teknologi, programming dan blogging.

Tinggalkan Balasan

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