Media Pengembangan Web & App | by APPKEY

Pembuatan WebsiteWeb ProgrammingKumpulan Tag HTML dan Contohnya, Yuk Simak!

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

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  10 Langkah Dasar Algoritma Pemrograman yang Penting Untuk Diketahui Pemula

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  CRUD Laravel 7 : Cara Terlengkap Membuat CRUD Menggunakan Laravel

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  Blogging Adalah? Pengertian Blogging Dalam Dunia Web

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  Pengertian Situs Web Nirlaba dan Terbaik di Indonesia

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!


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

Mau posting artikel iklan?

Yuk klik dan ikuti ketentuan layanan dari kami, dapatkan penawaran paket dengan harga terbaik!

Subscribe Sekarang

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

Kategori

Blog Post Ranking 10

Contoh PHP Curl : 10 Hal Luar Biasa yang dapat Anda Kembangkan dengan Curl

Meningkatnya jumlah aplikasi yang pindah ke web telah membuat "HTTP Scripting" lebih sering diminta dan diinginkan. Untuk dapat secara...

Encoding Adalah : Proses Komunikasi Encoding dan Decoding

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

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...

Rekomendasi 7 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

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...

Ini Cara Mudah Membuat Redirect PHP | Seri Belajar PHP

Fungsi redirect PHP sangat banyak digunakan dalam kehidupan berwebsite alias mengelola website. Script redirect PHP banyak dipergunakan oleh user...

Cara Membuat Aplikasi di Playstore dengan Mudah

Membuat aplikasi di Playstore bisa Anda lakukan dengan mudah. Terdapat beberapa situs yang bisa membantu Anda untuk membuat aplikasi...

4 Cara Mengatasi Autentikasi Google Play Store dengan Cepat dan Mudah

Apakah Anda sedang mengalami masalah autentikasi Google Play Store? Permasalahan autentikasi Google Play Store adalah permasalahan umum sering dialami...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Rekomendasi 10 Aplikasi Coding Android Terbaik

Ketersediaan aplikasi coding Android memang banyak dicari oleh orang-orang yang sedang atau akan memulai untuk membuat aplikasi android. Jika...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya