Belajar HTML #03 | Membuat Heading di HTML
Belajar Bareng Minarsih - Edisi Ngoding
29 Agustus 2022
Apa Itu Heading ?
Heading atau lebih tepatnya tag heading merupakan Tag khusus yang disediakan oleh HTML untuk membuat sebuah judul pada teks dalam sebuah halaman web.
Tag Heading dalam HTML terdiri dari 6 tingkatan berdasarkan tingkat penting dan ukurannya. Tag Heading tersebut adalah <h1>, <h2>, <h3>, <h4>, <h5> dan <h6>. tag H1 memiliki ukuran paling besar, sedangkan tag h6 memiliki ukuran paling kecil.
Penggunaan masing - masing tag heading juga berbeda,berikut penggunaan masing - masing tag heading yang sering digunakan halaman web.
Tag <h1> yang digunakan untuk penulisan judul utama.
Tag <h2> <h3> yang digunaakan sebagai sub judul.
Tag <h4> <h5> <h6> biasanya digunakan peogramer sendiri untuk memperindah halaman web.
Berikut contoh penggunaan Heading dalam HTML:
<!DOCTYPE html>
<html>
<head>
<title>Tag Heading HTML</title>
</head>
<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>
</body>
</html>
Berikut hasilnya jika dijalankan melalui browser:
dari contoh yang diatas dapat kamu liat perbedaan antara masing- masing tag heading. Penulisan heading juga boleh digunakan didalam jenis tag yang lainnya.
Mari kita coba membuat sebuah artikel yang dilengkapi dengan tag heading.
<!DOCTYPE html>
<html>
<head>
<title>Tag Heading HTML</title>
</head>
<body>
<h1>Judul Utama</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>Sub Judul</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
Berikut hasilnya jika dijalankan melalui browser:
Kesimpulan: Fungsi dari Tag Heading ini untuk merapikan struktur penulisan pada HTML,misalkan penulisan judul text lebih besar dari sub judul.
Kita sudah belajar tentang cara membuat heading di HTML. Hal yang perlu kamu ingat adalah tag-tag untuk membuat heading, yakni dimulai dari <h1> sampai <h6>.
Artikel Lainnya Dengan Kategori Terkait :
1. 5 HTML Tags For Accessibility
2. Belajar HTML #01 | Apa Itu HTML ? Pengertian HTML Lengkap Untuk Pemula
3. Belajar HTML #02 | Cara Sederhana Membuat Code HTML
4. Belajar HTML #03 | Membuat Heading di HTML
5. Belajar HTML #04 | Format Text di HTML
6. Belajar HTML #05 | Membuat Paragraf di HTML
7. Belajar HTML #06 | Membuat Tabel Pada HTML
8. Belajar HTML #07 | Membuat Link Pada HTML
9. Belajar HTML #08 | Cara Membuat List Di HTML
10. Belajar HTML #09 | Cara Membuat Box Shadow CSS dan HTML Praktis Tanpa ribet (efek bayangan CSS)
11. Belajar HTML #10 | Cara Menampilkan Gambar Pada Halaman Website Menggunakan HTML
12. Belajar HTML #11 | Cara Menampilkan Video Pada Halaman Website Menggunakan HTML
13. Belajar HTML #12 | Cara Membuat Form Pada HTML
14. Belajar HTML #13 | Belajar Membuat Layout Pada HTML
15. Belajar HTML #14 | Belajar Menghubungkan HTML dengan CSS
16. Belajar HTML #15 | Cara Menambahkan Audio ke Halaman Website Menggunakan HTML.
17. Belajar HTML #16 | Cara Menambahkan Garis Horizontal di HTML
18. Belajar HTML #17 | Cara Menambahkan Komentar di HTML
19. Belajar HTML #18 | Tutorial Cara Membuat Checkbox dan Radio Button di HTML
20. Buat Desain Web Responsif CSS
21. Cara Membuat Accordions Dengan HTML & CSS
22. Cara Membuat Favicon Dengan HTML
26. Input HTML Yang Perlu Diketahui
27. Memahami Pentingnya Semantic HTML dalam Struktur Website
28. Membuat Form HTML dengan Input Sugestion
29. Penggunaan Atribut Elemen Anchor dalam HTML
31. Tag HTML yang Jarang Diketahui
