Profil

Memahami Hierarki Judul (Heading)

Penggunaan judul (heading) yang terstruktur sangat penting untuk aksesibilitas dan SEO. Pembaca harus dapat memahami garis besar konten Anda hanya dengan memindai judul-judulnya.

Judul Utama Artikel (H1)

Sub-judul Tingkat Pertama (H2)

Sub-judul Tingkat Kedua (H3)

Sub-judul Tingkat Ketiga (H4)


Paragraf & Pemformatan Teks Sebaris

Tipografi web yang baik memiliki tinggi baris (line-height) dan panjang baris yang nyaman untuk mata manusia, biasanya sekitar 60-80 karakter per baris. Anda dapat menggunakan teks tebal (bold), miring (italic), atau teks yang disorot (mark). Gunakan elemen coretan (del) untuk teks yang dihapus, garis bawah (ins) untuk teks yang ditambahkan baru, serta kode sebaris (code) untuk terminologi teknis.

Terdapat juga elemen sebaris lainnya seperti subscript (misalnya: H2O) dan superscript (misalnya: E=mc2). Gunakan HTML untuk singkatan yang menampilkan kepanjangannya saat disorot, dan elemen Ctrl + C untuk merepresentasikan input dari keyboard pengguna.

Elemen Tipografi Khusus & Struktur Data

Kutipan (Blockquote) & Sitasi

"Tipografi adalah seni dan teknik mengatur huruf agar bahasa yang tertulis dapat dilihat dengan jelas, mudah dibaca, dan menarik secara visual. Konten yang baik tanpa tipografi yang tepat akan kehilangan maknanya."

— Desainer Anonim

Daftar (Lists)

Informasi yang padat sebaiknya dipecah menjadi daftar agar lebih mudah dicerna oleh pembaca:

Prinsip Desain (Tak Berurut)

  • Keterbacaan (Readability)
  • Kejelasan (Legibility)
  • Kontras yang memadai
  • Hierarki visual yang jelas

Langkah Implementasi (Berurut)

  1. Pilih jenis huruf (typeface) utama.
  2. Tentukan skala ukuran font modular.
  3. Atur jarak antar baris dan paragraf.
  4. Uji coba secara responsif di berbagai layar.

Daftar Definisi (Definition List)

Digunakan untuk mendefinisikan istilah atau glosarium:

HTML
Bahasa markah standar (markup language) yang dirancang untuk menstrukturkan dan menampilkan dokumen di peramban web.
CSS
Bahasa lembar gaya (style sheet) yang digunakan untuk menjelaskan presentasi dan desain visual dari dokumen HTML.

Tabel Data (Data Table)

Tabel digunakan untuk menampilkan data tabular, bukan untuk tata letak (layout) halaman:

Tag HTML Deskripsi Elemen Penggunaan Utama
<p> Paragraf Membungkus teks blok utama.
<h1> - <h6> Heading Menentukan hierarki dan judul seksi.
<blockquote> Blockquote Mengutip teks berukuran panjang dari sumber eksternal.

Media & Gambar Berserta Keterangan (Figure)

Gunakan tag <figure> dan <figcaption> untuk menyatukan gambar dengan teks keterangannya secara semantik.

Gambar 1: Mesin ketik klasik merepresentasikan awal mula tipografi modern (Sumber: Unsplash).