Teks & Heading dalam HTML: Membuat Konten Terstruktur

Nah, sekarang kita masuk ke bagian yang paling sering dipake: teks dan heading. Karena pada akhirnya, website itu isinya teks kan? (Ya, kecuali Anda bikin website cuma gambar doang.)

1. Heading — Judul-judulan

Heading itu kayak judul di buku. Ada 6 level, dari h1 (paling gede) sampai h6 (paling kecil).

<h1>Heading 1 — Paling Gede</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6 — Paling Kecil</h6>

Kapan Pakai yang Mana?

h1 → Judul utama halaman. Cuma satu per halaman.
h2 → Judul section utama.
h3 → Sub-judul di dalam section.
h4-h6 → Jarang dipake, kecuali kontennya sangat detail.

Jangan Loncat Level!

<!-- ✅ Bener: hierarki jelas -->
<h1>Belajar HTML</h1>
  <h2>Dasar HTML</h2>
    <h3>Heading</h3>
    <h3>Paragraph</h3>
  <h2>Form</h2>

<!-- ❌ Salah: loncat level -->
<h1>Judul</h1>
<h4>Sub-judul</h4>  <!-- skip h2 dan h3 -->

Analoginya: judul bab → judul section → sub-section. Jangan loncat dari judul bab langsung ke sub-sub-section.

2. Paragraph — Tempat Nulis

<p>Ini paragraf pertama.</p>
<p>Ini paragraf kedua.</p>

HTML otomatis kasih spasi antar paragraf. Jadi Anda gak perlu nambahin <br> atau spasi manual.

Yang perlu diingat: HTML mengabaikan spasi dan baris baru di dalam tag <p>. Jadi kalau Anda nulis:

<p>
    Baris pertama
    
    Baris kedua
</p>

Tetap jadi satu paragraf. Browser gak peduli Anda enter berapa kali.

3. Line Break & Horizontal Rule

`<br>` — Ganti Baris

<p>
    Jl. Merdeka No. 123<br>
    Batam, Kepulauan Riau<br>
    Indonesia
</p>

Cocok buat alamat. Jangan dipake buat misah paragraf — itu kerjaan <p>.

`<hr>` — Garis Pemisah

<p>Bagian pertama.</p>
<hr>
<p>Bagian kedua.</p>

<hr> bikin garis horizontal sebagai pemisah section.

4. Teks Tebal & Miring

Teks Tebal

<p>Ini teks <strong>tebal</strong>.</p>

<strong> itu yang direkomendasikan karena punya makna semantik — bilang ke browser “ini penting, perlu ditekankan.”

Kalau cuma mau teks tebal tanpa penekanan khusus, ada <b>:

<p>Perhatian: <strong>Jangan masuk area berbahaya</strong></p>
<p>Nama produk: <b>iPhone 15</b></p>

Teks Miring

<p>Ia sangat <em>senang</em> dengan hasilnya.</p>
<p>Kata <i>kerja</i> berasal dari bahasa Jepang.</p>

<em> → penekanan emosional (semantik)
<i> → istilah asing, judul karya

5. Kombinasi Teks

HTML membolehkan Anda nge-block teks dengan berbagai format:

<p>Teks <strong>tebal dan <em>miring</em></strong></p>
<p>Teks <mark>highlighted</mark></p>
<p>Teks <del>terhapus</del> dan <ins>disisipkan</ins></p>
<p>Harga: <s>Rp 100.000</s> <strong>Rp 50.000</strong></p>

<mark> → highlight kuning (kayak stabilo)
<del> → teks dicoret
<ins> → teks yang ditambahin
<s> → teks yang sudah gak relevan

6. Preformatted Text — Teks yang Tetep Rapi

<pre>
    Nama: Andika
    Kota: Batam
    
    Teks ini akan ditampilkan
    persis seperti yang ditulis,
    dengan spasi dan baris baru
    yang terjaga.
</pre>

<pre> mempertahankan spasi dan baris baru. Cocok buat nampilin kode.

7. Blockquote — Kutipan

<blockquote>
    <p>"Belajar HTML itu menyenangkan."</p>
    <footer>— <cite>Andika Rekatias</cite></footer>
</blockquote>

<blockquote> buat kutipan dari sumber lain. <footer> dan <cite> buat nyantumin siapa yang ngomong.

8. `<span>` vs `<div>` — Inline vs Block

Ini yang sering bikin bingung pemula.

`<span>` — Inline

<p>Ini adalah <span style="color: red;">teks merah</span> dalam paragraf.</p>

<span> gak bikin baris baru. Cuma ngebungkus sebagian teks buat di-style.

`<div>` — Block

<div class="header">
    <h1>Judul Website</h1>
    <p>Subtitle</p>
</div>

<div class="content">
    <p>Konten utama ada di sini.</p>
</div>

<div> bikin baris baru. Dipake buat ngelompokin elemen jadi section.

Perbedaan simpel:

<span> → buat sebagian teks (inline)
<div> → buat section/kelompok (block)

9. Character Entities — Karakter Khusus

Beberapa karakter gak bisa langsung ditulis di HTML:

<p>Lebih kecil: &lt;</p>
<p>Lebih besar: &gt;</p>
<p>Ampersand: &amp;</p>
<p>Spasi non-breaking: belajar&nbsp;HTML</p>

Entity	Karakter
`<`	<
`>`	>
`&`	&
` `	Spasi

10. Contoh Lengkap

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Teks & Heading</title>
</head>
<body>
    <h1>Belajar Teks dalam HTML</h1>
    
    <h2>Paragraf</h2>
    <p>Ini paragraf pertama. HTML memudahkan kita bikin konten web.</p>
    <p>Paragraf kedua. Spasi antar paragraf dibuat otomatis.</p>
    
    <hr>
    
    <h2>Format Teks</h2>
    <p>Teks <strong>tebal</strong> dan <em>miring</em>.</p>
    <p>Teks <mark>highlighted</mark> dan <del>terhapus</del>.</p>
    
    <h2>Kutipan</h2>
    <blockquote>
        <p>"HTML itu gampang dipelajari."</p>
        <footer>— <cite>Andika</cite></footer>
    </blockquote>
    
    <h2>Kode</h2>
    <pre>
&lt;html&gt;
  &lt;body&gt;Hello&lt;/body&gt;
&lt;/html&gt;
    </pre>
</body>
</html>

11. Recap

Elemen	Fungsi	Tipe
`<h1>` - `<h6>`	Heading	Block
`<p>`	Paragraf	Block
`<br>`	Ganti baris	Inline
`<hr>`	Garis horizontal	Block
`<strong>`	Teks tebal (penting)	Inline
`<em>`	Teks miring (penekanan)	Inline
`<mark>`	Highlight	Inline
`<del>`	Teks terhapus	Inline
`<ins>`	Teks disisipkan	Inline
`<pre>`	Teks preformatted	Block
`<blockquote>`	Kutipan	Block
`<span>`	Inline container	Inline
`<div>`	Block container	Block

Penutup

Teks dan heading itu fondasi konten. Dengan heading yang hierarkis dan format teks yang tepat, website Anda jadi lebih rapi dan mudah dibaca.

Di artikel selanjutnya, kita akan bahas Link, Gambar, Audio & Video — cara bikin hyperlink, nampilin gambar, dan nyisipin media.