Belajar Heading dalam HTML: Membuat Struktur Website dengan Mudah

Heading dalam HTML

Halo teman-teman!

Kita sudah membahas apa itu HTML di postingan sebelumnya. Kali ini, kita lanjut belajar dengan mempraktikkan salah satu elemen HTML paling penting, yaitu heading. Yuk, kita mulai!

Apa Itu Heading?

Dalam HTML, heading digunakan untuk memberi judul atau hierarki pada bagian-bagian website. Contohnya seperti di buku, heading itu seperti judul utama, subjudul, hingga bagian-bagian kecil dalam bab.

Heading dalam HTML dibuat menggunakan tag seperti <h1> hingga <h6>.

  • <h1>: Heading paling besar dan penting, biasanya digunakan untuk judul utama.
  • <h6>: Heading paling kecil, untuk detail atau subbagian.

Membuat Heading dalam HTML

Begini contoh penggunaan tag heading:

<h1>Hello World</h1>
  • Tag pembuka: <h1>
  • Tag penutup: </h1> (ingat, ada tanda garis miring / untuk menutup tag).
  • Konten: Teks yang diapit oleh tag, seperti "Hello World" di atas.

Perbedaan Tag dan Elemen

  • Tag: Bagian yang ada di dalam tanda < >. Contoh: <h1> atau </h1>.
  • Elemen: Gabungan tag pembuka, konten, dan tag penutup.

Contohnya:

<h1>Hello World</h1>

Seluruh bagian itu disebut elemen HTML.

Hierarki Heading

Heading dalam HTML mengikuti hierarki, seperti struktur tabel isi di buku:

  • <h1> untuk judul utama
  • <h2> untuk subjudul
  • <h3> hingga <h6> untuk bagian yang lebih detail

Contohnya:

<h1>Buku</h1>  
<h2>Bab 1</h2>  
<h3>Bagian 1.1</h3>  
<h4>Diagram</h4>  

Hasilnya di browser, heading dengan tag <h1> akan terlihat paling besar, sedangkan <h4> lebih kecil.

Tips Penting dalam Membuat Heading

  1. Gunakan Satu <h1> Saja
    Heading <h1> adalah judul utama. Tidak disarankan menggunakan lebih dari satu <h1> di halaman yang sama.

  2. Ikuti Urutan
    Pastikan urutan heading teratur. Jangan lompat-lompat, misalnya langsung dari <h1> ke <h3> tanpa <h2>.

  3. Pahami Tujuan Heading
    Heading tidak hanya untuk ukuran teks, tapi juga untuk memberi struktur yang jelas pada website.

Tantangan: Buat Heading Sendiri

Coba buat file HTML seperti ini:

<!DOCTYPE html>
<html>
<head>
    <title>Latihan Heading</title>
</head>
<body>
    <h1>Judul Utama</h1>
    <h2>Subjudul 1</h2>
    <h3>Bagian 1.1</h3>
    <h2>Subjudul 2</h2>
    <h3>Bagian 2.1</h3>
    <h4>Detail Tambahan</h4>
</body>
</html>

Simpan file dengan nama index.html, lalu buka di browser. Perhatikan hierarki dan ukuran teks.


Kesimpulan
Heading adalah elemen penting dalam HTML untuk membuat struktur website. Dengan memahami cara kerjanya, kita bisa membuat website yang rapi dan terstruktur.

Di pelajaran berikutnya, kita akan mempelajari elemen penting lainnya, yaitu paragraf. Sampai jumpa! 

Komentar

Postingan Populer

Gambar

Superingan is a Blogger template designed with simplicity and functionality in mind, offering a clean and user-friendly platform for professional websites. This theme is perfect for various website types, including personal blogs, online magazines, news websites, and portfolios. Features: Responsive Design: Your website will look its best across all devices, from desktops and laptops to tablets and smartphones. Customizable Colors: Easily change the template's colors to match your branding or preferences. Custom Headers: Upload your own header image to add a personal touch to your website. Custom Menus: Create and manage your website's navigation menus with ease. Widget Areas: Add widgets to display additional content and features on your website's sidebar. Clean HTML & CSS Code: The template is built with clean and well-structured code, making it easy to learn and customize further. Superingan is an ideal choice for those seeking a professional website with a sim...

Gambar

Halo teman-teman! Pada kesempatan kali ini, kita akan belajar bagaimana cara hosting website yang sudah kita buat sebelumnya secara gratis menggunakan GitHub. Dengan melakukan hosting , website kamu bisa diakses oleh siapa saja dari berbagai belahan dunia. Bahkan, temanmu yang tinggal di negara lain juga bisa melihat website milikmu tanpa hambatan. Penasaran bagaimana caranya? Yuk, kita bahas satu per satu! Apa Itu Web Hosting? Sebelum kita masuk ke pembahasan teknis, penting untuk memahami dulu apa itu web hosting . Secara sederhana, web hosting adalah proses menyimpan berkas-berkas website (seperti file HTML, CSS, JavaScript, gambar, dan berkas pendukung lainnya) di dalam sebuah web server yang terhubung dengan internet. Dengan cara ini, orang lain bisa membuka website kita kapan pun dan di mana pun selama mereka terhubung ke internet. Kalau saat ini kamu hanya menyimpan file HTML di komputermu sendiri, website tersebut hanya bisa diakses secara lokal, atau biasa disebut local...

Gambar

Rumah kayu merupakan pilihan yang populer bagi banyak orang. Rumah kayu memiliki banyak keunggulan, seperti nyaman, sehat, dan estetik. Namun, rumah kayu juga memiliki beberapa kekurangan, seperti mudah lapuk dan terbakar. Untuk mengatasi kekurangan tersebut, desain rumah kayu minimalis modern hadir sebagai solusi yang tepat. Desain rumah kayu minimalis modern menggabungkan gaya minimalis yang mengutamakan kesederhanaan dan fungsionalitas dengan gaya modern yang mengutamakan estetika dan teknologi. Keunggulan Desain Rumah Kayu Minimalis Modern Desain rumah kayu minimalis modern memiliki beberapa keunggulan, antara lain: Nyaman dan sejuk Kayu adalah bahan yang memiliki sifat isolasi yang baik, sehingga dapat menjaga suhu ruangan tetap sejuk. Hal ini sangat cocok untuk iklim tropis seperti di Indonesia. Selain itu, kayu juga dapat menyerap suara, sehingga dapat memberikan suasana yang tenang dan nyaman. Ramah lingkungan Kayu merupakan bahan yang dapat diperbarui, sehin...