Tutorial HTML Part 6 - Mengenal Format Teks Pada HTML

Pada tutorial sebelumnya, kalian telah mengenal tentang attribut style. Selain dengan attribut ini, HTML juga memiliki elemen-elemen khusus yang dapat kita gunakan untuk mengedit format penulisan teks atau biasa disebut elemen Formatting. Berikut beberapa elemen-elemen formatting yang harus kamu ketahui :
  • <b> - Teks tebal (bold)
  • <strong> - Teks penting
  • <i>  - Teks miring (italic)
  • <em>  - Teks yang ditekankan
  • <mark> - Menandai teks
  • <big> - Memperbesar ukuran teks
  • <small> - Memperkecil ukuran teks
  • <del> - Memberi efet garis tengah teks
  • <ins> - Membri efek garis bawah teks
  • <u> - Memberi efek garis bawah teks (underline)
  • <sub> - Memberi efek subscript
  • <sup> - Memberi efek superscript

ELEMEN BOLD DAN STRONG

Elemen bold dan elemen strong pada browser akan memiliki tampilan yang sama yaitu tebal. Perbedaannya adalah untuk teks yang dibuat dengan elemet strong memiliki makna teks penting atau teks yang ditekankan sedangkan untuk bold tidak memiliki makna apa-apa. Elemen bold menggunakan tag <b> dan elemen strong menggunakan tag <strong>.
<!DOCTYPE html>
<html>
<head>
    <title>Bold dan strong</title>
</head>
<body>
    <i> Ini adalah teks italic </i><br>
    <em> Ini adalah teks emphasized</em>
</body>
</html>

ELEMEN ITALIC DAN EMPHASIZED

Sama halnya dengan Bold dan Strong, Italic dan Mmphasized juga ditampilkan dengan bentuk yang sama pada browser yaitu teks miring. Perbedaannya juga terletak pada maknanya, Emphasized memiliki makna teks penting sedangkan Italic tidak memiliki makna apa-apa hanyak teks miring biasa. Tag yang digunakan untuk Italic adalah tag <i> dan untuk Mmphasized adalah tag <em>.
<!DOCTYPE html>
<html>
<head>
    <title>Bold dan strong</title>
</head>
<body>
    <b> Ini adalah teks bold </b><br>
    <strong> Ini adalah teks strong</strong>
</body>
</html>


Gunakan <Strong> dan <em> hanya untuk teks penting saja. Tag tersebut akan memudahkan robot mesin pencari untuk melakukan indeks terhadap halaman web dan lebih mudah menemukan kata kunci yang sesuai pada kotak pencarian.

ELEMEN INSERT DAN UNDERLINE

Pada browser, elemen insert dan underline memiliki tampilan yang sama yaitu memberikan efek garis bawah pada teks. Namun, untuk insert memiliki makna sebagai teks tambahan untuk yang digaris bawahi.
<!DOCTYPE html>

<html>

<head>

    <title>Insert dan Underline</title>

</head>

<body>

    <u> Ini adalah teks underline</u>

    <ins> Ini adalah teks insert</ins>

</body>

</html>

ELEMEN BIG DAN SMALL

Elemen big dan small sama-sama berfungsi untuk mengubah ukuran suatu teks.
HTML Tag Reference.

Postingan terkait:

Belum ada tanggapan untuk "Tutorial HTML Part 6 - Mengenal Format Teks Pada HTML"