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

Show


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

    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

    Cara menggunakan fungsi h2> di html

    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

    Cara menggunakan fungsi h2> di html

    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

    Cara menggunakan fungsi h2> di html

    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

    Cara menggunakan fungsi h2> di html

    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

    Cara menggunakan fungsi h2> di html

    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

    Cara menggunakan fungsi h2> di html

    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.