Home Heading & Paragraf Formatting Text

Formatting Text dalam HTML

25 menit Pemula Teks & Typography

Pelajari berbagai elemen formatting teks HTML untuk menekankan makna semantik, meningkatkan keterbacaan, dan menyampaikan informasi dengan lebih efektif.

Pendahuluan Formatting Teks

HTML menyediakan berbagai elemen semantik untuk memformat teks yang tidak hanya mengubah tampilan visual, tetapi juga menyampaikan makna dan konteks yang penting untuk aksesibilitas dan SEO.

Semantic vs Presentational

Elemen seperti <strong> dan <em> bersifat semantik (menyampaikan makna), sedangkan <b> dan <i> bersifat presentasional (hanya mengubah tampilan). Prioritaskan elemen semantik untuk aksesibilitas yang lebih baik.

Formatting Teks Dasar

🎯 Penekanan dan Penting

<strong> Semantik

Menunjukkan teks dengan tingkat kepentingan tinggi. Screen reader akan membacanya dengan penekanan.

<p>Ini <strong>sangat penting</strong> untuk diperhatikan.</p>

Ini sangat penting untuk diperhatikan.

<em> Semantik

Memberikan penekanan semantik pada teks. Berbeda dengan sekadar italic.

<p>Kamu <em>harus</em> menyelesaikan ini.</p>

Kamu harus menyelesaikan ini.

<mark> Semantik

Menyoroti teks seperti stabilo untuk penanda visual.

<p>Fokus pada <mark>kata kunci</mark> ini.</p>

Fokus pada kata kunci ini.

📏 Ukuran dan Posisi Teks

<small> Semantik

Menampilkan teks berukuran kecil untuk informasi sampingan.

<p>Harga normal: $100 <small>(termasuk pajak)</small></p>

Harga normal: $100 (termasuk pajak)

<sub> Presentasional

Membuat teks subscript untuk rumus kimia atau matematika.

<p>Rumus kimia: C<sub>6</sub>H<sub>12</sub>O<sub>6</sub></p>

Rumus kimia: C6H12O6

<sup> Presentasional

Membuat teks superscript untuk pangkat atau catatan kaki.

<p>E = mc<sup>2</sup></p>

E = mc2

✏️ Revisi dan Perubahan

<del> Semantik

Menandai teks yang dihapus atau tidak berlaku.

<p>Harga: <del>$150</del> $100</p>

Harga: $150 $100

<ins> Semantik

Menandai teks yang ditambahkan atau disisipkan.

<p>Warna favorit: biru <ins>dan hijau</ins></p>

Warna favorit: biru dan hijau

Formatting Teknis

<code> Semantik

Menampilkan kode program dengan font monospace.

<p>Gunakan <code>console.log()</code> untuk debugging.</p>

Gunakan console.log() untuk debugging.

<kbd> Semantik

Menunjukkan input keyboard dengan style khusus.

<p>Tekan <kbd>Ctrl</kbd> + <kbd>S</kbd> untuk save.</p>

Tekan Ctrl + S untuk save.

<samp> Semantik

Menampilkan output contoh dari program.

<p>Error: <samp>File not found</samp></p>

Error: File not found

<var> Semantik

Menandai variabel dalam konteks matematika atau programming.

<p>Variabel <var>x</var> = 10</p>

Variabel x = 10

Kutipan dan Referensi

<q> Semantik

Untuk kutipan pendek inline dengan tanda kutip otomatis.

<p>Dia berkata <q>HTML itu menyenangkan</q>.</p>

Dia berkata HTML itu menyenangkan.

<blockquote> Semantik

Untuk kutipan panjang dalam blok terpisah.

<blockquote cite="source-url"> Konten kutipan panjang di sini... </blockquote>
Konten kutipan panjang di sini...
<cite> Semantik

Menandai judul karya yang dikutip.

<p>Sumber: <cite>Web Development Basics</cite></p>

Sumber: Web Development Basics

<abbr> Semantik

Untuk singkatan dengan tooltip.

<abbr title="World Wide Web">WWW</abbr>

WWW

Contoh Implementasi Lengkap

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Formatting Text Lengkap</title>
</head>
<body>
    <h1>Belajar Formatting Text HTML</h1>
    
    <p>
        <strong>HTML</strong> menyediakan berbagai elemen untuk 
        <em>memformat teks secara semantik</em>. Ini berarti 
        kita tidak hanya mengubah tampilan, tetapi juga 
        menyampaikan <mark>makna tertentu</mark>.
    </p>
    
    <h2>Contoh Teknis</h2>
    <p>
        Dalam programming, gunakan <code>console.log()</code> 
        untuk debugging. Tekan <kbd>F12</kbd> untuk membuka 
        developer tools. Jika ada error, akan muncul: 
        <samp>Error: Variable not defined</samp>.
    </p>
    
    <h2>Kutipan dan Referensi</h2>
    <blockquote cite="https://example.com">
        <p>"The best way to predict the future is to invent it."</p>
        <cite>Alan Kay</cite>
    </blockquote>
    
    <p>
        Teknologi <abbr title="HyperText Markup Language">HTML</abbr> 
        pertama kali dikembangkan oleh Tim Berners-Lee. Rumus terkenal: 
        E = mc<sup>2</sup> dan air: H<sub>2</sub>O.
    </p>
    
    <p>
        <small>Artikel terakhir diperbarui: <del>2022</del> 
        <ins>2024</ins></small>
    </p>
</body>
</html>
formatting-example.html

Belajar Formatting Text HTML

HTML menyediakan berbagai elemen untuk memformat teks secara semantik. Ini berarti kita tidak hanya mengubah tampilan, tetapi juga menyampaikan makna tertentu.

Contoh Teknis

Dalam programming, gunakan console.log() untuk debugging. Tekan F12 untuk membuka developer tools. Jika ada error, akan muncul: Error: Variable not defined.

Kutipan dan Referensi

"The best way to predict the future is to invent it."

Alan Kay

Teknologi HTML pertama kali dikembangkan oleh Tim Berners-Lee. Rumus terkenal: E = mc2 dan air: H2O.

Artikel terakhir diperbarui: 2022 2024

Latihan Praktik

Buat Dokumen Formatting Lengkap

Pemula

🎯 Tujuan:

Buat halaman HTML yang mendemonstrasikan pemahaman tentang berbagai elemen formatting teks dengan menggunakan makna semantik yang tepat.

✅ Checklist Elemen yang Harus Digunakan:

Penekanan
Teknis
Kutipan
Lainnya
Tip Pro: Buat konten tentang topik yang kamu kuasai (seperti hobi atau bidang studi) agar lebih mudah menerapkan berbagai formatting dengan konteks yang tepat.
Sebelumnya: Heading & Paragraf Selanjutnya: List