Jumat, 08 September 2023

Belajar HTML Dasar : Heading Pada HTML

Heading merupakan element atau tag HTML yang berfungsi untuk menunjukkan bagian penting pada halaman web. Element tag heading ini memiliki 6 tingkatan yang berurutan yaitu <h1>,<h2>,<h3>,<h4>,<h5>,<h6> yang bisa digunakan untuk menambah keindahan struktur halaman web.
Perbedaan masing-masing heading yaitu ukuran besar dan kecil teksnya. Contohnya tag/element <h1> lebih besar dari tag/element <h2> dan seterusnya.

Penggunaan masing-masing heading juga berbeda, berikut penggunaan masing-masing tag/element heading yang sering digunakan pada pengolahan halaman web :
  • <h1> digunakan untuk penulisan judul utama dari dokumen.
  • <h2> digunaakan sebagai sub dari <h1>.
  • <h3> digunakan sebagai sub dari <h2>.
  • Penggunaan <h4>, <h5>, <h6> tergantung programmer sendiri untuk memperindah halaman web sesuai keperluan.

Berikut contoh penerapan masing-masing element/tag heading:

<!DOCTYPE html>
<head>
            <title></title>
</head>
<body>
            <h1>ini adalah heading 1</h1>
</body>

Contoh lainnya:

<!DOCTYPE html>
<html>
<head>
            <title></title>
</head>
<body>
            <h1>ini adalah heading 1</h1>
            <h2>ini adalah heading 2</h2>
            <h3>ini adalah heading 3</h3>
            <h4>ini adalah heading 4</h4>
            <h5>ini adalah heading 5</h5>
            <h6>ini adalah heading 6</h6>
</body>
</html>
Dan hasilnya saat di jalankan pada browser:


Dari contoh diatas, dapat anda lihat perbedaan antara masing-masing heading. penulisan heading ini boleh digunakan didalam jenis tag yang lain. berikut contoh penggunaan element heading di dalam tag lain :

<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<a href="https://pusing-ngoding.blogspot.com/"><h1>ini adalah heading 1</h1></a>
</body>



Contoh diatas yaitu penggunaan tag heading yang berada dalam tag <a>. Sedangkan atribut href digunakan untuk menghubungkan dengan dokumen/link yang lain.

Ketika diklik pada “ini adalah heading 1” maka halaman akan di alihkan ke halaman https://pusing-ngoding.blogspot.com/.

PENUTUP

Jadi kesimpulannya, heading berfungsi untuk menunjukkan bagian penting pada halaman web. Terdapat 6 tingkatan heading, yaitu <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>. Tingkatan dari heading menunjukkan ukuran besar dan kecil teks. <h1> adalah heading yang paling besar ukurannya, biasanya digunakan untuk penulisan judul utama, sedangkan <h6> adalah heading yang paling kecil ukurannya.

Oke pudingers! Materinya cukup disini aja. Kalau pudingers ada tambahan tentang materi ini atau mau bertanya, silakan tulis di kolom komentar. Insyaallah admin bakal menjawab pertanyaan pudingers. Terimakasih sudah membaca 🤗

Klik <Next> untuk melanjutkan.
Share:

0 komentar:

Posting Komentar