Halo teman-teman semuanya, di seri ketiga ini kita akan membahas bagaimana cara menampilkan dan mengatur teks di halaman HTML menggunakan heading, paragraf, dan line break.
Teks adalah bagian paling dasar dari sebuah website, dan HTML menyediakan cara yang sangat sederhana untuk menampilkannya dengan struktur yang rapi dan mudah dipahami.
1. Heading: Judul dan Subjudul Halaman
HTML menyediakan 6 level heading, dari <h1> sampai <h6>. Heading digunakan untuk menandai judul dan subjudul dalam halaman.
Contoh:
<h1>Judul Utama</h1>
<h2>Sub Judul</h2>
<h3>Judul Bagian</h3>
<h4>Sub Bagian</h4>
<h5>Detail Tambahan</h5>
<h6>Keterangan Tambahan</h6>
Semakin besar angka pada tag heading, semakin kecil ukuran teksnya. Biasanya:
<h1> hanya digunakan satu kali dalam satu halaman sebagai judul utama<h2> hingga <h6> digunakan untuk membuat struktur dan hierarki konten
Browser secara otomatis memberi tampilan tebal dan ukuran yang berbeda untuk masing-masing heading.
2. Paragraf: Menulis Teks Biasa
Untuk menampilkan teks biasa, kita gunakan elemen <p> (paragraf). Setiap tag <p> akan membuat blok teks baru.
Contoh:
<p>Ini adalah paragraf pertama dalam HTML.</p>
<p>Ini paragraf kedua yang akan muncul di baris terpisah.</p>
Browser akan otomatis memberi jarak antar paragraf, jadi kita tidak perlu menambahkan <br> untuk setiap baris baru.
3. Line Break: Ganti Baris Secara Manual
Kalau kita ingin membuat baris baru di dalam paragraf tanpa membuat paragraf baru, kita bisa menggunakan tag <br>.
Contoh:
<p>
Baris pertama.<br>
Baris kedua setelah ganti baris.<br>
Baris ketiga.
</p>
Tag <br> adalah void element, jadi tidak perlu tag penutup.
4. Contoh Lengkap
Berikut contoh kombinasi heading, paragraf, dan line break dalam satu dokumen:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Contoh Heading dan Paragraf</title>
</head>
<body>
<h1>Belajar HTML</h1>
<h2>Pengenalan Dasar</h2>
<p>HTML adalah bahasa markup yang digunakan untuk membuat halaman web.</p>
<p>
Kita bisa membuat baris baru menggunakan tag <br>.<br>
Seperti ini contohnya.<br>
Dan ini baris ketiga.
</p>
</body>
</html>
Kesimpulan
Di artikel ini, kita sudah belajar cara membuat judul dengan heading (<h1> sampai <h6>), menulis paragraf dengan <p>, dan mengganti baris menggunakan <br>.
Di artikel berikutnya, kita akan membahas tentang format teks seperti bold, italic, dan lainnya, agar tampilan konten kita lebih menarik.
Terima Kasih