Elemen Teks HTML: Judul, Paragraf, Daftar, dan Penekanan

Setelah kamu paham bagaimana sebuah dokumen HTML disusun, sekarang waktunya mengisi bagian body dengan konten yang sesungguhnya. Di hampir semua halaman web, sebagian besar isinya adalah teks — artikel, deskripsi, petunjuk, daftar. Karena itu, elemen-elemen yang mengurus teks justru yang paling sering kamu sentuh, jauh lebih sering dari yang lain.

Di artikel ini kita bahas elemen teks yang dipakai sehari-hari: judul, paragraf, ganti baris, tag untuk menekankan kata, dan daftar. Tidak ada yang sulit, kok. Kuncinya ada pada memilih elemen yang tepat untuk setiap kebutuhan — di situlah letak bedanya antara HTML yang rapi dan terstruktur dengan yang berantakan. Yuk, kita kupas satu per satu.

Judul: `<h1>` sampai `<h6>`

Judul berfungsi menamai bagian-bagian halamanmu, persis seperti judul-judul yang kamu lihat di sepanjang artikel ini. HTML menyediakan enam tingkat, mulai dari <h1> yang paling penting sampai <h6> yang paling rendah:

<h1>Judul terbesar dan paling penting</h1>
<h2>Judul bagian</h2>
<h3>Judul sub-bagian</h3>
<h4>Lebih kecil lagi</h4>
<h5>Lebih kecil lagi</h5>
<h6>Judul terkecil</h6>

Anggap saja judul itu kerangka dari sebuah dokumen. <h1> adalah judul untuk seluruh halaman, jadi biasanya cukup satu saja. Setelah itu <h2> menandai bagian-bagian utama, <h3> untuk sub-bagian di dalamnya, begitu seterusnya ke bawah. Susunan inilah yang membentuk hierarki, mirip seperti daftar isi sebuah buku.

Ada satu aturan penting di sini: pilih judul berdasarkan maknanya, bukan karena ukuran tampilannya. Memang kadang tergoda memakai <h4> cuma supaya tulisannya kelihatan lebih kecil, tapi itu alasan yang keliru. Judul itu cara HTML memberi tahu mesin pencari dan pembaca layar soal struktur halamanmu — bukan tombol untuk mengatur besar-kecil huruf. Kalau yang kamu mau cuma teks yang terlihat berukuran tertentu, itu urusan CSS nanti, bukan dengan asal memilih tingkat judul.

Jangan melompati tingkat judul

Pakailah secara runtut: mulai dari <h1>, lalu <h2>, dan baru gunakan <h3> di bawah sebuah <h2>. Kalau kamu langsung melompat dari <h1> ke <h4>, pembaca layar dan mesin pencari jadi bingung, karena keduanya mengandalkan urutan judul untuk menangkap kerangka halamanmu. Selama hierarkinya kamu jaga tetap logis, halamanmu otomatis lebih mudah diakses sekaligus lebih ramah di mata pencarian.

Paragraf: `<p>`

Paragraf adalah elemen yang paling rajin bekerja untuk teks di web. Setiap blok tulisan biasa kamu taruh di dalam <p>:

<p>Ini sebuah paragraf. Panjangnya boleh sesukamu, dan browser akan otomatis membungkus teksnya agar pas dengan lebar layar.</p>
<p>Ini paragraf kedua yang terpisah. Browser otomatis menambahkan sedikit jarak di antara paragraf.</p>

Tiap <p> adalah satu paragraf tersendiri. Soal jarak antar paragraf dan pembungkusan baris, semuanya diurus browser secara otomatis, jadi kamu tidak perlu menambahkan ganti baris manual cuma supaya teksnya muat. Cukup tulis kalimatmu, bungkus dengan <p>, lalu serahkan urusan tata letaknya ke browser.

Ada satu hal yang sering bikin pemula keliru: spasi dan ganti baris yang berlebih di kode sumber HTML tidak akan muncul di halaman. Coba kamu tulis seperti ini:

<p>Halo        dunia.
Ini masih baris yang sama.</p>

…dan browser akan memadatkan semua spasi tadi menjadi satu spasi saja, lalu menampilkan “Halo dunia. Ini masih baris yang sama.” dalam satu baris yang menyambung. HTML memang menganggap deretan spasi, tab, maupun baris baru sebagai satu spasi tunggal. Ini bukan kebetulan, tapi disengaja: supaya kamu bebas merapikan dan memberi indentasi pada kode sumber tanpa mengubah apa yang dilihat pembaca.

Ganti baris dan garis horizontal

Kadang-kadang kamu memang butuh sebuah baris terpotong di titik tertentu — misalnya alamat, atau beberapa baris puisi. Nah, untuk itulah <br> ada:

<p>
  ACY Partner Indonesia<br />
  Jakarta, Indonesia
</p>

<br> termasuk elemen self-closing (tidak punya tag penutup) dan tugasnya memaksa ganti baris tepat di titik kamu menaruhnya. Tapi gunakan seperlunya saja — hanya kalau putusnya baris itu memang bagian dari maknanya, seperti pada alamat. Jangan menumpuk banyak tag <br> cuma untuk merenggangkan elemen atau membuat jarak; urusan tata letak seperti itu sudah jadi bagiannya CSS.

Selain itu ada juga <hr>, yang dikenal sebagai “horizontal rule” — sebuah garis pembatas untuk memisahkan satu bagian konten dengan bagian berikutnya:

<p>Akhir dari satu topik.</p>
<hr />
<p>Awal dari topik baru.</p>

Hasilnya berupa garis mendatar yang melintang di halaman, sekaligus menjadi penanda adanya pergantian tema — peralihan dari satu topik ke topik lainnya.

Penekanan: `<strong>` dan `<em>`

Kalau kamu mau menarik perhatian pembaca ke sebuah kata atau frasa, HTML punya dua elemen utama untuk itu:

<p>Ini informasi yang <strong>sangat penting</strong>.</p>
<p>Saya <em>sangat</em> menyarankan membaca ini dua kali.</p>

<strong> menandai teks sebagai sesuatu yang penting. Secara bawaan, browser menampilkannya dengan huruf tebal.
<em> menandai teks yang butuh penekanan — semacam tekanan yang kamu berikan pada sebuah kata ketika berbicara. Secara bawaan, browser menampilkannya dengan huruf miring.

Ada satu hal yang sering luput dari perhatian pemula: kedua elemen ini soal makna, bukan sekadar tampilan. <strong> seolah berkata “ini penting,” sedangkan <em> berkata “tekankan bagian ini.” Pembaca layar pun bisa ikut mengubah nada bacanya ketika menemui keduanya. HTML sebenarnya juga punya elemen <b> (bold) dan <i> (italic) biasa, yang hanya mengubah tampilan tanpa membawa makna apa-apa. Tapi di kebanyakan situasi, <strong> dan <em> tetap pilihan yang lebih baik, karena keduanya menyampaikan maksud, bukan cuma gaya tulisan.

Makna di atas penampilan — tema yang berulang

Lama-lama kamu akan sadar bahwa gagasan ini terus berulang di HTML: pilih elemen berdasarkan maknanya, bukan sekadar bentuknya. Pakai <strong> daripada <b>, pilih tingkat judul yang tepat alih-alih sekadar mengejar ukuran. Prinsip inilah fondasi dari HTML yang baik dan mudah diakses, dan manfaatnya makin terasa seiring situsmu bertambah besar. Soal tampilan visual, itu pekerjaan CSS; tugas HTML cuma satu, yaitu menjelaskan konten itu sebenarnya apa.

Daftar: `<ul>`, `<ol>`, dan `<li>`

Daftar bisa kamu temui di mana-mana di web — menu navigasi, langkah-langkah tutorial, poin-poin ringkas, sampai daftar fitur. HTML menyediakan dua jenis utama.

Daftar tak berurut (<ul>) dipakai untuk butir-butir yang urutannya tidak penting, dan ditampilkan dalam bentuk poin (bullet):

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Daftar berurut (<ol>) dipakai untuk butir-butir yang urutannya memang penting, dan otomatis diberi nomor:

<ol>
  <li>Tulis HTML-mu</li>
  <li>Tambahkan CSS untuk penataan</li>
  <li>Tambahkan JavaScript untuk interaktivitas</li>
</ol>

Pada kedua jenis ini, setiap butir tetap dibungkus dengan <li> (singkatan dari “list item”, alias butir daftar). Yang membedakan keduanya hanyalah wadahnya: bungkus butir <li> dengan <ul> kalau mau poin, atau dengan <ol> kalau mau nomor. Pilihannya tinggal kamu sesuaikan dengan maknanya — ini langkah-langkah yang harus berurutan (berurut), atau cuma sekumpulan hal tanpa urutan tertentu (tak berurut)?

Daftar juga bisa disisipkan di dalam daftar lain untuk membuat sub-butir:

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>Backend</li>
</ul>

Yang perlu kamu ingat: taruh daftar bersarang itu di dalam <li> induknya, lalu tutup semua tag dengan urutan yang benar.

Kutipan dan kode dalam baris

Ada dua elemen teks lagi yang sebaiknya kamu kenali sejak dini. Saat kamu ingin mengutip sebuah bagian yang agak panjang dari sumber lain, gunakan <blockquote>:

<blockquote>
  <p>Cara terbaik belajar coding adalah dengan menulis kode.</p>
</blockquote>

Lalu, saat kamu sedang membahas kode dan ingin menyelipkan potongan kode di tengah kalimat — misalnya menyebut tag <title> seperti ini — kamu memakai <code>:

<p>Elemen <code>&lt;title&gt;</code> mengatur judul halaman.</p>

Elemen <code> menampilkan teksnya dengan font monospace, yang seakan diam-diam memberi tahu pembaca “ini kode, bukan tulisan biasa.” Praktis sekali setiap kali kamu menyebut sebuah tag, nama berkas, atau perintah di tengah kalimat.

Memilih elemen yang tepat

Berikut ini rangkuman singkat dari elemen teks yang sudah kita bahas:

Elemen	Dipakai untuk
`<h1>`–`<h6>`	Judul bagian, dalam urutan hierarkis
`<p>`	Sebuah paragraf teks biasa
`<br>`	Ganti baris yang disengaja (alamat, dll.)
`<hr>`	Pembatas tematik antar bagian
`<strong>`	Teks yang penting (tebal)
`<em>`	Teks yang butuh penekanan (miring)
`<ul>` / `<ol>` / `<li>`	Daftar berpoin / bernomor dan butirnya
`<blockquote>`	Bagian yang dikutip
`<code>`	Kode dalam baris di dalam teks

Kapan pun kamu ragu harus pakai yang mana, tanyakan dulu: konten ini sebenarnya apa, bukan ingin terlihat seperti apa. Soal tampilan, itu nanti datang dari CSS; sedangkan elemen urusannya cuma satu, yaitu makna.

Penutup

Sekarang kamu sudah memegang perlengkapan dasar untuk menaruh teks di sebuah halaman:

Judul (<h1>–<h6>) menyusun halamanmu menjadi kerangka yang logis — pilih berdasarkan makna, secara berurutan, dan tanpa melompati tingkat.
Paragraf (<p>) menampung tulisan biasamu, sementara urusan pembungkusan baris dan jaraknya diserahkan ke browser.
<br> memaksa ganti baris di tempat yang memang bermakna; <hr> memisahkan antar bagian.
<strong> dan <em> memberi penanda penting dan penekanan — dipilih karena maknanya, bukan sekadar tampilan tebal atau miring.
Daftar (<ul>, <ol>, <li>) menata butir-butir sebagai poin atau nomor, tergantung apakah urutannya penting.

Berbekal ini saja, kamu sudah bisa menulis seluruh konten teks dari sebuah artikel atau halaman yang sungguhan. Selanjutnya, kita akan membahas dua hal yang membuat web benar-benar menjadi sebuah web sejak awal: tautan dan gambar — yaitu cara menghubungkan satu halaman dengan halaman lain, serta menampilkan gambar di dalamnya.