Media Pengembangan Web & App | by APPKEY

Pembuatan Website Web Programming Kumpulan Tag Heading HTML, Fungsi dan Contohnya

Kumpulan Tag Heading HTML, Fungsi dan Contohnya

-

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

html1

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.

Artikel Terkait  Buat Website di Google Bisnisku Secara Gratis

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.

Artikel Terkait  Tujuh Tips untuk Desain Web dan Media Sosial yang Menarik Perhatian

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

html2

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.

Artikel Terkait  Codeigniter Adalah? Mana yang Lebih Baik Dibandingkan dengan Laravel

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>

Artikel Terkait  WhatsApp Web Adalah? Fungsi dan cara penggunaannya

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. Sampai jumpa!


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Blog Post Ranking 10

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Proses Komunikasi: Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Pengertian Internet & Dampak Positif dan Negatif Internet

Internet mungkin bukan sesuatu yang asing lagi, sebab semua kalangan pasti tahu apa itu internet. Hanya saja jika ditanya...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

Mau Jadi Front-end Developer? Kamu Perlu Menguasai 10 Skill Berikut Ini!

Secara umum untuk membuat sebuah website impian Anda menjadi nyata, Anda hanya perlu datang ke web developer dan menyampaikan...

Mockup adalah: Membuat Mockup Design untuk Website

Wireframes adalah kerangka. Prototipe menunjukkan perilaku. Mockup adalah kulitnya. Dalam artikel ini, kami akan menjelaskan mengapa mockup sama pentingnya dengan...

Jasa Pembuatan Website Untuk Toko Online

Perusahaan yang menyediakan Jasa pembuatan website untuk toko online bisa kita temukan dengan mudah di internet. Masing-masing dari perusahaan...

8 Contoh Search Engine Terbaik yang Paling Banyak Digunakan di Indonesia

Dulu jika ingin mencari informasi tentang apapun biasanya kita akan menanyakan kepada seseorang yang lebih mengetahui informasi, atau datang...

Layout adalah : 4 Prinsip Dasar Desain Layout

Desain layout adalah salah satu bagian dari seni kita semua tahu,  untuk bisa menampilkan seni dengan baik, kita harus...

Apa Itu Cache Memory? Pengertian dan Fungsinya

Apa itu cache memory? Orang yang setiap hari berinteraksi dengan internet, istilah cache tentu saja bukan lagi istilah yang...

Jasa Web

Bisnis online

Pengembangan

Murah

Profesional

Toko online

SEO

Pemasaran

Tips

Jasa Aplikasi

Pembuatan Aplikasi

Bisnis online

Pemasaran

Istilah IT

TIPS

TOOLS

JASA

HARGA

Jasa Marketing

Istilah SEO

Teknik SEO

Tips Marketing

Paling Sering dibaca
Mungkin Anda Menyukainya