Heading dalam HTML
Heading digunakan untuk membuat judul dan sub-judul. HTML menyediakan 6 level heading dari <h1> sampai <h6>
<h1>Heading Level 1 - Paling Besar</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6 - Paling Kecil</h6>Aturan Penggunaan Heading:
- Gunakan
<h1>hanya sekali per halaman untuk judul utama - Gunakan heading secara berurutan (jangan loncat dari h1 ke h3)
- Heading penting untuk SEO dan aksesibilitas
Paragraf dan Line Break
Paragraf (<p>):
<p>Ini adalah paragraf pertama. Paragraf digunakan untuk menampilkan blok teks.</p>
<p>Ini adalah paragraf kedua. Setiap paragraf akan memiliki jarak dengan paragraf lainnya.</p>Line Break (<br>):
<p>Baris pertama<br>
Baris kedua<br>
Baris ketiga</p>Horizontal Rule (<hr>):
<p>Konten di atas garis</p>
<hr>
<p>Konten di bawah garis</p>Text Formatting
HTML menyediakan berbagai tag untuk memformat teks:
1. Bold dan Strong
<b>Teks tebal (bold)</b>
<strong>Teks penting (strong)</strong>Note: <strong> memiliki makna semantik yang lebih kuat (penting), sedangkan <b> hanya visual.
2. Italic dan Emphasis
<i>Teks miring (italic)</i>
<em>Teks dengan penekanan (emphasis)</em>3. Underline dan Strikethrough
<u>Teks bergaris bawah</u>
<s>Teks tercoret</s>
<del>Teks yang dihapus</del>4. Subscript dan Superscript
<p>H<sub>2</sub>O adalah rumus kimia air</p>
<p>E = mc<sup>2</sup> adalah rumus Einstein</p>5. Small dan Mark
<small>Teks kecil</small>
<mark>Teks yang disorot/highlight</mark>Blockquote dan Quote
Blockquote (kutipan panjang):
<blockquote cite="https://source.com">
<p>Ini adalah kutipan panjang dari sumber tertentu. Blockquote biasanya ditampilkan dengan indentasi.</p>
</blockquote>Quote inline:
<p>Seperti yang dikatakan Einstein, <q>Imajinasi lebih penting daripada pengetahuan.</q></p>Preformatted Text dan Code
Preformatted (<pre>):
<pre>
Teks ini akan ditampilkan
persis seperti yang ditulis,
termasuk spasi dan baris baru.
</pre>Code:
<p>Untuk mencetak teks di JavaScript, gunakan <code>console.log()</code></p>
<pre><code>
function halo() {
console.log("Hello World");
}
</code></pre>Address dan Abbreviation
Address:
<address>
Ditulis oleh: John Doe<br>
Email: [email protected]<br>
Alamat: Jakarta, Indonesia
</address>Abbreviation:
<p><abbr title="HyperText Markup Language">HTML</abbr> adalah bahasa markup untuk web.</p>Contoh Lengkap
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Text Formatting HTML</title>
</head>
<body>
<h1>Belajar Pemrograman Web</h1>
<h2>Pengenalan</h2>
<p>Selamat datang di tutorial <strong>HTML dasar</strong>. Dalam tutorial ini, kita akan belajar berbagai cara memformat teks.</p>
<h2>Apa itu HTML?</h2>
<p><abbr title="HyperText Markup Language">HTML</abbr> adalah bahasa markup yang digunakan untuk membuat website.</p>
<blockquote>
<p>Cara terbaik untuk belajar programming adalah dengan <em>praktik langsung</em>.</p>
</blockquote>
<h3>Rumus Matematika</h3>
<p>Luas lingkaran: π × r<sup>2</sup></p>
<p>Rumus kimia air: H<sub>2</sub>O</p>
<hr>
<h3>Catatan Penting</h3>
<p><mark>Jangan lupa praktik setiap hari!</mark></p>
<address>
Kontak: [email protected]
</address>
</body>
</html>Latihan Artikel 2:
- Buat halaman dengan struktur heading yang benar (h1, h2, h3)
- Tulis paragraf dengan berbagai format teks (bold, italic, underline)
- Tambahkan kutipan menggunakan blockquote
- Gunakan subscript dan superscript untuk rumus matematika atau kimia
💬 0 Komentars
Belum Ada Komentar
Jadilah yang pertama membagikan pemikiran Anda!