วิธีใช้งาน Element <span> ใน HTML

เรียนรู้วิธีใช้งาน Element <span> ใน HTML

Element <span> ใน HTML เป็น Container แบบ Inline ทั่วไป ใช้สำหรับมาร์กอัปข้อความ มักใช้ภายใน Element อื่น

<span> มักใช้เพื่อทำให้ส่วนหนึ่งของข้อความมีลักษณะต่างจากส่วนที่เหลือ

ตัวอย่าง:

<p>My hat is <span style="color:red">red.</span></p>

คุณยังสามารถใช้ <span> จัดกลุ่ม Element ที่ใช้ค่าสไตล์เหมือนกันผ่าน class ได้

เช่น เขียนสูตรอาหาร ต้องการเน้นทุกคำที่เป็นส่วนผสมด้วยสีเฉพาะ:

<p> To make my delicious garlic butter you need just four ingredients, <span class="ingredient">butter</span>, <span class="ingredient">garlic</span>, <span class="ingredient">salt</span> and <span class="ingredient">black pepper.</span> </p>

จากนั้นสร้าง CSS Class:

.ingredient { color: green; }

ประโยชน์ของ Class ที่นำกลับมาใช้ซ้ำได้ คือ หากเปลี่ยนใจเกี่ยวกับลักษณะการแสดงผลของคำส่วนผสม 只要เปลี่ยนสไตล์ใน Class .ingredient ครั้งเดียว ผลจะไปถึงทุก Element <span> ที่ใช้ Class นี้

เช่น ต้องการใช้ตัวหนาแทนสี:

.ingredient { font-weight: bold; }

ลักษณะ Generic ของ <span> ทำให้เป็น Element Non-semantic (ไม่มีความหมายเชิงความหมาย) จึงควรใช้ก็ต่อเมื่อไม่มี Element อื่นที่เหมาะสมกว่า

<span> คล้ายกับ <div> แต่ต่างกันที่ <span> เป็น Inline Element ในขณะที่ <div> เป็น Block-level Element โดยคุณสามารถอัปเดตการแสดงผลเริ่มต้นด้วย CSS ได้