Paragraf em strong dan b i
Tandai prosa dengan penekanan semantik dan tag tebal.
Paragraf em strong dan b i adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.
Elemen Paragraf
Elemen <p> menandai sebuah blok teks sebagai paragraf:
<p>This is a paragraph of text. Browsers add margin above and below paragraphs automatically.</p>
<p>This is a second paragraph. It starts on a new line.</p>Penekanan Semantik: em
Elemen <em> menandai teks dengan penekanan — yaitu kata yang mengubah makna kalimat:
<p>I <em>never</em> said she stole the money.</p>
<p>I never said <em>she</em> stole the money.</p>
<!-- Same words, different meaning depending on which is emphasized -->
<!-- Screen readers change inflection on em content -->Kepentingan Semantik: strong
Elemen <strong> menandai teks sebagai sangat penting:
<p><strong>Warning:</strong> Do not enter this area without protective equipment.</p>
<p>The deadline is <strong>Friday at 5 PM</strong>.</p>
<!-- strong = this content is more important than surrounding text -->
<!-- Screen readers may emphasize strong content differently -->em vs i
<em> dan <i> sama-sama ditampilkan miring secara bawaan, tetapi memiliki makna yang berbeda:
<em>— penekanan semantik (paling sering digunakan)<i>— huruf miring presentasional: istilah teknis, judul, frasa asing
<p>The ship was called <i>HMS Beagle</i>.</p>
<p>The CSS property is <i>display</i>.</p>
<p><em>Please</em> be careful.</p>strong vs b
<strong> dan <b> sama-sama ditampilkan tebal secara bawaan, tetapi berbeda secara semantik:
<strong>— kepentingan semantik (paling sering digunakan)<b>— menarik perhatian tanpa menyiratkan kepentingan: kata kunci, nama produk
<p>The product is called <b>ProSuite</b>.</p>
<p><b>Note:</b> All fields are required.</p>
<p>This step is <strong>critical</strong> — do not skip it.</p>Menyarangkan em dan strong
Anda dapat menyarangkan elemen penekanan untuk menghasilkan efek gabungan:
<p>This is <strong>very <em>important</em></strong>.</p>
<!-- strong (important) wraps em (stressed) -->
<!-- Result: bold italic text with both semantic meanings -->Paragraf Tidak Dapat Disarangkan
Sebuah elemen <p> tidak dapat berisi elemen <p> lainnya:
<!-- INVALID: nested paragraphs -->
<p>First paragraph <p>nested paragraph</p></p>
<!-- The browser auto-closes the first p before the second opens -->
<!-- Always use separate paragraph tags -->
<p>First paragraph.</p>
<p>Second paragraph.</p>Inline vs Block dalam Paragraf
<p> adalah elemen block yang hanya dapat berisi elemen inline:
<!-- Valid: inline content in p -->
<p>Text with <strong>bold</strong> and <a href="/">a link</a>.</p>
<!-- INVALID: block element inside p -->
<p>
<div>A div inside p is invalid</div>
</p>Aksesibilitas Penekanan
Alasan markup semantik penting bagi teknologi bantu:
- Pembaca layar mengucapkan
<em>dengan intonasi yang berubah dalam beberapa implementasi <strong>mungkin dibaca dengan penekanan tambahan- Teks tebal atau miring yang hanya dibuat dengan CSS (misalnya
font-style: italicpada span) tidak memiliki makna semantik bagi pembaca layar
Kesalahan Umum
Hindari kesalahan markup teks yang umum berikut:
<!-- Bad: using br for paragraph spacing -->
First paragraph<br><br>Second paragraph
<!-- Good: use p elements -->
<p>First paragraph</p>
<p>Second paragraph</p>
<!-- Bad: bold for visual style only -->
<b>Heading Text</b>
<!-- Good: use h elements for headings -->
<h2>Heading Text</h2>Kapan Menggunakan Setiap Elemen
Panduan pengambilan keputusan singkat:
- Potongan teks prosa →
<p> - Menekankan kata yang mengubah makna →
<em> - Menandai informasi penting →
<strong> - Memiringkan judul atau istilah teknis →
<i> - Menyoroti kata kunci tanpa menyiratkan kepentingan →
<b>
Pemeriksaan Singkat
Elemen mana yang harus Anda gunakan untuk menandai teks sebagai sangat penting?
Ringkasan: Semantik Teks
Ringkasan markup teks:
<p>— paragraf prosa<em>— penekanan, mengubah makna kalimat<strong>— kepentingan yang kuat<i>— huruf miring presentasional (judul, istilah)<b>— menarik perhatian tanpa menyiratkan kepentingan- Jangan pernah menggunakan
<br><br>untuk memberi jarak antarparagraf
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Paragraf em strong dan b i” gratis?
Ya — teks lengkap “Paragraf em strong dan b i” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Paragraf em strong dan b i”?
Tandai prosa dengan penekanan semantik dan tag tebal. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML Academy?
Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Paragraf em strong dan b i” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Heading h1-h6 dan Hierarkinya
- Paragraf em strong dan b i
- br hr blockquote dan pre
- Elemen span dan div