Cara menggunakan fungsi h2> di html

Tag Heading adalah kode HTM yang berfungsi untuk mengubah teks. Heading tag biasanya digunakan untuk membuat judul artikel atau dokumen. Spesifikasi Tag Heading memiliki berbagai tingkatan yang biasa disebut dengan H1, H2, H3, H4, H5 dan H6 yang masing-masing memiliki fungsi yang berbeda. Dalam melakukan Optimasi SEO Onpage, Tag Heading juga menjadi faktor penting yang harus diperhatikan. Namun, banyak orang yang belum mengetahui arti dan fungsi dari Heading Tag. Mereka biasanya hanya fokus menulis artikel dan hanya menggunakan template yang tidak SEO Friendly. Kenapa sering diabaikan?. ?


Sebenarnya cara mengaplikasikan, mengganti atau menyusun Tag Heading H1, H2, H3, H4, H5 dan H6 relatif mudah. Misalnya dengan membuka notepad lalu copy kode dibawah ini dan pastekan kode dibawah ini ke notepad, lalu klik Save dan pilih All File As Type. Buka kembali notepad dan Anda dapat melihat perubahan yang terjadi


Berikut adalah contoh dari Heading Tag


Pengertian dan Fungsi Tag Heading


Judul Ukuran 1


Judul Ukuran 2


Judul Ukuran 3


Judul Ukuran 4


Judul Ukuran 5
Judul Ukuran 6



Tag Heading H1 sampai H6 adalah salah satu teknik SEO yang sangat dianjurkan untuk diterapkan pada blog atau website, tujuannya adalah untuk memaksimalkan hasil pencarian. oleh karena itu dalam menerapkan Tag Heading sebaiknya dilakukan secara berurutan mulai dari Tag H1 sampai H6 dan jangan sembarangan/random

.

Sesuai dengan penjelasan kami di atas, bahwa setiap Tag memiliki fungsi dan penempatan yang berbeda. oleh karena itu, anda jangan sampai salah dalam melakukan setting Tag Heading H1 sampai H6. Kode tag H1, H2 dan H3 adalah kode paling dasar dalam Tag Heading dan kode tersebut otomatis terpasang di semua website/blog. Apa yang terjadi jika kita melakukan kesalahan dalam menempatkan kode Heading Tag. ?, anda tidak perlu khawatir akan hal tersebut karena tidak akan mengacaukan atau membuat error pada blog/website anda


Jika Anda masih belum memahami dengan jelas fungsi Tag Heading H1, H2, H3, H4, H5, dan H6, kami akan menjelaskan secara detail apa saja fungsinya. Untuk itu perhatikan baik-baik penjelasan di bawah ini


Tag Kode Fungsi Heading H1, H2, H3, H4, H5 dan H6

  • Tag Heading

    : tag ini digunakan pada nama blog/website (jika berada pada homepage) dan akan berubah menjadi

    pada halaman posting. 

  • Tag Heading

    : tag ini digunakan pada judul artikel blog (jika berada pada homepage) dan akan berubah menjadi

    pada halaman posting. 

  • Tag Heading

    : tag ini digunakan pada sub-judul atau penjelasan dari judul artikel atau posting, dan bisa juga digunakan pada judul widget. 

  • Tag Heading

    : tag ini digunakan untuk judul artikel terkait, komentar atau bisa juga digunakan pada judul widget. 

  • Tag Heading : tag ini digunakan sebagai nama komentator atau nama pemberi komentar. 
  • Tag Heading : tag ini digunakan sebagai footer seperti "All Rights Reserved" atau "Powered by Blogger" yang letaknya berada paling bawah.

Jika Anda sudah mengetahui dan memahami arti dan fungsi Tag Heading, maka melakukan optimasi SEO Onpage tidak akan terhambat. Pelajari dan terapkan Tag Heading agar blog Anda lebih disukai oleh mesin pencari

Judul dalam HTML dapat dibuat dengan tag <h1> hingga <h6>. Tag <h1>_ digunakan pada judul tingkat pertama. Kemudian tag lain digunakan pada sub heading atau level berikutnya

Setiap judul akan ditampilkan dengan ukuran teks yang berbeda. Tag <h1> adalah yang terbesar, dan tag <h6> adalah yang terkecil

Contoh

<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Heading di HTML</title> </head> <body> <h1>Ini Judul Level 1</h1> <h2>Ini Judul Level 2</h2> <h3>Ini Judul Level 3</h3> <h4>Ini Judul Level 4</h4> <h5>Ini Judul Level 5</h5> <h6>Ini Judul Level 6</h6> </body> </html>

Hasil

Tag <h1> biasanya digunakan pada judul artikel. Kemudian tag <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Heading di HTML</title> </head> <body> <h1>Belajar Heading di HTML</h1> <p> Heading di HTML ada enam, yakni H1, H2, H3, H4, H5, dan H6. Heading berfungsi untuk membuat judul untuk artikel dan juga sub judul pada bagian artikel. </p> <h2>Membuat Sub Judul</h2> <p> Sub judul atau sub heading dimulai dengan tag H2. Lalu diikuti dengan tag selanjutnya hingga sampai H6. Sementara itu, tag H1 hanya digunakan untuk judul artikel saja. </p> </body> </html>3, <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Heading di HTML</title> </head> <body> <h1>Belajar Heading di HTML</h1> <p> Heading di HTML ada enam, yakni H1, H2, H3, H4, H5, dan H6. Heading berfungsi untuk membuat judul untuk artikel dan juga sub judul pada bagian artikel. </p> <h2>Membuat Sub Judul</h2> <p> Sub judul atau sub heading dimulai dengan tag H2. Lalu diikuti dengan tag selanjutnya hingga sampai H6. Sementara itu, tag H1 hanya digunakan untuk judul artikel saja. </p> </body> </html>4, <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Heading di HTML</title> </head> <body> <h1>Belajar Heading di HTML</h1> <p> Heading di HTML ada enam, yakni H1, H2, H3, H4, H5, dan H6. Heading berfungsi untuk membuat judul untuk artikel dan juga sub judul pada bagian artikel. </p> <h2>Membuat Sub Judul</h2> <p> Sub judul atau sub heading dimulai dengan tag H2. Lalu diikuti dengan tag selanjutnya hingga sampai H6. Sementara itu, tag H1 hanya digunakan untuk judul artikel saja. </p> </body> </html>5, <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Heading di HTML</title> </head> <body> <h1>Belajar Heading di HTML</h1> <p> Heading di HTML ada enam, yakni H1, H2, H3, H4, H5, dan H6. Heading berfungsi untuk membuat judul untuk artikel dan juga sub judul pada bagian artikel. </p> <h2>Membuat Sub Judul</h2> <p> Sub judul atau sub heading dimulai dengan tag H2. Lalu diikuti dengan tag selanjutnya hingga sampai H6. Sementara itu, tag H1 hanya digunakan untuk judul artikel saja. </p> </body> </html>6, dan <h6> digunakan pada sub-judul

Mari kita coba membuat artikel yang dilengkapi dengan heading. Buat file HTML baru kemudian isi dengan kode berikut

<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Heading di HTML</title> </head> <body> <h1>Belajar Heading di HTML</h1> <p> Heading di HTML ada enam, yakni H1, H2, H3, H4, H5, dan H6. Heading berfungsi untuk membuat judul untuk artikel dan juga sub judul pada bagian artikel. </p> <h2>Membuat Sub Judul</h2> <p> Sub judul atau sub heading dimulai dengan tag H2. Lalu diikuti dengan tag selanjutnya hingga sampai H6. Sementara itu, tag H1 hanya digunakan untuk judul artikel saja. </p> </body> </html>_

Hasil

Berdasarkan pengalaman saya—dalam menulis artikel—tag <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Heading di HTML</title> </head> <body> <h1>Belajar Heading di HTML</h1> <p> Heading di HTML ada enam, yakni H1, H2, H3, H4, H5, dan H6. Heading berfungsi untuk membuat judul untuk artikel dan juga sub judul pada bagian artikel. </p> <h2>Membuat Sub Judul</h2> <p> Sub judul atau sub heading dimulai dengan tag H2. Lalu diikuti dengan tag selanjutnya hingga sampai H6. Sementara itu, tag H1 hanya digunakan untuk judul artikel saja. </p> </body> </html>6 dan <h6> jarang digunakan, karena judul yang dibuat hanya mencapai level 2, 3, dan 4

Urutan Penulisan Judul

Apakah mungkin menulis judul yang tidak memijat?

Itu berarti. seperti menggunakan <h6>_ untuk judul awal, kemudian <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Heading di HTML</title> </head> <body> <h1>Belajar Heading di HTML</h1> <p> Heading di HTML ada enam, yakni H1, H2, H3, H4, H5, dan H6. Heading berfungsi untuk membuat judul untuk artikel dan juga sub judul pada bagian artikel. </p> <h2>Membuat Sub Judul</h2> <p> Sub judul atau sub heading dimulai dengan tag H2. Lalu diikuti dengan tag selanjutnya hingga sampai H6. Sementara itu, tag H1 hanya digunakan untuk judul artikel saja. </p> </body> </html>5 untuk subjudul

Ini bagus, tapi tidak bagus untuk SEO.

Penulisan judul yang baik adalah judul yang mengikuti tingkatan

Judul <h1> di tingkat pertama, <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Heading di HTML</title> </head> <body> <h1>Belajar Heading di HTML</h1> <p> Heading di HTML ada enam, yakni H1, H2, H3, H4, H5, dan H6. Heading berfungsi untuk membuat judul untuk artikel dan juga sub judul pada bagian artikel. </p> <h2>Membuat Sub Judul</h2> <p> Sub judul atau sub heading dimulai dengan tag H2. Lalu diikuti dengan tag selanjutnya hingga sampai H6. Sementara itu, tag H1 hanya digunakan untuk judul artikel saja. </p> </body> </html>3 di tingkat 2, dan seterusnya

Atribut untuk Heading

Ingat tentang atribut?

Ya, dia adalah _______

Sudahkah kamu lupa?

Coba buka diskusi lain tentang. Apa itu Tag, Elemen, dan Atribut dalam HTML?

Tajuk tidak memiliki atribut khusus. Biasanya menggunakan atribut globel

Sebagai contoh

  • <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Heading di HTML</title> </head> <body> <h1>Tutorial Membuat Heading di HTML</h1> <hr /> <p> Heading adalah judul sebuah artikel dan bagian dari artikel. Ada Enam level heading pada HTML, yakni dimulai dari H1, H2, H3, sampai H6. </p> </body> </html>_4 untuk memberikan nama id yang unik. Biasanya ini akan digunakan oleh link, CSS, dan Javascript;
  • <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Heading di HTML</title> </head> <body> <h1>Tutorial Membuat Heading di HTML</h1> <hr /> <p> Heading adalah judul sebuah artikel dan bagian dari artikel. Ada Enam level heading pada HTML, yakni dimulai dari H1, H2, H3, sampai H6. </p> </body> </html>_5 untuk memberi nama class yang akan digunakan oleh CSS;
  • <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Heading di HTML</title> </head> <body> <h1>Tutorial Membuat Heading di HTML</h1> <hr /> <p> Heading adalah judul sebuah artikel dan bagian dari artikel. Ada Enam level heading pada HTML, yakni dimulai dari H1, H2, H3, sampai H6. </p> </body> </html>_6 untuk memberikan kode css secara langsung;
  • <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Heading di HTML</title> </head> <body> <h1>Tutorial Membuat Heading di HTML</h1> <hr /> <p> Heading adalah judul sebuah artikel dan bagian dari artikel. Ada Enam level heading pada HTML, yakni dimulai dari H1, H2, H3, sampai H6. </p> </body> </html>_7 untuk menambahkan informasi tambahan;
  • dll.

Daftar atribut global, bisa Anda lihat di MDN. Atribut Global HTML

Perbedaan antara Heading dan Judul dan Header

Meski sama-sama digunakan untuk urusan gelar, ketiga unsur ini berbeda

  • Judul adalah judul artikel dan bagian artikel yang dibuat dengan tag <h1> sampai <h6>
  • Judul adalah judul dari web yang dibuat dengan tag <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Heading di HTML</title> </head> <body> <h1 style="text-decoration: underline;">Tutorial Membuat Heading di HTML</h1> <p> Heading adalah judul sebuah artikel dan bagian dari artikel. Ada Enam level heading pada HTML, yakni dimulai dari H1, H2, H3, sampai H6. </p> </body> </html>0
  • Header adalah bagian kepala (header) pada web yang dibuat dengan tag <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Heading di HTML</title> </head> <body> <h1 style="text-decoration: underline;">Tutorial Membuat Heading di HTML</h1> <p> Heading adalah judul sebuah artikel dan bagian dari artikel. Ada Enam level heading pada HTML, yakni dimulai dari H1, H2, H3, sampai H6. </p> </body> </html>1

Lihatlah gambar berikut

Apakah perbedaannya jelas?

Beri tag <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Heading di HTML</title> </head> <body> <h1 style="text-decoration: underline;">Tutorial Membuat Heading di HTML</h1> <p> Heading adalah judul sebuah artikel dan bagian dari artikel. Ada Enam level heading pada HTML, yakni dimulai dari H1, H2, H3, sampai H6. </p> </body> </html>_0 untuk judul yang ditampilkan di web beowser. Tag <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Heading di HTML</title> </head> <body> <h1 style="text-decoration: underline;">Tutorial Membuat Heading di HTML</h1> <p> Heading adalah judul sebuah artikel dan bagian dari artikel. Ada Enam level heading pada HTML, yakni dimulai dari H1, H2, H3, sampai H6. </p> </body> </html>_1 sama dengan kop surat. Kemudian heading <h1> s/d <h6> menjadi judul artikel

Bonus. Gaya Tajuk

Padahal, ini masuk dalam materi juru bahasa tentang CSS. Oleh karena itu, saya jadikan bonus yang bisa Anda baca atau tidak

Jadi

Heading Style adalah style CSS yang diberikan pada heading agar terlihat menarik

Berikut beberapa style yang sering digunakan dalam heading

Judul dengan Garis Bawah

Judul dengan garis terdepan dapat dibuat menggunakan tag <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Heading di HTML</title> </head> <body> <h1 style="text-decoration: underline;">Tutorial Membuat Heading di HTML</h1> <p> Heading adalah judul sebuah artikel dan bagian dari artikel. Ada Enam level heading pada HTML, yakni dimulai dari H1, H2, H3, sampai H6. </p> </body> </html>6 dan CSS

Contoh penggunaan tag <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Heading di HTML</title> </head> <body> <h1 style="text-decoration: underline;">Tutorial Membuat Heading di HTML</h1> <p> Heading adalah judul sebuah artikel dan bagian dari artikel. Ada Enam level heading pada HTML, yakni dimulai dari H1, H2, H3, sampai H6. </p> </body> </html>6

<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Heading di HTML</title> </head> <body> <h1>Tutorial Membuat Heading di HTML</h1> <hr /> <p> Heading adalah judul sebuah artikel dan bagian dari artikel. Ada Enam level heading pada HTML, yakni dimulai dari H1, H2, H3, sampai H6. </p> </body> </html>_

Hasil

Contoh menggunakan CSS

<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Heading di HTML</title> </head> <body> <h1 style="text-decoration: underline;">Tutorial Membuat Heading di HTML</h1> <p> Heading adalah judul sebuah artikel dan bagian dari artikel. Ada Enam level heading pada HTML, yakni dimulai dari H1, H2, H3, sampai H6. </p> </body> </html>

Hasil

Kasus Teks untuk Tajuk

Judul terkadang ditulis dengan berbagai gaya kasus. Ada yang menggunakan huruf kapital semua, ada yang menggunakan huruf kapital hanya di awal kata

Contoh

INI HEADING DENGAN HURUF BESAR SEMUA Ini Heading Dengan Huruf Beasr Di Depan Saja

Nah, untuk membuat style case heading ini, kita bisa menggunakan CSS dengan atribut <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Heading di HTML</title> </head> <body> <h1 style="text-decoration: underline;">Tutorial Membuat Heading di HTML</h1> <p> Heading adalah judul sebuah artikel dan bagian dari artikel. Ada Enam level heading pada HTML, yakni dimulai dari H1, H2, H3, sampai H6. </p> </body> </html>8

Contoh

<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Heading di HTML</title> </head> <body> <h1 style="text-transform: uppercase;">Heading dengan huruf Besar semua</h1> <p> Heading adalah judul sebuah artikel dan bagian dari artikel. Ada Enam level heading pada HTML, yakni dimulai dari H1, H2, H3, sampai H6. </p> <h1 style="text-transform: capitalize;">Heading dengan huruf Besar di awal kata</h1> <p> Properti text-transform berfungsi untuk menentukan style case dari teks. Properti ini bisa diberikan nilai capitalize, uppercase, lowercase, initial, none, inherit. </p> </body> </html>

Hasil

Warna untuk Tajuk

Sama seperti elemen lainnya, heading juga bisa diwarnai dengan bantuan CSS. Kita bisa memberi warna pada teks dan background

Contoh

<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Heading di HTML</title> </head> <body> <h1 style="color: red;">Heading dengan warna Merah</h1> <p> Atribut color adalah atribut CSS yang berfungsi untuk memberikan warna pada teks. Pada contoh ini, teks pada heading akan berwarna merah, karena kita memberikan warna red untuk color. </p> <h2 style="background-color: yellow;">Heading dengan Latar Kuning</h2> <p> Atribut background-color adalah atribut untuk memberikan warna latar (background) pada elemen tertentu. Pada contoh ini, kita memberikan warna latar kuning untuk heading. </p> </body> </html>

Hasil

Nah, untuk gaya lainnya silahkan berkreasi sendiri

Apa berikutnya?

Kami telah belajar cara membuat judul dalam HTML. Hal yang perlu anda ingat adalah tag untuk membuat heading, mulai dari <h1> sampai dengan <h6>

Apa fungsi h2 dalam HTML?

Penggunaan h2 biasa digunakan untuk membuat subjudul/subjudul dan dapat muncul beberapa kali di halaman web. Tag h3 memiliki ukuran yang lebih kecil dari h2 yaitu 1. 17em atau 1. 17 kali ukuran font yang digunakan. Penggunaannya juga biasanya sebagai subtitle.

Apa itu h1 h2 h3 dalam HTML?

Elemen judul ( elemen HTML yang digunakan untuk membuat judul / judul artikel di laman HTML . Elemen heading

Apa perbedaan antara h1 dan h2?

Bila H1 adalah judul buku, maka H2 sering digunakan pada judul/bab sedangkan H3-H6 adalah sub-bab.

Apa fungsi h1 dalam HTML?

Tag H1 adalah bagian terpenting dari keseluruhan dokumen website, jadi fungsinya adalah untuk judul utama.

Postingan terbaru

LIHAT SEMUA