Bagaimana cara menggunakan h1 html untuk apa?

Question

Heading merupakan bagian terpenting dari sebuah halaman web karena menjelaskan topik apa yang akan atau sedang dibahas dalam konten halaman web itu sendiri.

Table of Contents Show

Definisi judul
Cara membuat judul di html
Susunan hierarki judul html
Penggunaan judul html
Atribut tajuk
Untuk apa h1 pada HTML?
Apa itu h1 dalam pengkodean?
Apa itu H dalam HTML?
Apa perbedaan antara h1 dan h6?

Seperti yang kita tahu

Isi website tidak hanya terdiri dari artikel berupa teks, seolah-olah hanya berisi satu paragraf

Namun, itu juga membutuhkan heading yang menjadi garis besar topik yang ingin disampaikan oleh konten di halaman website itu sendiri

Definisi judul

Tahukah kamu apa itu heading?

Selain itu, heading atau judul juga menjadi landasan pembentukan sebuah konten dalam memberikan informasi yang nantinya akan dibahas dalam konten tersebut.

Heading biasanya terdapat dalam setiap tulisan artikel atau surat kabar, tidak hanya itu dalam penulisan surat menyurat, heading juga sering digunakan terutama dalam sebuah halaman web.

Cara membuat judul di html

Heading atau judul dalam html dapat dibuat dengan menggunakan tag <h1> hingga <h6>

Dimana tag <h1> merupakan elemen heading terbesar dibandingkan dengan tag heading html lainnya seperti <h2>, <h3>, <h4>,

<!DOCTYPE html>
<html>
  <head>
    <title>Artikel</title>
  </head>
  <body>
    <h1>Belajar membuat heading pada html</h1>
    <p>Heading dapat kita dibuat dengan tag
    h1, h2, h3, h4, h5 dan h6. Dari
    masing-masing tag tersebut mempunyai
    kegunaan dan fungsi tersendiri misalnya
    yang h1 sebagai judul utama, h2 sebagai
    sub judul dari h1 dan seterusnya</p>
    
    <h2>Ini adalah sub judul</h2>
    <p>Sub judul atau sub heading di html
    dibuat dengan adanya tag h2 sampai h6.
    Dan itu artinya h1 memanglah hanya
    sebagai judul utama dari sebuah artikel.</p>
  </body>
</html>

0 dan <h6>

Hal ini tentunya berkaitan dengan level yang dimiliki oleh setiap tag heading di html

Misalnya saja

<!DOCTYPE html>
<html>
  <head>
    <title>Belajar heading html</title>
  </head>
  <body>
    <h1>Ini tag h1</h1>
    <h2>Ini tag h2</h2>
    <h3>Ini tag h3</h3>
    <h4>Ini tag h4</h4>
    <h5>Ini tag h5</h5>
    <h6>Ini tag h6</h6>
  </body>
</html>

_

Hasilnya jika dilihat dengan browser

hasil penggunaan tag h1 sampai h6

Contoh lain ketika kita menggunakan judul dalam html adalah membuat artikel

Berikut adalah contoh sederhana artikel yang bisa kita buat dengan heading html

Buat file html dan tulis kode di bawah ini

<!DOCTYPE html>
<html>
  <head>
    <title>Artikel</title>
  </head>
  <body>
    <h1>Belajar membuat heading pada html</h1>
    <p>Heading dapat kita dibuat dengan tag
    h1, h2, h3, h4, h5 dan h6. Dari
    masing-masing tag tersebut mempunyai
    kegunaan dan fungsi tersendiri misalnya
    yang h1 sebagai judul utama, h2 sebagai
    sub judul dari h1 dan seterusnya</p>
    
    <h2>Ini adalah sub judul</h2>
    <p>Sub judul atau sub heading di html
    dibuat dengan adanya tag h2 sampai h6.
    Dan itu artinya h1 memanglah hanya
    sebagai judul utama dari sebuah artikel.</p>
  </body>
</html>

hasilnya ketika ditampilkan oleh browser

hasil artikel sederhana dengan heading html

Susunan hierarki judul html

Pada hirarki heading html, seperti yang telah dijelaskan sebelumnya bahwa heading/judul memiliki tingkatan

Yang dimaksud dengan level adalah level pada heading html, mulai dari tag yang menghasilkan teks terbesar yaitu <h1> hingga yang terkecil <h6>

Untuk lebih jelasnya lihat gambar dibawah ini

susunan hirarki judul dalam html

Dengan memahami urutan hirarki heading html, nantinya kita akan mengetahui kegunaan heading dalam html

Penggunaan judul html

Dalam membuat sebuah artikel, penggunaan heading sangatlah penting, terutama dalam sebuah halaman web

Menggunakan heading dalam html, disarankan untuk tidak sembarangan dalam penggunaannya

Mengapa?

Hal ini dikarenakan jika tidak tepat dalam penggunaannya maka akan berkaitan dengan masalah SEO (Search Engine Optimization) dalam suatu halaman web.

SEO merupakan hal yang paling penting dalam sebuah halaman web, karena berhubungan dengan search engine seperti google, bing dan lain-lain

Sebuah halaman web jika terjadi kesalahan dalam penggunaan heading, maka halaman web tersebut akan kesulitan tampil di mesin pencari seperti google

Berikut ini adalah contoh penggunaan heading yang salah atau arbitrer


<!DOCTYPE html>
<html>
  <head>
    <title>Artikel</title>
  </head>
  <body>
    <h4>Ini judul</h4>
    <p>Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. A,
    provident?</p>
    
    <h3>Ini subjudul</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor consectetur magni nostrum, delectus sapiente provident? Pariatur sit, error nihil fugiat!</p>
    
    <h1>Ini subjudul</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, itaque magni animi eos, in laudantium.</p>
  </body>
</html>

Dari kesalahan penggunaan heading dan sub heading di atas, jika kita perbaiki maka akan menjadi seperti berikut


<!DOCTYPE html>
<html>
  <head>
    <title>Artikel</title>
  </head>
  <body>
    <h1>Ini judul utama</h1>
    <p>Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. A,
    provident?</p>
    
    <h2>Ini subjudul</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor consectetur magni nostrum, delectus sapiente provident? Pariatur sit, error nihil fugiat!</p>
    
    <h3>Ini subjudul</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, itaque magni animi eos, in laudantium.</p>
  </body>
</html>

_

Dalam membuat heading dengan html biasanya tag <h1> biasanya digunakan hanya sebagai judul utama sebuah artikel. Sedangkan tag <h2>, <h3>, dan <h4> digunakan sebagai subtitle

Lalu bagaimana dengan h5 dan h6?

Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Artikel</title>
  </head>
  <body>
    <h1>Belajar membuat heading pada html</h1>
    <p>Heading dapat kita dibuat dengan tag
    h1, h2, h3, h4, h5 dan h6. Dari
    masing-masing tag tersebut mempunyai
    kegunaan dan fungsi tersendiri misalnya
    yang h1 sebagai judul utama, h2 sebagai
    sub judul dari h1 dan seterusnya</p>
    
    <h2>Ini adalah sub judul</h2>
    <p>Sub judul atau sub heading di html
    dibuat dengan adanya tag h2 sampai h6.
    Dan itu artinya h1 memanglah hanya
    sebagai judul utama dari sebuah artikel.</p>
  </body>
</html>

0 dan <h6> biasanya jarang digunakan dalam membuat artikel di halaman web

Untuk mengetahui lebih jelas bagaimana menggunakan heading untuk membuat artikel, lihat gambar berikut ini

contoh cara menggunakan heading html yang baik

Atribut tajuk

Sama seperti atribut pada tag


<!DOCTYPE html>
<html>
  <head>
    <title>Artikel</title>
  </head>
  <body>
    <h4>Ini judul</h4>
    <p>Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. A,
    provident?</p>
    
    <h3>Ini subjudul</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor consectetur magni nostrum, delectus sapiente provident? Pariatur sit, error nihil fugiat!</p>
    
    <h1>Ini subjudul</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, itaque magni animi eos, in laudantium.</p>
  </body>
</html>

_0 di html, heading juga memiliki atribut

Atribut yang dimiliki oleh tag heading adalah atribut global. diantara mereka


<!DOCTYPE html>
<html>
  <head>
    <title>Artikel</title>
  </head>
  <body>
    <h4>Ini judul</h4>
    <p>Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. A,
    provident?</p>
    
    <h3>Ini subjudul</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor consectetur magni nostrum, delectus sapiente provident? Pariatur sit, error nihil fugiat!</p>
    
    <h1>Ini subjudul</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, itaque magni animi eos, in laudantium.</p>
  </body>
</html>

1. digunakan untuk digunakan saat mengatur gaya elemen di css


<!DOCTYPE html>
<html>
  <head>
    <title>Artikel</title>
  </head>
  <body>
    <h4>Ini judul</h4>
    <p>Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. A,
    provident?</p>
    
    <h3>Ini subjudul</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor consectetur magni nostrum, delectus sapiente provident? Pariatur sit, error nihil fugiat!</p>
    
    <h1>Ini subjudul</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, itaque magni animi eos, in laudantium.</p>
  </body>
</html>

2. adalah atribut dengan nilai unik. Penggunaannya biasanya untuk link, css dan javascript


<!DOCTYPE html>
<html>
  <head>
    <title>Artikel</title>
  </head>
  <body>
    <h4>Ini judul</h4>
    <p>Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. A,
    provident?</p>
    
    <h3>Ini subjudul</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor consectetur magni nostrum, delectus sapiente provident? Pariatur sit, error nihil fugiat!</p>
    
    <h1>Ini subjudul</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, itaque magni animi eos, in laudantium.</p>
  </body>
</html>

_3. digunakan untuk memasukkan kode css langsung pada tag html


<!DOCTYPE html>
<html>
  <head>
    <title>Artikel</title>
  </head>
  <body>
    <h4>Ini judul</h4>
    <p>Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. A,
    provident?</p>
    
    <h3>Ini subjudul</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor consectetur magni nostrum, delectus sapiente provident? Pariatur sit, error nihil fugiat!</p>
    
    <h1>Ini subjudul</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, itaque magni animi eos, in laudantium.</p>
  </body>
</html>

_4. memberikan informasi tambahan untuk tag html yang dibuat

dan masih banyak lagi atribut global yang bisa dimiliki oleh sebuah tag html

Berbicara tentang atribut? . Pelajari HTML3. mengenali tag, atribut dan elemen dalam html

Kesimpulan

Dengan mengetahui cara membuat heading di html akan menambah pengetahuan kita dalam mengimplementasikan pembuatan title atau heading dengan html

Tidak hanya itu, kita juga telah belajar bagaimana menggunakan heading untuk membuat halaman web yang baik agar tidak terjadi kesalahan dalam pengembangan website nantinya.

Untuk apa h1 pada HTML?

Tag H1 seperti topik utama di halaman website. H1 adalah Tag yang memberi tahu Google tentang konten halaman, apa yang ada di dalamnya . Ini adalah faktor penting yang membantu dalam hal SEO. Tag H1 hanya dapat digunakan satu kali pada satu halaman.

Apa itu h1 dalam pengkodean?

< h1 > digunakan untuk menulis judul utama dari dokumen.

Apa itu H dalam HTML?

Heading atau lebih tepatnya TAG Heading adalah TAG khusus yang disediakan oleh HTML untuk membuat judul pada teks di halaman web. Judul TAG secara default ditampilkan oleh browser dengan lebih besar dan lebih tebal (tebal) dari teks biasa.

Apa perbedaan antara h1 dan h6?

Tag H1 adalah bagian terpenting dari keseluruhan dokumen website, jadi fungsinya untuk judul utama. Sedangkan yang terkecil, H6 , berfungsi untuk memberi label pada bagian artikel yang nilainya kurang lebih penting dari tag heading dengan nilai di atasnya.

kode html