Belajar HTML Part 3: Tag Teks dan Formatting HTML untuk Pemula

by

Pada Part 2, kamu sudah memahami struktur dasar HTML seperti DOCTYPE, head, body, dan heading. Sekarang kita lanjut ke Part 3, yaitu tag teks dan formatting HTML.

Materi ini penting karena:

  • Digunakan hampir di setiap halaman website
  • Berpengaruh langsung ke SEO
  • Membuat konten lebih rapi dan mudah dibaca

Apa Itu Tag Teks dalam HTML?

Tag teks adalah elemen HTML yang digunakan untuk mengatur tampilan dan makna teks. Bukan hanya soal tampilan visual, tapi juga soal struktur dan semantik.

Dengan tag teks yang benar:

  • Konten lebih mudah dipahami pembaca
  • Search engine lebih mudah mengindeks
  • Screen reader bekerja lebih optimal

Tag strong dan b

Tag strong

Tag strong digunakan untuk menandai teks yang memiliki penekanan penting. 

<p>Belajar <strong>HTML</strong> adalah langkah awal jadi web developer.</p>

Catatan penting:

  • strong punya makna semantik
  • Disarankan untuk SEO

Tag b

Tag b hanya membuat teks tebal secara visual, tanpa makna khusus. 

<p>Teks ini <b>tebal</b> secara tampilan saja.</p>

Best practice:

  • Gunakan strong untuk penekanan penting
  • Gunakan b hanya untuk styling ringan

Tag em dan i

Tag em

Tag em digunakan untuk memberi penekanan makna dengan gaya miring. 

<p>Belajar HTML itu <em>penting</em> untuk pemula.</p>

Tag em memiliki nilai semantik, lebih disukai dibanding i untuk konten.

Tag i

Tag i digunakan untuk teks miring tanpa makna khusus. 

<p>Teks ini <i>miring</i> secara visual.</p>

Tag span

Tag span adalah elemen inline tanpa makna khusus. Biasanya digunakan untuk styling dengan CSS. 

<p>Belajar <span class="highlight">HTML</span> itu menyenangkan.</p>

span sering dipakai untuk:

  • Memberi warna teks
  • Memberi class atau id
  • Manipulasi JavaScript

Tag small

Tag small digunakan untuk teks kecil, biasanya catatan tambahan. 

<p>Harga: Rp 100.000 <small>*belum termasuk pajak</small></p>

Tag mark

Tag mark digunakan untuk menyorot teks. 

<p>Pelajari <mark>struktur HTML</mark> sebelum lanjut ke CSS.</p>

Tag sub dan sup

Subscript

<p>H<sub>2</sub>O adalah air.</p>

Superscript

<p>10<sup>2</sup> = 100</p>

Tag code dan pre

Untuk menampilkan kode program, gunakan code dan pre. 

<pre>
  <code>
    <h1>Hello World</h1>
  </code>
</pre>

Best practice:

  • Gunakan pre untuk blok kode
  • Gunakan code untuk inline code

Tag blockquote

Tag blockquote digunakan untuk kutipan. 

<blockquote>
  HTML adalah fondasi utama web.
</blockquote>

Kesalahan Umum Pemula

  • Menggunakan b вместо strong
  • Menggunakan i вместо em
  • Terlalu banyak span tanpa tujuan
  • Styling teks tanpa semantik

Ringkasan Part 3

  • Gunakan strong dan em untuk makna
  • Gunakan span untuk styling
  • Formatting yang benar membantu SEO
  • Tag teks adalah fondasi konten HTML

Lanjutan Materi

Di Part 4, kita akan membahas:

  • Tag link (a)
  • Gambar (img)
  • Audio dan video

Sebelumnya: Part 2 → Struktur HTML | Lanjut: Part 4 → Link & List HTML

Leave a Comment