HTML 6 : Belajar Teks Formatting
• 10 min read • 4129 views
HTML 6 : Belajar Teks Formatting
Artikel ini akan membahas langkah-langkah penting dalam memahami dan mengimplementasikan formatting teks di HTML. Dalam perjalanan belajar HTML, pemahaman terhadap cara memformat teks sangatlah krusial untuk menciptakan halaman web yang estetis dan mudah dibaca. Dari penggunaan tag dasar seperti `<strong>` dan `<em>` hingga penerapan gaya teks dengan CSS, kita akan menjelajahi beragam elemen HTML yang memungkinkan pengguna untuk mengatur tampilan dan struktur teks pada halaman web mereka. Artikel ini bertujuan memberikan wawasan yang komprehensif tentang teknik-teknik pemformatan teks sehingga pembaca dapat meningkatkan kemampuan mereka dalam merancang konten yang menarik dan profesional menggunakan HTML.
Table of Contents
Membuat Teks Tebal
Dalam HTML, untuk membuat teks tebal, kita dapat menggunakan tag `<b>` atau `<strong>`. Berikut adalah contoh kode HTML yang menunjukkan penggunaan keduanya:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Tebal di HTML</title>
</head>
<body>
<h1>Text Tebal di HTML</h1>
<p>
<strong>Teks formatting itu penting!</strong> Karena dapat membuat tulisan
terlihat lebih menarik sehingga akan membuat <b>pengunjung senang</b>
membacanya.
</p>
</body>
</html>
```Pada contoh di atas, tag `<strong>` digunakan untuk memberikan penekanan yang kuat pada teks "Teks formatting itu penting!" dengan asumsi makna atau urgensi yang tinggi. Di samping itu, tag `<b>` digunakan untuk memberi penekanan visual pada teks "pengunjung senang". Meskipun hasilnya sama-sama tebal, pemilihan tag sebaiknya mengikuti konvensi penggunaan semantik dan mempertimbangkan aksesibilitas.
Baja Juga : HTML Tahap 5
Selain menggunakan tag HTML, penyesuaian lebih lanjut terhadap tampilan teks dapat dilakukan menggunakan CSS. Contoh penggunaan CSS untuk mengatur teks tebal dapat melibatkan properti `font-weight`. Misalnya:
```css
strong {
font-weight: bold;
}
b {
font-weight: bold;
}
```
Dengan pendekatan ini, kita dapat secara konsisten mengatur keberatan teks pada seluruh situs web tanpa perlu mengulang penggunaan tag HTML.
Jangan Lupa Baca : Membuat Heading
Membuat Teks Miring
Pentingnya memahami penggunaan teks miring dalam HTML mencakup aspek estetika dan semantik yang lebih dalam. Dalam dunia desain web, teks miring sering digunakan untuk memberikan penekanan atau menyoroti istilah tertentu, termasuk kata-kata asing atau serapan dari bahasa daerah. Tag `<i>` dan `<em>` digunakan untuk mencapai efek teks miring, namun, perlu diingat bahwa mereka memiliki perbedaan dalam makna semantik.
Tag `<i>` digunakan secara luas untuk memberikan efek visual pada teks, menjadikannya miring tanpa memberikan petunjuk khusus mengenai urgensi atau penekanan. Sebaliknya, tag `<em>` memiliki konotasi yang lebih dalam, menandakan bahwa teks tersebut memerlukan penekanan atau penegasan tertentu. Dengan demikian, pemilihan tag sebaiknya disesuaikan dengan konteks dan tujuan penggunaan teks miring.
Contoh implementasi kode HTML di bawah ini menunjukkan bagaimana tag `<i>` dan `<em>` dapat digunakan bersama untuk mencapai efek teks miring dalam konteks yang beragam:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Miring di HTML</title>
</head>
<body>
<h1>Text Miring di HTML</h1>
<p>
Gunakan <i>teks miring</i> untuk memberi tekanan pada teks,
sehingga akan <em>menarik perhatian</em> pembaca. Ini terutama efektif
ketika digunakan pada <i>istilah asing</i> atau kata serapan dari
<em>bahasa daerah</em>, memastikan bahwa elemen penting dalam konten
dapat ditekankan dengan jelas.
</p>
</body>
</html>
```
Penting juga untuk menyadari bahwa selain menggunakan tag HTML, styling lebih lanjut dapat diterapkan melalui CSS untuk mengontrol penampilan teks miring secara konsisten di seluruh situs web. Dengan demikian, pemahaman yang mendalam tentang kombinasi HTML dan CSS memberikan fleksibilitas yang lebih besar dalam mendesain konten dengan tampilan yang sesuai dengan preferensi dan kebutuhan pengguna.
Membuat Garis Bawah
Pentingnya memahami penggunaan garis bawah dalam HTML melibatkan pemahaman mendalam terkait estetika dan makna semantik teks. Penggunaan tag `<u>` (underline) dan `<ins>` (insert) memberikan cara visual untuk menonjolkan teks dengan garis bawah, namun keduanya memiliki nuansa makna yang perlu diperhatikan.
Tag `<u>` secara umum digunakan untuk memberikan tanda visual pada teks, menunjukkan bahwa bagian tersebut memiliki keberatan atau arti khusus. Sebaliknya, tag `<ins>` memberikan konotasi bahwa teks tersebut adalah penambahan atau penyisipan baru, lebih sering digunakan dalam konteks revisi atau pembaruan.
Contoh kode HTML di bawah ini mencerminkan penggunaan tag `<u>` dan `<ins>` untuk menciptakan efek garis bawah pada teks:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Garis Bawah di HTML</title>
</head>
<body>
<h1>Garis Bawah di HTML</h1>
<p>
Penggunaan <u>teks formatting itu sangat penting</u>, karena dapat membuat teks lebih terlihat
menarik dibandingkan <del>teks biasa</del> <ins>plain text</ins>.
Garis bawah dapat memberikan penekanan tambahan pada teks yang memiliki
arti penting, memberikan petunjuk visual kepada pembaca tentang elemen
yang memerlukan perhatian khusus.
</p>
</body>
</html>
```
Selain menggunakan tag HTML, pengaturan tambahan dapat dilakukan melalui CSS untuk mengontrol aspek-aspek tampilan seperti warna atau gaya garis bawah. Dengan demikian, pemahaman yang lebih mendalam tentang kombinasi HTML dan CSS memungkinkan desainer web untuk mencapai efek yang diinginkan dengan lebih presisi dan konsistensi pada tampilan garis bawah teks.
Membuat Teks Tercoret
Pentingnya pemahaman terkait penggunaan teks tercoret dalam HTML mencakup aspek komunikasi dan penekanan perubahan dalam konten. Teks yang diberi coretan tidak hanya memberikan informasi bahwa suatu teks dihapus, tetapi juga dapat memberikan konteks tentang perbaikan atau revisi yang telah dilakukan.
Dalam HTML, tag `<s>` (strikethrough) dan `<del>` (delete) dapat digunakan untuk menciptakan efek teks tercoret. Namun, perlu dicatat bahwa keduanya memiliki perbedaan dalam makna semantiknya.
Tag `<s>` umumnya digunakan untuk memberikan efek visual pada teks yang dihapus, sementara tag `<del>` memiliki konotasi yang lebih kuat, menandakan bahwa teks tersebut secara resmi dihapus dari konten. Penggunaan tag `<del>` seringkali diikuti dengan penambahan teks baru menggunakan tag `<ins>`, yang menunjukkan penambahan atau revisi.
Contoh implementasi kode HTML di bawah ini menunjukkan penggunaan tag `<s>`, `<del>`, dan `<ins>` untuk menciptakan efek teks tercoret serta perbaikan yang ditandai dengan garis bawah:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Tercoret di HTML</title>
</head>
<body> <h1>Text Tercoret di HTML</h1>
<p>
Coretlah teks yang tidak <s>dibutuhkan</s> terpakai, ini bisa memberitahu
pembaca tentang perbaikan dari teks tersebut. Kadang juga teks <del>tercoret</del>
<ins>yang dicoret</ins>, diperbaiki dengan menambahkan teks bergaris bawah.
</p>
</body>
</html>
```
Selain menggunakan tag HTML, styling tambahan melalui CSS dapat diterapkan untuk mengontrol tampilan teks tercoret dan menyesuaikannya dengan desain keseluruhan situs web. Dengan demikian, pemahaman yang mendalam tentang kombinasi HTML dan CSS memberikan fleksibilitas lebih besar dalam mendesain konten dengan tampilan yang sesuai dengan preferensi dan kebutuhan pengguna.
Membuat Pangkat
Pentingnya memahami penggunaan pangkat dalam HTML terutama berkaitan dengan representasi matematis dan ilmiah yang sering ditemukan dalam konteks rumus atau notasi khusus. Dalam HTML, kita dapat menciptakan efek pangkat menggunakan tag `<sup>` (superscript) untuk pangkat di atas dan `<sub>` (subscript) untuk pangkat di bawah.
Contoh kode HTML di bawah ini mengilustrasikan penggunaan kedua tag tersebut:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Membuat Pangkat di HTML</title>
</head>
<body>
<h1>Membuat Pangkat di HTML</h1>
<p>
Rumus luas persegi adalah S<sup>2</sup>, dimana <i>S</i> adalah sisi dari
persegi. Lalu O<sub>2</sub> adalah rumus kimia dari oksigen.
</p>
</body>
</html>
```Dalam contoh tersebut, tag `<sup>` digunakan untuk menunjukkan pangkat di atas, yang sering digunakan dalam rumus matematika seperti kuadrat. Sementara itu, tag `<sub>` digunakan untuk menunjukkan pangkat di bawah, seperti yang sering ditemui dalam notasi kimia.
Penting untuk diingat bahwa penggunaan tag ini dapat membantu memberikan presentasi visual yang jelas dan akurat terkait rumus atau notasi ilmiah. Selain itu, kombinasi dengan CSS dapat memberikan kontrol tambahan terhadap tampilan pangkat, seperti pengaturan ukuran atau warna teks.
- Tutorial HTML Part 1 : Pengenalan
- Tutorial HTML Part 2 : Tag, Element dan Atribut
- HTML 3 : Tutorial Membuat Paragraf
- HTML 4 : Cara Membuat Heading
- HTML Part 5 : Cara Membuat Komentar
- HTML 6 : Belajar Teks Formatting
- Tutorial HTML 7 : Membuat Link Untuk Menghubungkan Web
- Tutorial HTML 8 : Cara Menampilkan Gambar
- Tutorial HTML 9 : Jenis Atribut tag IMG HTML
- Tutorial HTML 10 : Cara Membuat List
- Tutorial HTML 11 : Cara Membuat Tabel
- Tutorial HTML 12 : Cara Membuat Form
- Tutorial HTML 14 : Cara Menampilkan Video
- Tutorial HTML 13 : Belajar Elemen Semantik
- Tutorial HTML 15 : Cara Menampilkan Audio
- Tutorial HTML 16 : Cara Membuat Website Sederhana
- Membuat Aplikasi Keuangan Pribadi Menggunakan Python dan Django ( Tutorial Lengkap )
Last updated on June 03, 2026
