แท็ก span สำหรับส่วนข้อความใน HTML

คุณทราบแล้วว่าเพื่อทำให้ส่วนของข้อความบางส่วน เช่น เป็นตัวหนา - ควรใช้แท็ก b อย่างไรก็ตาม จะทำอย่างไรถ้าต้องการให้ส่วนของข้อความเป็นสีแดง? สำหรับกรณีเช่นนี้ ไม่มีแท็กที่คล้ายกับแท็ก b

แต่มีแท็กพิเศษ span - โดยตัวมันเองไม่ได้ทำอะไรเลย แต่สามารถใช้ CSS styles กับมันได้ ซึ่งจะช่วยให้เราเพิ่มเอฟเฟกต์ที่ต้องการให้กับส่วนของข้อความ

ลองดูตัวอย่าง สมมติว่าเรามีข้อความบางอย่าง:

<p>
	This is a paragraph with text.
</p>

สมมติว่าเราต้องการทำให้คำว่า "text" เป็นสีแดง สำหรับสิ่งนี้ ให้ห่อส่วนข้อความนั้นด้วยแท็ก span และให้คลาสบางอย่างกับแท็กนี้:

<p>
	This is a paragraph with <span class="red">text</span>.
</p>

ทีนี้ก็กำหนดสีแดงให้กับองค์ประกอบที่มีคลาสดังกล่าว:

.red {
	color: red;
}

มีโค้ดต่อไปนี้:

<p>
	Lorem ipsum <span class="xxx">dolor sit</span> amet.
</p>
<p>
	<span class="xxx">Lorem ipsum</span> dolor sit amet.
</p>

ทำให้องค์ประกอบที่มีคลาส xxx มีขนาด 30px