Variasi Huruf dalam HTML

Ragam Tipografi HTML

1. Penekanan dan Format Dasar

• Teks dengan penekanan (miring) - Makna tambahan: Memberikan penekanan penting dalam konteks dokumen.
• Teks dengan penekanan kuat (tebal) - Makna tambahan: Penekanan lebih kuat, biasanya untuk hal yang sangat penting.
• Teks tebal (tanpa makna tambahan) - Tanpa makna tambahan: Hanya untuk membuat teks tebal secara visual.
• Teks miring (tanpa makna tambahan) - Tanpa makna tambahan: Hanya untuk membuat teks miring secara visual.
• Teks digarisbawahi - Memberikan garis bawah pada teks.
• Teks dicoret - Menunjukkan teks yang tidak lagi berlaku.
• Teks highlight - Secara default, elemen mark di HTML memiliki warna latar belakang kuning karena itulah gaya bawaan (default styling) yang diberikan oleh browser.

Kode CSS yang menggunakan <pre> dan <code> (Menjaga format kode) untuk mengubah tampilan elemen <mark>:

    <style>            
        mark {
            background-color: green; /* HIJAU, WARNA LATAR BELAKANG TEKS HIGHLIGHT */
            color: white; /* PUTIH, WARNA TEKS */ 
        }
    </style>        
            

mark { background-color: green; color: white; } Menggunakan Entitas HTML <code> </code>, Jika Ditulis dalam Paragraf

Contoh dengan atribut style (tanpa CSS terpisah):

Teks ini memiliki latar belakang kuning 1 baris penuh.

Teks ini memiliki latar belakang biru 1 baris penuh dan teks putih.

Menggunakan <mark> (Standar untuk Highlight Teks):

Teks ini memiliki latar belakang kuning hanya pada bagian tertentu.

Menggunakan <span> untuk Warna Fleksibel:

Teks ini memiliki latar belakang biru hanya pada teks tertentu.

Light Blue - Biru muda

Light Green - Hijau muda

Light Coral - Merah muda pudar

Light Salmon - Jingga salmon muda

Light Pink - Merah muda lembut

Lavender - Ungu pastel

Khaki - Kuning kecoklatan

Peach Puff - Peach lembut

Thistle - Ungu keabu-abuan

Pale Goldenrod - Kuning keemasan pudar

2. Heading

• Heading 1:

  Heading 1

• Heading 2:

  Heading 2

• Heading 3:

  Heading 3

• Heading 4:

  Heading 4

• Heading 5:

  Heading 5

• Heading 6:

  Heading 6

3. Gaya Tambahan

• H₂O (Subscript) - Teks kecil di bawah garis dasar.
• E = mc² (Superscript) - Teks kecil di atas garis dasar.
• Contoh kode program - Menampilkan teks dalam gaya monospace.
• Tekan tombol: Ctrl + C - Gaya khusus untuk tombol keyboard.
• Teks kecil - Menampilkan teks dengan ukuran lebih kecil.
• Teks yang dihapus - Menunjukkan teks yang telah dihapus.
• Teks yang disisipkan - Menunjukkan teks yang baru ditambahkan.

4. Kutipan dan Referensi

"Ini adalah contoh kutipan panjang."

Sumber: Nama Buku atau Artikel - Menunjukkan sumber atau referensi.

5. Tag Generik

• Teks berwarna merah - Memberikan warna pada teks.
• Teks dengan ukuran lebih besar - Mengubah ukuran teks.

6. Elemen HTML dengan Atribut Style Tanpa Kelas CSS

Contohnya:

Teks ini tetap menggunakan ukuran standar karena tidak memiliki class tersebut.

Teks ini lebih besar karena memiliki class "large-text".

Teks ini berukuran lebih besar.

Paragraf ini menggunakan font Arial, memiliki jarak antar baris 1.6, dan memiliki margin 20px.

Teks ini berwarna merah.

Teks ini berwarna merah dan berukuran lebih besar.

20250116aa