Cara Mengatur Format Teks HTML (Bold, Italic, Underline, dll)

Dalam pembuatan website, format teks HTML adalah elemen penting untuk membuat konten yang menarik dan mudah dibaca. Format teks HTML memungkinkan developer untuk memberikan penekanan, styling, dan struktur pada teks. Memahami cara menggunakan format teks HTML dengan benar akan membuat konten website lebih engaging dan SEO-friendly.

Format teks HTML mencakup berbagai tag seperti bold, italic, underline, strikethrough, dan banyak lagi. Artikel ini akan membahas secara lengkap tentang format teks HTML beserta penggunaan yang tepat untuk setiap tag formatting.

Daftar isi

Apa Itu Format Teks HTML?
Tag Bold HTML
Tag Italic HTML
Tag Underline HTML
Tag Strikethrough HTML
Tag Subscript dan Superscript
Tag Mark HTML
Tag Small dan Big
Tag Code dan Pre
Tag Quotation
Tag Abbreviation dan Definition
Tag Insert
Kombinasi Format Teks HTML
Styling Format Teks dengan CSS
Best Practices Format Teks HTML
Contoh Praktis Lengkap
Kesalahan Umum yang Harus Dihindari
Kesimpulan

Apa Itu Format Teks HTML?

Format teks HTML adalah kumpulan tag yang digunakan untuk mengubah tampilan dan memberikan makna semantik pada teks di halaman web. Format teks HTML tidak hanya mengubah visual teks, tetapi juga memberikan informasi penting kepada search engine dan screen reader tentang konteks teks tersebut.

Fungsi Format Teks HTML

Format teks HTML memiliki beberapa fungsi penting:

Penekanan Visual – Membuat teks lebih menonjol
Semantic Meaning – Memberikan makna pada konten
Readability – Meningkatkan keterbacaan artikel
SEO – Membantu search engine memahami konten
Accessibility – Membantu screen reader untuk pengguna tunanetra
User Experience – Membuat konten lebih engaging

Tag Bold HTML

1. Tag `` (Semantic Bold)

Tag  adalah format teks HTML untuk membuat teks tebal dengan makna semantik yang kuat (penting).

<p>Ini adalah <strong>teks penting</strong> dalam paragraf.</p>Code language: HTML, XML (xml)

Hasil: Ini adalah teks penting dalam paragraf.

Karakteristik :

Memberikan makna “penting” atau “urgent”
Dibaca dengan penekanan oleh screen reader
Baik untuk SEO
Semantic HTML5

2. Tag `` (Visual Bold)

Tag  adalah format teks HTML untuk membuat teks tebal tanpa makna semantik khusus.

<p>Ini adalah <b>teks tebal</b> biasa.</p>Code language: HTML, XML (xml)

Hasil: Ini adalah teks tebal biasa.

Karakteristik :

Hanya untuk styling visual
Tidak ada makna semantik khusus
Tidak dibaca berbeda oleh screen reader
Gunakan untuk kata kunci atau nama produk

Perbedaan `` vs ``

<!-- Gunakan <strong> untuk teks penting -->
<p><strong>Peringatan:</strong> Jangan lupa simpan pekerjaan Anda!</p>

<!-- Gunakan <b> untuk styling visual -->
<p>Produk terbaru: <b>Laptop Gaming XYZ</b></p>Code language: HTML, XML (xml)

Kapan menggunakan:

 – Untuk teks yang penting secara kontekstual
 – Untuk teks yang perlu menonjol secara visual

Tag Italic HTML

1. Tag `` (Semantic Italic)

Tag  adalah format teks HTML untuk membuat teks miring dengan penekanan (emphasis).

<p>Saya <em>sangat</em> senang dengan hasilnya.</p>Code language: HTML, XML (xml)

Hasil: Saya sangat senang dengan hasilnya.

Karakteristik :

Memberikan penekanan pada kata
Dibaca dengan intonasi berbeda oleh screen reader
Semantic meaning
Baik untuk SEO

2. Tag `` (Visual Italic)

Tag  adalah format teks HTML untuk membuat teks miring tanpa penekanan khusus.

<p>Kata <i>software</i> berasal dari bahasa Inggris.</p>Code language: HTML, XML (xml)

Hasil: Kata software berasal dari bahasa Inggris.

Karakteristik :

Untuk istilah teknis, kata asing, atau pikiran
Tidak ada penekanan semantik
Styling visual saja

Perbedaan `` vs ``

<!-- Gunakan <em> untuk penekanan -->
<p>Kamu <em>harus</em> datang tepat waktu!</p>

<!-- Gunakan <i> untuk istilah asing atau teknis -->
<p>Istilah <i>responsive design</i> sangat populer.</p>Code language: HTML, XML (xml)

Tag Underline HTML

Tag `` (Underline)

Tag  adalah format teks HTML untuk membuat garis bawah pada teks.

<p>Ini adalah <u>teks dengan garis bawah</u>.</p>Code language: HTML, XML (xml)

Hasil: Ini adalah teks dengan garis bawah.

Catatan Penting:

Hindari menggunakan  karena mirip dengan link
Gunakan CSS untuk underline jika diperlukan
Bisa membingungkan pengguna

Alternative: CSS Text Decoration

<style>
    .underline {
        text-decoration: underline;
    }
</style>

<p>Ini adalah <span class="underline">teks dengan garis bawah</span>.</p>Code language: HTML, XML (xml)

Tag Strikethrough HTML

1. Tag `<del>` (Deleted Text)

Tag <del> adalah format teks HTML untuk menandai teks yang dihapus atau tidak valid lagi.

<p>Harga: <del>Rp 100.000</del> Rp 75.000</p>Code language: HTML, XML (xml)

Hasil: Harga: ~~Rp 100.000~~ Rp 75.000

Karakteristik <del>:

Semantic meaning: teks yang dihapus
Cocok untuk harga coret, revisi dokumen
Baik untuk SEO

2. Tag `<s>` (Strikethrough)

Tag <s> adalah format teks HTML untuk teks yang tidak lagi akurat atau relevan.

<p><s>Stok habis</s> Tersedia lagi!</p>Code language: HTML, XML (xml)

Karakteristik <s>:

Untuk teks yang tidak lagi relevan
Mirip dengan <del> tapi konteks berbeda

3. Tag `<strike>` (Deprecated)

<!-- Tidak direkomendasikan (deprecated) -->
<strike>Teks coret</strike>

<!-- Gunakan <del> atau <s> -->
<del>Teks coret</del>Code language: HTML, XML (xml)

Tag Subscript dan Superscript

1. Tag `` (Subscript)

Tag  adalah format teks HTML untuk membuat teks subscript (di bawah baseline).

<p>Rumus air: H<sub>2</sub>O</p>
<p>Rumus kimia: CO<sub>2</sub></p>Code language: HTML, XML (xml)

Hasil: H₂O, CO₂

Penggunaan:

Rumus kimia
Notasi matematika
Footnote references

2. Tag `` (Superscript)

Tag  adalah format teks HTML untuk membuat teks superscript (di atas baseline).

<p>Luas: 10m<sup>2</sup></p>
<p>E = mc<sup>2</sup></p>
<p>Tanggal: 25<sup>th</sup> December</p>Code language: HTML, XML (xml)

Hasil: 10m², E = mc², 25ᵗʰ

Penggunaan:

Pangkat matematika
Ordinal numbers
Trademark symbols

Tag Mark HTML

Tag `` (Highlight)

Tag  adalah format teks HTML untuk memberi highlight pada teks.

<p>Kata kunci <mark>penting</mark> dalam kalimat ini.</p>Code language: HTML, XML (xml)

Hasil: Kata kunci ==penting== dalam kalimat ini.

Karakteristik :

Highlight teks dengan background kuning (default)
Menandai teks yang relevan dengan pencarian
Baik untuk SEO

Styling dengan CSS:

<style>
    mark {
        background-color: #ffeb3b;
        color: #000;
        padding: 2px 4px;
    }
    
    .highlight-blue {
        background-color: #2196f3;
        color: white;
    }
</style>

<p>Teks dengan <mark>highlight default</mark> dan <mark class="highlight-blue">highlight biru</mark>.</p>Code language: HTML, XML (xml)

Tag Small dan Big

1. Tag `` (Small Text)

Tag  adalah format teks HTML untuk membuat teks lebih kecil.

<p>Harga: Rp 100.000 <small>(belum termasuk pajak)</small></p>
<p>Copyright &copy; 2024 <small>All rights reserved</small></p>Code language: HTML, XML (xml)

Penggunaan:

Disclaimer
Copyright notice
Side comments
Fine print

2. Tag `<big>` (Deprecated)

<!-- Tidak direkomendasikan (deprecated) -->
<big>Teks besar</big>

<!-- Gunakan CSS -->
<span style="font-size: 1.2em;">Teks besar</span>Code language: HTML, XML (xml)

Tag Code dan Pre

1. Tag `<code>` (Inline Code)

Tag <code> adalah format teks HTML untuk menampilkan kode inline.

<p>Gunakan tag <code>&lt;div&gt;</code> untuk container.</p>
<p>Variabel <code>userName</code> menyimpan nama pengguna.</p>Code language: HTML, XML (xml)

Styling:

<style>
    code {
        background-color: #f5f5f5;
        padding: 2px 6px;
        border-radius: 3px;
        font-family: 'Courier New', monospace;
        color: #e74c3c;
    }
</style>Code language: HTML, XML (xml)

2. Tag `<pre>` (Preformatted Text)

Tag <pre> adalah format teks HTML untuk teks yang sudah diformat.

<pre>
function hello() {
    console.log("Hello World!");
}
</pre>Code language: JavaScript (javascript)

Karakteristik:

Mempertahankan spasi dan line breaks
Font monospace
Cocok untuk kode atau ASCII art

3. Kombinasi `<pre>` dan `<code>`

<pre><code>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Page Title&lt;/title&gt;
    &lt;/head&gt;
&lt;/html&gt;
</code></pre>Code language: HTML, XML (xml)

Tag Quotation

1. Tag `<q>` (Inline Quote)

Tag <q> adalah format teks HTML untuk kutipan inline.

<p>Albert Einstein berkata, <q>Imagination is more important than knowledge.</q></p>Code language: HTML, XML (xml)

Hasil: Albert Einstein berkata, “Imagination is more important than knowledge.”

2. Tag `<blockquote>` (Block Quote)

Tag <blockquote> adalah format teks HTML untuk kutipan blok.

<blockquote cite="https://example.com">
    <p>The only way to do great work is to love what you do.</p>
    <footer>— Steve Jobs</footer>
</blockquote>Code language: HTML, XML (xml)

Styling:

<style>
    blockquote {
        border-left: 4px solid #3498db;
        padding-left: 20px;
        margin: 20px 0;
        font-style: italic;
        color: #555;
    }
</style>Code language: HTML, XML (xml)

3. Tag `<cite>` (Citation)

<p>Seperti yang dijelaskan dalam <cite>The Art of Computer Programming</cite> oleh Donald Knuth.</p>Code language: HTML, XML (xml)

Tag Abbreviation dan Definition

1. Tag `<abbr>` (Abbreviation)

Tag <abbr> adalah format teks HTML untuk singkatan atau akronim.

<p><abbr title="HyperText Markup Language">HTML</abbr> adalah bahasa markup untuk web.</p>
<p><abbr title="Cascading Style Sheets">CSS</abbr> untuk styling.</p>Code language: HTML, XML (xml)

Hasil: Saat hover, akan muncul tooltip dengan kepanjangan.

2. Tag `<dfn>` (Definition)

<p><dfn>HTML</dfn> adalah bahasa markup standar untuk membuat halaman web.</p>Code language: HTML, XML (xml)

Tag Insert

Tag `<ins>` (Inserted Text)

Tag <ins> adalah format teks HTML untuk menandai teks yang ditambahkan.

<p>Harga: <del>Rp 100.000</del> <ins>Rp 75.000</ins></p>Code language: HTML, XML (xml)

Atribut:

<ins cite="https://example.com" datetime="2024-01-15">
    Teks yang ditambahkan pada 15 Januari 2024
</ins>
Code language: HTML, XML (xml)

Kombinasi Format Teks HTML

Format teks HTML dapat dikombinasikan untuk efek yang lebih kompleks:

Contoh 1: Bold + Italic

<p>Ini adalah <strong><em>teks penting dan ditekankan</em></strong>.</p>
<p>Atau: <b><i>bold dan italic</i></b></p>
Code language: HTML, XML (xml)

Contoh 2: Bold + Underline

<p>Ini adalah <strong><u>teks penting dengan garis bawah</u></strong>.</p>Code language: HTML, XML (xml)

Contoh 3: Multiple Formatting

<p>
    <strong>Peringatan:</strong> 
    <em>Jangan</em> menggunakan 
    <del>password lemah</del> 
    <ins>password yang kuat</ins>!
</p>Code language: HTML, XML (xml)

Contoh 4: Code dengan Highlight

<p>Fungsi <code><mark>console.log()</mark></code> untuk debugging.</p>Code language: HTML, XML (xml)

Styling Format Teks dengan CSS

Custom Bold

<style>
    .bold-custom {
        font-weight: 700;
        color: #2c3e50;
    }
</style>

<p class="bold-custom">Teks bold dengan warna custom</p>Code language: HTML, XML (xml)

Custom Italic

<style>
    .italic-custom {
        font-style: italic;
        color: #7f8c8d;
        letter-spacing: 0.5px;
    }
</style>

<p class="italic-custom">Teks italic dengan spacing</p>Code language: HTML, XML (xml)

Text Transform

<style>
    .uppercase { text-transform: uppercase; }
    .lowercase { text-transform: lowercase; }
    .capitalize { text-transform: capitalize; }
</style>

<p class="uppercase">teks uppercase</p>
<p class="lowercase">TEKS LOWERCASE</p>
<p class="capitalize">teks capitalize setiap kata</p>Code language: HTML, XML (xml)

Text Decoration

<style>
    .underline { text-decoration: underline; }
    .overline { text-decoration: overline; }
    .line-through { text-decoration: line-through; }
    .no-decoration { text-decoration: none; }
</style>Code language: HTML, XML (xml)

Font Weight

<style>
    .thin { font-weight: 100; }
    .light { font-weight: 300; }
    .normal { font-weight: 400; }
    .medium { font-weight: 500; }
    .semibold { font-weight: 600; }
    .bold { font-weight: 700; }
    .extrabold { font-weight: 800; }
    .black { font-weight: 900; }
</style>Code language: HTML, XML (xml)

Best Practices Format Teks HTML

1. Gunakan Tag Semantic

<!-- Kurang baik: Hanya visual -->
<p><b>Peringatan:</b> Simpan pekerjaan Anda!</p>

<!-- Baik: Semantic meaning -->
<p><strong>Peringatan:</strong> Simpan pekerjaan Anda!</p>Code language: HTML, XML (xml)

2. Jangan Overuse Formatting

<!-- Kurang baik: Terlalu banyak formatting -->
<p><strong><em><u>Teks dengan terlalu banyak format</u></em></strong></p>

<!-- Baik: Formatting seperlunya -->
<p><strong>Teks penting</strong> dengan penjelasan normal.</p>Code language: HTML, XML (xml)

3. Konsisten dalam Penggunaan

<!-- Konsisten menggunakan <strong> untuk emphasis -->
<p><strong>Poin 1:</strong> Penjelasan poin pertama.</p>
<p><strong>Poin 2:</strong> Penjelasan poin kedua.</p>
<p><strong>Poin 3:</strong> Penjelasan poin ketiga.</p>Code language: HTML, XML (xml)

4. Accessibility

<!-- Baik untuk screen reader -->
<p><strong>Catatan penting:</strong> <em>Jangan</em> lupa backup data.</p>

<!-- Gunakan aria-label jika perlu -->
<span class="icon-warning" aria-label="Peringatan">⚠️</span>Code language: HTML, XML (xml)

5. SEO-Friendly

<!-- Gunakan <strong> dan <em> untuk kata kunci penting -->
<p>
    Belajar <strong>HTML</strong> adalah langkah pertama dalam 
    <em>web development</em>. <strong>Format teks HTML</strong> 
    membantu membuat konten yang lebih menarik.
</p>Code language: HTML, XML (xml)

Contoh Praktis Lengkap

Contoh 1: Article Content

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Artikel dengan Format Teks</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        
        strong {
            color: #2c3e50;
            font-weight: 700;
        }
        
        em {
            color: #7f8c8d;
        }
        
        code {
            background-color: #f5f5f5;
            padding: 2px 6px;
            border-radius: 3px;
            font-family: 'Courier New', monospace;
            color: #e74c3c;
        }
        
        mark {
            background-color: #ffeb3b;
            padding: 2px 4px;
        }
        
        blockquote {
            border-left: 4px solid #3498db;
            padding-left: 20px;
            margin: 20px 0;
            font-style: italic;
            color: #555;
        }
    </style>
</head>
<body>
    <article>
        <h1>Panduan Belajar Web Development</h1>
        
        <p>
            <strong>Web development</strong> adalah skill yang <em>sangat</em> 
            dibutuhkan di era digital. Untuk menjadi web developer, Anda perlu 
            menguasai <mark>HTML, CSS, dan JavaScript</mark>.
        </p>
        
        <h2>Langkah-Langkah Belajar</h2>
        
        <p>
            <strong>1. Mulai dengan HTML</strong><br>
            HTML adalah <abbr title="HyperText Markup Language">HTML</abbr> 
            fondasi dari web development. Pelajari tag-tag dasar seperti 
            <code>&lt;div&gt;</code>, <code>&lt;p&gt;</code>, dan 
            <code>&lt;a&gt;</code>.
        </p>
        
        <p>
            <strong>2. Lanjut ke CSS</strong><br>
            <abbr title="Cascading Style Sheets">CSS</abbr> digunakan untuk 
            styling. Anda akan belajar tentang colors, fonts, dan layouts.
        </p>
        
        <p>
            <strong>3. Kuasai JavaScript</strong><br>
            JavaScript membuat website <em>interaktif</em> dan <em>dinamis</em>.
        </p>
        
        <blockquote>
            <p>
                "The best way to learn web development is by building projects."
            </p>
            <footer>— <cite>Anonymous Developer</cite></footer>
        </blockquote>
        
        <h2>Tips Penting</h2>
        
        <p>
            <strong>Catatan:</strong> <del>Jangan</del> <ins>Selalu</ins> 
            praktik coding setiap hari. Konsistensi adalah <mark>kunci sukses</mark>.
        </p>
        
        <p>
            <small>Artikel ini terakhir diupdate: 15 Januari 2024</small>
        </p>
    </article>
</body>
</html>Code language: HTML, XML (xml)

Contoh 2: Product Description

<div class="product">
    <h2><strong>Laptop Gaming Pro</strong></h2>
    
    <p class="price">
        <del>Rp 15.000.000</del> 
        <ins><strong>Rp 12.000.000</strong></ins>
        <small>(Hemat 20%)</small>
    </p>
    
    <p>
        Laptop gaming dengan performa <em>luar biasa</em>. 
        Dilengkapi dengan <strong>processor Intel Core i7</strong> 
        dan <strong>RAM 16GB DDR4</strong>.
    </p>
    
    <h3>Spesifikasi:</h3>
    <ul>
        <li><strong>Processor:</strong> Intel Core i7 Gen 12</li>
        <li><strong>RAM:</strong> 16GB DDR4</li>
        <li><strong>Storage:</strong> 512GB NVMe SSD</li>
        <li><strong>Display:</strong> 15.6" FHD 144Hz</li>
    </ul>
    
    <p>
        <mark>Stok terbatas!</mark> 
        <strong>Pesan sekarang</strong> dan dapatkan <em>gratis mouse gaming</em>.
    </p>
</div>Code language: HTML, XML (xml)

Contoh 3: Documentation

<section class="documentation">
    <h2>API Documentation</h2>
    
    <h3>Function: <code>getUserData()</code></h3>
    
    <p>
        <strong>Description:</strong> Mengambil data user dari database.
    </p>
    
    <p>
        <strong>Parameters:</strong>
    </p>
    <ul>
        <li><code>userId</code> <em>(string)</em> - ID user yang akan diambil</li>
        <li><code>includeProfile</code> <em>(boolean)</em> - Include profile data</li>
    </ul>
    
    <p>
        <strong>Returns:</strong> <code>Promise&lt;User&gt;</code>
    </p>
    
    <p>
        <strong>Example:</strong>
    </p>
    
    <pre><code>
const user = await getUserData('user123', true);
console.log(user.name);
    </code></pre>
    
    <p>
        <strong>Note:</strong> <mark>Fungsi ini memerlukan authentication token</mark>.
    </p>
</section>Code language: HTML, XML (xml)

Kesalahan Umum yang Harus Dihindari

1. Menggunakan Tag untuk Styling Saja

<!-- Salah: Menggunakan <b> untuk semua bold -->
<p><b>Peringatan penting!</b></p>

<!-- Benar: Gunakan <strong> untuk teks penting -->
<p><strong>Peringatan penting!</strong></p>Code language: HTML, XML (xml)

2. Nested Tag yang Salah

<!-- Salah: Urutan penutupan salah -->
<p><strong><em>Teks</strong></em></p>

<!-- Benar: Urutan penutupan yang benar -->
<p><strong><em>Teks</em></strong></p>Code language: HTML, XML (xml)

3. Overuse Underline

<!-- Salah: Underline bisa dikira link -->
<p>Ini adalah <u>teks penting</u> yang perlu diperhatikan.</p>

<!-- Benar: Gunakan <strong> atau <mark> -->
<p>Ini adalah <strong>teks penting</strong> yang perlu diperhatikan.</p>Code language: HTML, XML (xml)

4. Tidak Menggunakan Semantic Tags

<!-- Kurang baik: Hanya styling -->
<span style="font-weight: bold;">Teks penting</span>

<!-- Baik: Semantic HTML -->
<strong>Teks penting</strong>Code language: HTML, XML (xml)

5. Terlalu Banyak Formatting

<!-- Salah: Overformatting -->
<p>
    <strong><em><u><mark>Teks dengan terlalu banyak format</mark></u></em></strong>
</p>

<!-- Benar: Formatting seperlunya -->
<p><strong>Teks penting</strong> dengan penjelasan normal.</p>Code language: HTML, XML (xml)

Kesimpulan

Format teks HTML adalah elemen penting dalam pembuatan website yang menarik dan mudah dibaca. Memahami cara menggunakan format teks HTML dengan benar akan meningkatkan kualitas konten, SEO, dan user experience.

Poin-poin penting:

 untuk teks penting (semantic bold)
 untuk penekanan (semantic italic)
 dan  untuk styling visual
 untuk highlight teks
<code> untuk kode inline
<del> dan <ins> untuk revisi
 dan  untuk subscript/superscript
Gunakan tag semantic untuk SEO dan accessibility
Hindari overuse formatting
Kombinasikan dengan CSS untuk styling advanced
Format teks HTML meningkatkan readability dan engagement

Dengan menguasai format teks HTML, Anda dapat membuat konten website yang lebih profesional, SEO-friendly, dan user-friendly!

Cara Mengatur Format Teks HTML (Bold, Italic, Underline, dll)

Daftar isi

Apa Itu Format Teks HTML?

Fungsi Format Teks HTML

Tag Bold HTML

1. Tag <strong> (Semantic Bold)

2. Tag <b> (Visual Bold)

Perbedaan <strong> vs <b>

Tag Italic HTML

1. Tag <em> (Semantic Italic)

2. Tag <i> (Visual Italic)

Perbedaan <em> vs <i>

Tag Underline HTML

Tag <u> (Underline)

Alternative: CSS Text Decoration

Tag Strikethrough HTML

1. Tag <del> (Deleted Text)

2. Tag <s> (Strikethrough)

3. Tag <strike> (Deprecated)

Tag Subscript dan Superscript

1. Tag <sub> (Subscript)

2. Tag <sup> (Superscript)

Tag Mark HTML

Tag <mark> (Highlight)

Tag Small dan Big

1. Tag <small> (Small Text)

2. Tag <big> (Deprecated)

Tag Code dan Pre

1. Tag <code> (Inline Code)

2. Tag <pre> (Preformatted Text)

3. Kombinasi <pre> dan <code>

Tag Quotation

1. Tag <q> (Inline Quote)

2. Tag <blockquote> (Block Quote)

3. Tag <cite> (Citation)

Tag Abbreviation dan Definition

1. Tag <abbr> (Abbreviation)

2. Tag <dfn> (Definition)

Tag Insert

Tag <ins> (Inserted Text)

Kombinasi Format Teks HTML

Contoh 1: Bold + Italic

Contoh 2: Bold + Underline

Contoh 3: Multiple Formatting

Contoh 4: Code dengan Highlight

Styling Format Teks dengan CSS

Custom Bold

Custom Italic

Text Transform

Text Decoration

Font Weight

Best Practices Format Teks HTML

1. Gunakan Tag Semantic

2. Jangan Overuse Formatting

3. Konsisten dalam Penggunaan

4. Accessibility

5. SEO-Friendly

Contoh Praktis Lengkap

Contoh 1: Article Content

Contoh 2: Product Description

Contoh 3: Documentation

Kesalahan Umum yang Harus Dihindari

1. Menggunakan Tag untuk Styling Saja

2. Nested Tag yang Salah

3. Overuse Underline

4. Tidak Menggunakan Semantic Tags

5. Terlalu Banyak Formatting

Kesimpulan

1 HTML Dasar (Pemula)

2 HTML Menengah

3 HTML Lanjutan

4 HTML Mahir

5 HTML Ahli (Bonus & Tips)

Related article!

Comments

Leave comment

1. Tag `<strong>` (Semantic Bold)

2. Tag `<b>` (Visual Bold)

Perbedaan `<strong>` vs `<b>`

1. Tag `<em>` (Semantic Italic)

2. Tag `<i>` (Visual Italic)

Perbedaan `<em>` vs `<i>`

Tag `<u>` (Underline)

1. Tag `<del>` (Deleted Text)

2. Tag `<s>` (Strikethrough)

3. Tag `<strike>` (Deprecated)

1. Tag `<sub>` (Subscript)

2. Tag `<sup>` (Superscript)

Tag `<mark>` (Highlight)

1. Tag `<small>` (Small Text)

2. Tag `<big>` (Deprecated)

1. Tag `<code>` (Inline Code)

2. Tag `<pre>` (Preformatted Text)

3. Kombinasi `<pre>` dan `<code>`

1. Tag `<q>` (Inline Quote)

2. Tag `<blockquote>` (Block Quote)

3. Tag `<cite>` (Citation)

1. Tag `<abbr>` (Abbreviation)

2. Tag `<dfn>` (Definition)

Tag `<ins>` (Inserted Text)