PricingLoginStart free
HTML Academy · Pelajaran

Perenggan, em, strong dan b i

Tandakan prosa dengan penegasan semantik dan tag tebal.

Pelajaran 2 daripada 413 langkah

Perenggan, em, strong dan b i ialah pelajaran HTML Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran HTML Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.

Elemen Perenggan

Elemen <p> menandakan satu blok teks sebagai perenggan:

<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> menandakan teks dengan penekanan ujaran — perkataan yang mengubah maksud ayat:

<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> menandakan 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 berbanding i

<em> dan <i> kedua-duanya dipaparkan dalam huruf condong secara lalai, tetapi mempunyai maksud yang berbeza:

  • <em> — penekanan ujaran semantik (gunakan paling kerap)
  • <i> — huruf condong persembahan: istilah teknikal, tajuk, 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 berbanding b

<strong> dan <b> kedua-duanya dipaparkan dalam huruf tebal secara lalai, tetapi berbeza dari segi semantik:

  • <strong> — kepentingan semantik (gunakan paling kerap)
  • <b> — menarik perhatian tanpa membayangkan 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 boleh menyarangkan elemen penekanan untuk mendapatkan kesan gabungan:

<p>This is <strong>very <em>important</em></strong>.</p>
<!-- strong (important) wraps em (stressed) -->
<!-- Result: bold italic text with both semantic meanings -->

Perenggan Tidak Boleh Disarang

Elemen <p> tidak boleh mengandungi <p> yang lain:

<!-- 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>

Sebaris berbanding Blok dalam Perenggan

<p> ialah elemen blok yang hanya boleh mengandungi elemen sebaris:

<!-- 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>

Kebolehcapaian Penekanan

Mengapa penandaan semantik penting untuk teknologi bantuan:

  • Pembaca skrin menyebut <em> dengan intonasi yang berubah dalam sesetengah pelaksanaan
  • <strong> mungkin dibaca dengan penekanan tambahan
  • Huruf tebal atau condong yang dibuat dengan CSS sahaja (contohnya font-style: italic pada span) tidak mempunyai maksud semantik untuk pembaca skrin

Kesilapan Lazim

Elakkan kesilapan penandaan teks yang lazim ini:

<!-- 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>

Bila Hendak Menggunakan Setiap Elemen

Panduan membuat keputusan pantas:

  • Sekumpulan teks prosa → <p>
  • Tekankan perkataan yang mengubah maksud → <em>
  • Tandakan maklumat penting → <strong>
  • Jadikan tajuk atau istilah teknikal condong → <i>
  • Serlahkan kata kunci tanpa membayangkan kepentingan → <b>

Semakan Pantas

Elemen manakah yang patut anda gunakan untuk menandakan teks sebagai sangat penting?

Jawab dalam pelajaran interaktif

Imbas Kembali: Semantik Teks

Ringkasan penandaan teks:

  • <p> — perenggan prosa
  • <em> — penekanan ujaran yang mengubah maksud ayat
  • <strong> — kepentingan tinggi
  • <i> — huruf condong persembahan (tajuk, istilah)
  • <b> — menarik perhatian tanpa menyatakan kepentingan
  • Jangan sesekali gunakan <br><br> untuk jarak antara perenggan
Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus
40
Pelajaran
159
Mula belajar secara percumaLihat kursus penuh

Soalan Lazim

Adakah pelajaran “Perenggan, em, strong dan b i” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran HTML Academy, termasuk “Perenggan, em, strong dan b i”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Perenggan, em, strong dan b i”?

Tandakan prosa dengan penegasan semantik dan tag tebal. Anda berlatih HTML Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan HTML Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran HTML Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Perenggan, em, strong dan b i” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

  1. Pengepala h1-h6 dan Hierarkinya
  2. Perenggan, em, strong dan b i
  3. br, hr, blockquote dan pre
  4. Elemen span dan div
← Kembali ke HTML Academy