Belajar HTML : Heading Pada HTML

  • Whatsapp

Assalammualaikum Wr. Wb – Pada kesempatan kali ini saya akan melanjutkan pembahasa mengenai HTML. Pada kesempatan kali ini saya akan menjelaskan mengenai Heading pada HTML. 

Heading adalah sebuah element atau juga sebuah taq pada html yang memiliki fungsi untuk menunjukkan bagian penting pada sebuah halaman website. Taq heading biasanya digunakan untuk menuliskan sebuah subjudul artikel, judul dan lain sebagainya.

Heading sendiri memiliki 6 tingkatan yang berurutan yang masing-masing urutan memiliki ukuran yang berbeda-beda. Dimulai dari yang paling besar hingga ukuran yang terkecilnya.

6 tingkatan taq heading yaitu <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>. Untuk penggunaan setiap heading tersebut sangatlah berbeda. Disini saya akan memberikan contoh yang heading yang sering digunakan pada sebuah website.

<h1> Heading yang digunakan untuk judul utama artikel blog </h1>

<h2> Heading yang digunakan untuk membuat subjudul dari h1 </h2>

<h3>  Heading yang digunakan untuk membuat subjudul dari h2 </h3>

Tiga subheading tersebutlah yang sering digunakan pada website-website. Lalu sisanya kenapa tidak digunakan? Itu kembali lagi kepada sang web programernya, mau menggunakannya atau tidak.

Tapi tiga heading diatas adalah taq heading yang sering digunakan.

Berikut ini contoh penulisan dari masing-masing heading dan hasilnya:

<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<p>IMAM LARH</p>

</body>
</html>

Itu adalah contoh heading h1-h6. Heading sangat penting sekali pada sebuah website. Heading pada sebuah website dapat untuk melakukan pengindex-an artikel lebih cepat karena dapat menampilkan struktur dokumen atau artikel.

Di dalam taq heading kita juga bisa menambahkan sebuah atribut, untuk materi atribut sudah saya jelasin di artikel sebelumnya ya.

Berikut ini adalah contoh lain taq heading ditambah dengan atribut:

<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:60px;">Heading 1</h1>
<h2 style="font-size:40px; color: salmon;">Heading 2</h2>


<p>IMAM LARH</p>

</body>
</html>
Perhatikan kode diatas, kita bisa melihat ada sebuah atribut style yang berisikan ukuran font 60px pada heading 1 dan font-size 40px pada heading ke 2 dan warna text menjadi warna salmon. Berikut ini hasilnya:

Nah, bagaimana perbedaanya dengan heading default dari html dengan heading yang kita tambahkan atribut. Pasti jelas perbedaanya dengan menggunakan atribut kita bisa megedit sesuai keinginan kita sendiri.

Baiklah untuk artikel kali ini cukup sampai disini saja, Jika ada yang ingin ditanyakan atau masih bingung silahakan komentar dibawah ya!

Untuk artikel berikutnya kita akan membahas “Belajar HTML : Membuat Paragraf Pada HTML“.

Terima kasih~~~

Wassalammualaikum wr.wb

Related posts

Leave a Reply

Your email address will not be published.