SERIES HTML5 - CHAPTER 3 : HEADING HTML

Dayat Miftahul Jannah
12:16:52 PM


Pada artikel ini, kita akan melanjutkan postingan SERIES HTML5, kali ini kita akan mengenal Heading HTML, dan implementasinya melalui contoh-contoh yang akan kita bahas dibawah. Tag heading HTML digunakan untuk menentukan judul halaman. Ada enam level heading yang didefinisikan oleh HTML. 6 elemen heading ini adalah h1, h2, h3, h4, h5, dan h6; dengan h1 sebagai level tertinggi dan h6 sebagai level terendah.

<h1> digunakan untuk judul utama. (Ukuran terbesar)

<h2> digunakan untuk sub pos / sub judul

jika ada bagian lebih lanjut di bawah sub pos maka elemen yang digunakan adalah elemen <h3>.

<h6> untuk heading kecil (yang terkecil).

Browser menampilkan konten heading dalam berbagai ukuran. Ukuran persis di mana setiap browser menunjukkan judul dapat sedikit berbeda. Pengguna juga dapat menyesuaikan ukuran teks di browser mereka.

Judul bisa digunakan untuk menjelaskan topik yang didahului dan ditentukan dengan tag <h1> hingga <h6>. Judul juga mendukung semua atribut global. Urutan penggunaan nya kurang lebih seperti ini :

  • <h1> mendefinisikan heading yang paling penting.
  • <h6> mendefinisikan heading yang paling tidak penting.

 

Mendefinisikan Heading :
 <h1>Heading 1</h1>  
 <h2>Heading 2</h2>  
 <h3>Heading 3</h3>  
 <h4>Heading 4</h4>  
 <h5>Heading 5</h5>  
 <h6>Heading 6</h6>
 
Syntax :
1:  // // 'h' di dalam tag harus dalam huruf kecil saja.  
2:  <h1>Heading1</h1>  
3:  <h2>Heading2</h2>  
4:  .  
5:  .  
6:  .  
7:  <h6>Heading6</h6>
 

Pentingnya Heading (Judul):

  • Browser (Mesin Pencari) menggunakan judul untuk mengindeks struktur dan mengatur konten halaman web.
  • Heading (Judul) digunakan untuk menyoroti topik penting.
  • Mereka memberikan informasi berharga dan memberi tahu kita tentang struktur dokumen.
Browser (Mesin pencari) dan user agen lainnya biasanya mengindeks konten halaman berdasarkan elemen heading, misalnya untuk membuat daftar isi, jadi menggunakan struktur judul yang benar adalah penting. Secara umum, sebuah artikel harus memiliki satu elemen h1 untuk judul utama diikuti oleh sub judul h2 turun satu lapisan jika diperlukan. Jika ada elemen h1 pada level yang lebih tinggi, mereka tidak boleh digunakan untuk menggambarkan konten level yang lebih rendah.

Contoh 1: Contoh ini mengilustrasikan tag heading HTML.

1:  <!DOCTYPE html>  
2:  <html>  
3:  <head>  
4:    <title>Heading Tags</title>  
5:  </head>  
6:  <body>  
7:    <h1>Mata Panda Crew</h1>  
8:    <h2>Mata Panda Crew</h2>  
9:    <h3>Mata Panda Crew</h3>  
10:    <h4>Mata Panda Crew</h4>  
11:    <h5>Mata Panda Crew</h5>  
12:    <h6>Mata Panda Crew</h6>  
13:  </body>  
14:  </html>
 
 
Output :
 


Contoh 2: Contoh ini menjelaskan tag heading HTML yang berbeda.

1:  <!DOCTYPE html>  
2:  <html>  
3:  <body>  
4:    <h1>Selamat datang di Mata Panda Crew</h1>  
5:    <h2>Portal ilmu komputer untuk Programmer</h2>  
6:    <h5>Tutorial</h5>  
7:    <h6>Coding</h6>  
8:  </body>  
9:  </html>

Output :
 
 
 
Mengubah ukuran Heading (Judul) HTML: Ukuran default judul HTML dapat diubah, menggunakan atribut style.

Contoh: Contoh ini menjelaskan tag heading HTML dengan menentukan ukuran font.

1:  <!DOCTYPE html>  
2:  <html>  
3:  <body>  
4:    <h1>H1 Heading</h1>  
5:    <!-- Dengan bantuan atribut Style kalian bisa menyesuaikan ukuran heading, Seperti yang dilakukan di bawah ini-->  
6:    <h1 style="font-size: 50px">H1 with new size.</h1>  
7:    <!-- Di sini font-size adalah properti yang dengannya kita dapat memodifikasi heading. Di sini kita menyimpannya 50px yaitu 50 piksel -->  
8:  </body>  
9:  </html>

Output :
 
 
Horizontal Rule (Aturan horizontal): Tag <hr> yang merupakan singkatan dari horizontal rule digunakan untuk menentukan jeda tematik di halaman HTML. Tag <hr> adalah tag kosong, dan tidak memerlukan tag penutup. Ini pada dasarnya digunakan untuk memisahkan konten. Silakan bacatentang artikel Tag <hr> HTML untuk informasi lebih detail.
 
Baca Juga : SERIES HTML5 - CHAPTER 1 : MEMULAI DENGAN HTML


Contoh: Contoh ini menjelaskan Judul HTML dengan horizontal rule (aturan horizontal).

1:   <!DOCTYPE html>  
2:  <html>  
3:  <body>  
4:    <h1>Heading 1</h1>  
5:  <p>Saya Suka HTML.</p>  
6:    <!-- hr Tag digunakan disini-->  
7:    <hr />  
8:    <h2>Heading 2</h2>  
9:  <p>Saya suka CSS.</p>  
10:    <!-- hr Tag digunakan disini-->  
11:    <hr />  
12:    <h2>Heading 3</h2>  
13:  <p>Saya Suka Javascript</p>  
14:  </body>  
15:  </html>
 
Output :



Browser yang mendukung Ttag h1 sampai h6:
 
  • Google Chrome
  • Microsoft Edge
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

Oke mungkin sampai disini dulu untuk pembahasan mengenai HEADING HTML, kita akan bahas mengenai HTML5 lainnya di postingan slanjutnya.
 
See you next time :).