Beranda HTML WEBSITE

Mengenal Tag Dasar HTML untuk Menulis Teks: Heading, Paragraf, dan Penekanan

Updated: • 0 • min read
Table of Contents

Pernahkah kamu membuka sebuah halaman web dan langsung merasa nyaman membaca isinya? Teks terlihat rapi, judulnya jelas, dan bagian penting langsung menonjol. Semua itu bukan kebetulan melainkan hasil penggunaan tag HTML yang tepat.

Dalam dunia pemrograman web, memahami tag dasar seperti heading, paragraf, dan penekanan adalah langkah pertama untuk menulis konten yang mudah dibaca sekaligus enak dipandang. Kali ini saya akan berbagi sedikit tentang fungsi masing-masing tag dan bagaimana menggunakannya dengan benar.

Judul dan Paragraf

Setiap tulisan pasti punya judul dan isi, kan? Nah, di HTML juga begitu.

Heading (<h1> sampai <h6>)

Heading itu dipakai buat judul dan subjudul.
  • <h1> → judul utama, yang paling besar dan penting.
  • <h2> → subjudul dari <h1>.
  • <h3> → subjudul lagi, dan seterusnya sampai <h6>.
Browser otomatis bikin ukuran fontnya beda, tapi yang penting sebenarnya bukan besar-kecilnya huruf, melainkan tingkat kepentingannya. Mesin pencari juga ngerti struktur tulisan dari heading ini.

Contoh kode:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tag Dasar HTML</title>
</head>
<body>
    <h1>Text ini dibuat dengan h1</h1>
    <h2>Text ini dibuat dengan h2</h2>
    <h3>Text ini dibuat dengan h3</h3>
    <h4>Text ini dibuat dengan h4</h4>
    <h5>Text ini dibuat dengan h5</h5>
    <h6>Text ini dibuat dengan h6</h6>
</body>
</html>
Hasil:

Kalau kamu jalankan codingan diatas tadi di browser maka akan terlihat jelas perbedaan dari h1 sampai dengan h6.

Paragraf (<p>)

Kalau heading itu judul, maka paragraf dipakai buat isi tulisan. Setiap kali kamu pakai <p>, browser otomatis ngasih jarak ke atas dan bawah, jadi teksnya rapi.

Contoh kode:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tag Dasar HTML</title>
</head>
<body>
    <p>Ini adalah Paragraf pertama saya.</p>
    <p>Dan ini adalah Paragraf kedua.</p>
</body>
</html>
Hasil:

Pindah Baris

Kadang kamu nggak mau bikin paragraf baru, tapi cuma mau pindah baris. Misalnya saat nulis alamat. Nah, tinggal pakai <br>.

Contoh kode:
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Contoh Tag br</title>
</head>
<body>
  <h1>Tag &lt;br&gt; di HTML</h1>

  <p>
    Ini adalah baris pertama.<br>
    Lalu ini baris kedua setelah menggunakan &lt;br&gt;.<br>
    Dan ini baris ketiga.
  </p>

  <p>
    Perhatikan bedanya dengan paragraf.<br>
    Kalau pakai &lt;br&gt;, teks masih dalam paragraf yang sama.<br>
    Tapi kalau pakai tag &lt;p&gt;, itu membuat paragraf baru.
  </p>

</body>
</html>
Hasil:

Merias Teks

Supaya tulisan nggak monoton, kamu bisa bikin kata tertentu jadi tebal, miring, atau bahkan lebih ditekankan.
 
Gaya Fisik:
  • <b> → teks tebal
  • <i> → teks miring
  • <u> → teks bergaris bawah (tapi jarang dipakai karena mirip link)
Gaya Semantik
Nah, ini lebih keren. Selain bikin teks beda gaya, dia juga kasih arti ke kata itu.
  • <strong> → teks dianggap penting (biasanya tebal).
  • <em> → teks ditekankan seperti saat bicara (biasanya miring).
Contoh kode:
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Gaya Teks di HTML</title>
</head>
<body>
  <h1>Gaya Teks: Fisik dan Semantik</h1>

  <h2>1. Gaya Fisik</h2>
  <p>
    <b>Teks ini tebal pakai &lt;b&gt;</b><br>
    <i>Teks ini miring pakai &lt;i&gt;</i><br>
    <u>Teks ini bergaris bawah pakai &lt;u&gt;</u>
  </p>

  <h2>2. Gaya Semantik</h2>
  <p>
    <strong>Teks ini penting, pakai &lt;strong&gt;</strong><br>
    <em>Teks ini ditekankan, pakai &lt;em&gt;</em>
  </p>

  <h2>3. Perbedaan Fisik vs Semantik</h2>
  <p>
    - Gaya fisik (&lt;b&gt;, &lt;i&gt;, &lt;u&gt;) hanya <b>mengubah tampilan</b>.<br>
    - Gaya semantik (&lt;strong&gt;, &lt;em&gt;) memberi <em>arti tambahan</em> untuk mesin pencari dan pembaca layar.<br>
    Contoh: <strong>peringatan!</strong> lebih dipahami mesin sebagai teks penting, bukan sekadar tebal biasa.
  </p>
</body>
</html>
Hasil:

Penutup

Nah, sekarang kamu sudah kenal sama “alat tulis” dasar di HTML: heading buat judul, paragraf buat isi, <br> buat pindah baris, dan tag format buat menekankan kata.

Dengan ini saja, kamu sudah bisa bikin halaman web sederhana yang rapi.

Jangan buru-buru mikirin desain yang ribet. Mulai aja dulu dengan latihan bikin teks sederhana, terus lihat hasilnya di browser. Percaya deh, begitu kamu lihat tulisanmu tampil di layar, ada rasa puas tersendiri.

Selamat mencoba. Jangan takut membuat kesalahan, karena dari kesalahan kita belajar dan memahami sesuatu dengan lebih baik.

Posting Komentar