Kumpulan Tag HTML dan Contohnya, Yuk Simak!

Last Updated on February 2, 2022 by

Sadarkah Anda bahwa judul dan sub judul mempunyai peranan yang sangat penting dalam kebutuhan konten website Anda? Sekarang coba bayangkan jika konten-konten di website Anda tidak mempunyai judul atau subjudul. Kira-kira akankah para pengunjung mengerti apa yang sedang mereka lihat atau baca dari website Anda? Jawabannya tentu saja tidak.

Untuk Anda yang sering menulis artikel, tentunya Anda sudah paham bahwa judul adalah komponen esensial dalam sebuah artikel. Jika diibaratkan dengan manusia, maka judul setara dengan kepala dari manusia. Tanpa adanya kepala tersebut, maka tulisan Anda menjadi tidak sempurna.

Sama halnya dengan susunan konten di website Anda, tanpa adanya judul website serta judul-judul atau sub judul lain, maka kecil kemungkinan pengunjung akan tertarik untuk melihat-lihat atau berlama-lama di website Anda.

Bayangkan jika Anda menelusuri sebuah website yang tidak ada judulnya. Maka tentunya Anda tidak tahu Anda tiba di website apa, website milik siapa, dan apa saja konten yang dimuat oleh website tersebut.

Ambil contoh website Appkey. Pada bagian teratas dari website Appkey terdapat judul khusus. Dari judul ini saja, kita sudah dapat melihat bahwa website ini bertemakan tentang dunia aplikasi. Selain itu, judul website juga bisa menjadi nama brand yang sedang Anda kembangkan.

Namun bagaimana caranya untuk kita bisa membuat judul dan sub judul di website? Salah satu alternatifnya adalah dengan membuat tag HTML. Pernahkah Anda mendengar istilah tag HTML sebelumnya? Sudahkah Anda tahu apa pengertian tag HTML?

Jangan khawatir jika Anda baru pertama kali mendengar tentang tag HTML. Artikel edisi kali ini akan membahas secara lengkap terkait pengertian tag HTML, kumpulan tag HTML dan contohnya. Penasaran? Mari langsung lanjutkan scroll untuk memulai pembahasan pertama! Selamat membaca!

Pengertian Tag HTML

Untuk Anda yang sudah menguasai bahasa pemrograman HTML, barang kali Anda sudah mengenal apa itu tag HTML. Tag HTML juga dikenal dengan tag heading atau heading. Tag heading atau heading ini sendiri merupakan suatu tag spesial milik bahasa pemrograman HTML yang biasa digunakan untuk membuat sebuah teks judul dan sub judul dalam halaman website.

Biasanya, tag heading ini sangat mudah untuk dikenali sebab pengaturan default dari tag heading umumnya lebih besar dan lebih tebal dari teks biasa atau isi teks content. Tag heading memang biasa dibuat dalam bentuk yang menonjol guna memudahkan pengguna untuk mengenali yang mana judul dan yang mana teks dalam sebuah website.

Namun tak hanya sampai di sana saja, tag heading juga dapat digunakan untuk memaksimalkan Search Engine Optimization atau SEO. Dengan menyisipkan kata kunci pada judul atau sub judul artikel, maka besar kemungkinan Google akan lebih mudah untuk mendeteksi artikel Anda sehingga dapat memunculkannya dengan lebih mudah di laman penelusuran hasil.

Alhasil, posisi SEO dari website Anda dapat menjadi lebih tinggi dibandingkan dengan website lain yang judul artikelnya tidak memuat kata kunci. Ada juga yang menggunakan tag heading untuk memberikan penegasan dan penekanan pada bagian-bagian tertentu dalam artikel mereka.

Ada beberapa jenis kumpulan tag HTML dan contohnya yang dapat kita pelajari dengan mudah. Setidaknya ada 6 kumpulan tag HTML dan contohnya. Keenam kumpulan tag HTML dan contohnya ini terdiri dari heading 1; heading 2; heading 3; heading 4; heading 5 dan heading 6.

Setiap heading mempunyai ukuran yang berbeda-beda. Biasanya, teks heading 1 atau tag 1 mempunyai ukuran yang paling besar dibandingkan yang lain. Sementara tag headin 6 mempunyai ukuran yang paling kecil. semakin besar angka dari heading, maka akan semakin kecil ukurannya di website.

Jika digambarkan, maka susunan kumpulan tag HTML dan contohnya adalah sebagai berikut

‘

‘
,

,

,

,

dan

.

Kalau dituangkan ke dalam tulisan, maka bentuknya seperti ini:

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5

Heading H6

Berikut kumpulan tag HTML dan contohnya untuk tulisan dan sub judul:

Judul Utama Artikel (Heading 1)
Ini adalah intro dari artikel Anda sebelum masuk ke heading 2
Sub Judul (Heading 2)
Ini adalah isi sub judul dari artikel sebelum masuk ke heading 3

Sub Judul dari sub judul (Heading 3)
Ini adalah isi sub judul kedua sebelum masuk ke heading 4. Begitu seterusnya.

Umumnya, heading 1 dipakai untuk membuat judul utama dari artikel web sehingga heading 1 hanya digunakan 1 kali saja dalam website. Sementara untuk membuat sub judul lain, Anda bisa menggunakan heading 2, heading 3, dan seterusnya hingga heading 6.

Heading vs Title dan Header

Mungkin sampai di sini Anda merasa bahwa heading itu mirip dengan title dan header dari sebuah web atau konten web. Asumsi ini masuk akal, mengingat heading, title dan header sama-sama digunakan untuk membuat sebuah judul dan mempertegasnya dibandingkan tulisan-tulisan yang lain di dalam web. Namun terdapat perbedaan yang cukup signifikan antara heading, title dan header. Apa sajakah perbedaan tersebut?

• Title adalah bagian judul utama dari website. Title ditampilkan pada bagian paling atas atau di kolom web browser. Title dibuat dengan menggunakan kode: tag <title>
• Header adalah kepala (kop) web – mirip dengan kop pada surat biasa. Header dibuat dengan kode: tag <header>
• Heading adalah judul dan sub judul artikel pada website. Heading dibuat dengan kode tag <h1>sampai <h6>.

Singkatnya, susunan penulisan dari title, header dan heading adalah dimulai dari title, dilanjutkan dengan header dan terakhir adalah heading sebagai judul dari artikel. Setelah heading, barulah Anda bisa menemukan teks isi dari konten artikel pada website.

Ingat Ini Saat Menulis Heading HTML: Aturan Tag Heading

Bagaimanakah urutan yang baik saat kita menulis heading HTML? Bolehkah kita menggunakan kumpulan tag HTML dan contohnya secara sembarangan alias sesuka hati kita? Mungkin ada orang yang menggunakan heading kecil seperti heading 5 untuk judul awal, kemudian memakai heading yang lebih besar seperti heading 2 untuk sub judul.

Sebenarnya tidak ada aturan pasti yang melarang bahwa Anda tidak boleh berkreasi seperti contoh di atas. Namun biasanya, menggunakan kumpulan tag HTML dan contohnya secara sembarangan dinilai tidak bagus menurut perhitungan SEO. Besar kemungkinan website yang mengaplikasikan heading secara sembarangan justru akan mendapatkan ranking yang kecil dari SEO.

Lantas bagaimanakah aturan penulisan heading tag HTML yang baik? Jawabannya sederhana. Anda hanya perlu menulis setiap judul mengikuti urutan levelnya. Semisal dari pertama, Anda menulis judul yang paling besar menggunakan heading 1, kemudian diikuti dengan heading 2 untuk judul berikutnya, heading 3 untuk sub judul, heading 4 untuk sub judul dari sub judul, dan seterusnya sesuai kebutuhan.

Anda pun tidak harus menggunakan heading 1 sampai heading 6 dalam website. Jika website dan konten Anda sudah cukup hanya sampai di heading 3, maka Anda bisa berhenti sampai di sana saja. Sering kali pengelola website hanya menggunakan heading 1 sampai heading 3 atau 4 saja. Masih jarang ada orang yang menggunakan heading sampai level 5 dan 6.

Selain urutan susunan, ada pula aturan lain tentang kumpulan tag HTML dan contohnya. Aturan tersebut adalah mengenai atribut. Dalam bahasa pemrograman HTML, Anda seringkali akan bersinggungan dengan atribut, bukan? Hamun heading tidak mempunyai atribut khusus. Penulisan heading biasanya hanya akan memakai atribut globel.

Kumpulan tag HTML dan contohnya berdasarkan atribut antara lain:

• Title untuk menambahkan informasi;
• Style untuk memberi kode ke CSS;
• Id untuk membuat nama yang unik pada Id (dipakai oleh JavaScript, link dan CSS);
• Class untuk menamani class CSS.

Praktek Membuat Heading dengan HTML
Pada bagian ini, kami akan memberikan contoh singkat terkait praktek membuat heading website di HTML. Seperti yang sudah sempat disinggung sebelumnya, heading pada HTML dapat dibuat memakai tag <h1> sampai <h6>. Jika disusun pada struktur coding HTML, maka susunan heading adalah sebagai berikut:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Percobaan Membuat Tag Heading HTML</title>
</head>
<body>
<h1>Heading Judul 1</h1>
<h2>Heading Judul 2</h2>
<h3>Heading Judul3</h3>
<h4>Heading Judul 4</h4>
<h5>Heading Judul 5</h5>
<h6>Heading Judul 6</h6>
</body>
</html>

Untuk mengaplikasikannya pada artikel utuh web yang sudah berisi teks konten, Anda cukup menuangkannya ke dalam struktur berikut:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Percobaan Membuat Tag Heading HTML</title>
</head>
<body>
<h1>Tutorial Heading di HTML Terlengkap</h1>
<p>
Tutorial seri belajar ngoding kali ini akan membahas tentang cara membuat heading di HTML. Ada 6 kumpulan tag HTML dan contohnya yakni heading 1, heading 2, heading 3, heading 4, heading 5 dan heading 6.
</p>
<h2>Cara Membuat Sub Judul</h2>
<p>
Heading 1 adalah judul utama dari artikel. Sub judul diawali dari heading 2, 3, 4, 5 dan sampai heading 6. Anda bebas memakai heading sebanyak keperluan.
</p>
</body>
</html>

Demikianlah pembahasan kali ini tentang kumpulan tag HTML dan contohnya. Yuk mulai gunakan tag heading pada setiap tulisan Anda agar artikel website bisa lebih mudah dideteksi dan masuk ke dalam ranking tinggi di SEO! Sekali lagi ingat, gunakan heading hanya untuk membuat judul dan sub judul saja ya. Jangan digunakan untuk sekadar membuat tulisan besar. Sebab, untuk membuat tulisan besar biasa, maka kita akan menggunakan metode lain yang tepat yaitu CSS.

Terima kasih sudah mengikuti artikel edisi kali ini sampai di sini! Temukan lebih banyak artikel menarik yang lebih informatif hanya di Appkey.id. Sampai jumpa!