Sign in Subscribe
HTML

Cara Mudah Atur Teks di Web dengan Heading dan Paragraf

Cara Mudah Atur Teks di Web dengan Heading dan Paragraf
Photo by Morgan Housel / Unsplash

Pernah nggak sih, kamu buka sebuah website dan langsung nyaman baca isinya karena teksnya tertata rapi? Nah, rahasianya ada di penggunaan heading dan paragraf yang tepat. Dengan memahami cara pakainya, kamu bisa bikin konten web yang nggak cuma enak dibaca, tapi juga keren dan informatif.

Apa Itu Heading?

Heading itu semacam judul atau subjudul yang dipakai buat ngasih struktur dan hierarki pada konten di halaman web. Dalam HTML, ada enam tingkat heading, dari <h1> sampai <h6>, dengan <h1> sebagai yang paling penting dan terbesar, dan <h6> sebagai yang terkecil. Pakai heading yang pas bisa bantu mesin pencari ngerti struktur halaman kamu dan ningkatin SEO.

Cara Pakai Heading

Berikut contoh penggunaan heading dalam HTML: 

<!DOCTYPE html>
<html lang="id">
<head>
    <title>Contoh Penggunaan Heading</title>
</head>
<body>
    <h1>Judul Utama</h1>
    <h2>Subjudul Tingkat 1</h2>
    <h3>Subjudul Tingkat 2</h3>
    <h4>Subjudul Tingkat 3</h4>
    <h5>Subjudul Tingkat 4</h6>
    <h6>Subjudul Tingkat 5</h6>
</body>
</html>

Di contoh di atas, <h1> dipakai buat judul utama, sementara <h2> sampai <h6> buat subjudul dengan tingkat kepentingan yang menurun. Penting buat pakai heading secara berurutan dan nggak lompat-lompat tingkat, biar struktur konten kamu tetap logis.

Apa Itu Paragraf?

Paragraf dipakai buat nampilin teks atau artikel dalam bentuk blok. Dalam HTML, paragraf dibuat dengan tag <p>. Setiap kali kamu mau mulai paragraf baru, cukup pakai tag <p> di awal dan </p> di akhir teks yang mau ditampilkan sebagai paragraf.

Cara Pakai Paragraf

Berikut contoh penggunaan paragraf dalam HTML: 

<!DOCTYPE html>
<html lang="id">
<head>
    <title>Contoh Penggunaan Paragraf</title>
</head>
<body>
    <p>Ini adalah paragraf pertama. Paragraf digunakan untuk menampilkan teks dalam blok yang terpisah.</p>
    <p>Ini adalah paragraf kedua. Setiap paragraf akan dimulai pada baris baru secara otomatis.</p>
</body>
</html>

Di contoh di atas, setiap teks yang dibungkus dengan tag <p> bakal ditampilkan sebagai paragraf terpisah. Browser otomatis nambahin spasi sebelum dan sesudah paragraf buat misahin dari elemen lain.

Tips Mengatur Teks dengan Heading dan Paragraf

  1. Pakai Satu <h1> per Halaman: Pastikan cuma ada satu <h1> di setiap halaman, yang dipakai buat judul utama. Ini bantu mesin pencari ngerti topik utama halaman kamu.
  2. Jaga Urutan Heading: Pakai heading secara berurutan tanpa lompat-lompat tingkat. Misalnya, setelah <h2>, pakai <h3>, bukan langsung ke <h4>.
  3. Paragraf buat Blok Teks: Pakai tag <p> buat setiap blok teks yang terpisah. Ini bikin konten lebih mudah dibaca dan terstruktur dengan baik.
  4. Hindari Pakai Heading buat Penekanan Teks: Jangan pakai heading cuma buat bikin teks lebih besar atau tebal. Gunakan heading sesuai dengan hierarki informasi.
  5. Kombinasikan dengan CSS buat Tampilan Menarik: Buat nyesuaiin tampilan heading dan paragraf, pakai CSS. Ini memungkinkan kamu ngatur font, warna, dan spasi sesuai desain yang diinginkan.

Dengan ngerti dan menerapkan penggunaan heading dan paragraf dengan benar, kamu bisa bikin halaman web yang terstruktur, mudah dibaca, dan ramah SEO. Struktur yang baik nggak cuma bantu mesin pencari ngerti konten kamu, tapi juga ningkatin pengalaman pengguna saat mampir ke situs kamu.

Read next