HTML Span: คู่มือสำหรับผู้เริ่มต้น

แท็ก HTML <span> ให้คุณใช้สไตล์กับส่วนของหน้าเว็บหรือย่อหน้า มักใช้จัดสไตล์ข้อความในย่อหน้า เช่น การเปลี่ยนสีของคำ แท็ก <span> โดยค่าเริ่มต้นไม่มีสไตล์

เมื่อคุณเขียนโปรแกรมใน HTML คุณอาจตัดสินใจว่าต้องการจัดสไตล์บางอย่างบนหน้าเว็บของคุณ ตัวอย่างเช่น คุณอาจต้องการเน้นคำเฉพาะในประโยค หรือลิงก์เฉพาะในรายการลิงก์

นี่คือที่มาของแท็ก HTML <span> <span> เป็น generic inline container ที่ให้คุณวางเนื้อหาบนเอกสารเว็บ แท็ก <span> มักใช้เพื่อวัตถุประสงค์การจัดสไตล์ — โดยเฉพาะการจัดสไตล์ข้อความ

บทช่วยสอนนี้จะอภิปราย พร้อมตัวอย่าง วิธีใช้ HTML <span> จัดสไตล์ elements บนหน้าเว็บ จนจบการอ่านบทช่วยสอนนี้ คุณจะเป็นผู้เชี่ยวชาญในการใช้แท็ก HTML <span> แล้ว

HTML <span> Tag

แท็ก HTML <span> จัดการส่วนของหน้าเว็บ มักใช้ภายใน element <p> เพื่อใช้สไตล์กับส่วนเฉพาะของย่อหน้า ตัวอย่างเช่น คุณสามารถใช้ <span> เปลี่ยนสีของคำในย่อหน้า

ด้วยตัวมันเอง แท็ก <span> ไม่มีการเรนเดอร์หรือค่าเริ่มต้นใดๆ หมายความว่าหากคุณใช้แท็กโดยไม่มี attributes มันจะไม่มีผลต่อการเรนเดอร์หน้าเว็บของคุณ

แท็ก <span> มักใช้กับ CSS เพื่อใช้สไตล์เฉพาะกับ element หรือ elements บนหน้าเว็บ <span> ทำให้คุณง่ายต่อการใช้สไตล์เฉพาะกับหลาย elements บนหน้าเว็บพร้อมกัน

HTML <span> Syntax

แท็ก HTML Span มีทั้งแท็กเปิด (<span>) และแท็กปิด (</span>) เราสามารถใช้ syntax ต่อไปนี้เพื่อใช้แท็ก <span>:

81% of participants stated they felt more confident about their tech job prospects after attending a bootcamp. Get matched to a bootcamp today.

The average bootcamp grad spent less than six months in career transition, from starting a bootcamp to finding their first job.

<span></span>

แท็ก HTML <span> ไม่มี tag-specific attributes ตัวอย่างเช่น แท็ก <img> มี "height" และ "width" เป็น tag-specific attributes <span> ไม่มี attributes ประเภทนี้ เพราะมันพึ่งพา CSS สำหรับการจัดสไตล์ แท็ก <span> รองรับ global HTML attributes ทั้งหมด

คุณสามารถคิดถึงแท็ก <span> ว่าคล้าย <div> ในที่ที่ <span> ไม่มีสไตล์เฉพาะตัว แตแท็ก <div> ใช้กำหนด sections และ blocks ของข้อความ เพราะ <div> เป็น block element <span> ใช้เพื่อใช้สไตล์กับส่วนเฉพาะของเอกสาร เช่น ย่อหน้า

ในส่วนต่อไป เราจะเดินผ่านตัวอย่างบางอย่างที่แสดงวิธีการทำงานของแท็ก HTML <span>

<span> Tag HTML Examples

มาเดินผ่านตัวอย่างโค้ดบางอย่างที่ใช้แท็ก HTML <span> จัดสไตล์ inline elements ใน HTML ตัวอย่างแรกจะใช้ <span> ในย่อหน้า ตัวอย่างที่สองจะใช้ในรายการ

<span> HTML ในย่อหน้า

สมมติเรากำลังออกแบบหน้าเว็บสำหรับร้านเบเกอรี่ท้องถิ่น — Pringle and Sons Bakery หน้าเว็บนี้จะโครงร่างประวัติของร้านเบเกอรี่ เจ้าของร้าน คุณ Pringle ขอให้เราเน้นข้อเท็จจริงสำคัญบางอย่างด้วยข้อความสีแดง

เราสามารถใช้โค้ดต่อไปนี้เพื่อบรรลุภารกิจนี้:

index.html <p>Pringle and Sons Bakery is a staple of the Oakbridge, Indiana community. The Bakery, founded by James Pringle in 1975, serves <span class="redText">delicious baked goods</span> and coffee to the Oakbridge area. It has served <span class="redText">thousands</span> of customers since its foundation.</p> styles.css .redText { color: red; }

โค้ดของเราคืนค่า:

ในตัวอย่างของเรา เราเน้นคำว่า "delicious baked goods" และ "thousands" คุณ Pringle บอกเราว่าคำเหล่านี้สำคัญ ดังนั้นเราเปลี่ยนโปรแกรมให้แสดงเป็นสีแดง

เรากำหนดสตริงข้อความที่อยู่ภายในแท็ก <p> HTML สร้างประวัติของ Pringle and Sons Bakery จากนั้น เราลงล้อมคำที่เราต้องการให้ปรากฏเป็นสีแดงในแท็ก <span>

ในไฟล์ CSS เราระบุว่าสีของ element ใดๆ ที่ได้รับ class redText ควรเป็นสีแดง นี่ช่วยให้เราเปลี่ยนสีข้อความเป็นสีแดงเมื่อเราใช้แท็ก <span class="redText">

แท็ก <span> มีประโยชน์ในกรณีนี้ เพราะเราต้องการเน้นคำเฉพาะในข้อความของเรา เราอาจใช้สไตล์ข้อความสีแดงกับแท็ก <p> เอง แต่จะทำให้ย่อหน้าทั้งหมดเป็นสีแดง

<span> HTML ในรายการ

สมมติ Pringle and Sons Bakery ขอให้เราเพิ่มรายการในเว็บไซต์ของพวกเขาด้วยลิงก์ไปหน้าโซเชียลมีเดีย

ร้านเบเกอรี่บันทึกว่าลิงก์ไปหน้า Twitter และ Facebook ของพวกเขาสำคัญที่สุด เพราะทีม פעילมากบนแพลตฟอร์มเหล่านั้น ดังนั้นพวกเขาขอให้เราเน้นลิงก์เหล่านั้นด้วยข้อความสีฟ้าอ่อน

เราสามารถใช้โค้ดต่อไปนี้เพื่อบรรลุภารกิจนี้:

index.html <ul> <li><span class="blue"><a href="twitter.com">Twitter</a></span></li> <li><span class="blue"><a href="facebook.com">Facebook</a></span></li> <li><a href="instagram.com">Instagram</a></li> </ul> styles.css .blue { background: lightblue; }

โค้ดของเราคืนค่า:

ในโค้ด HTML ของเรา เราสร้าง unordered list ด้วยแท็ก <ul> รายการนี้มี 3 รายการ แต่ละรายการอยู่ภายในแท็ก <li>

รายการสำหรับ Twitter และ Facebook อยู่ภายในแท็ก HTML Span (<span class="blue"> และ </span>) แท็ก span เปิดของแต่ละรายการระบุ attribute class ค่าของ class attribute คือ "blue"

เรากำหนดสไตล์ชื่อ .blue ที่เปลี่ยนสีพื้นหลังของ element ใดๆ ที่ถูกนำไปใช้เป็นสีฟ้าอ่อน นี่ทำให้สีพื้นหลังของลิงก์ทั้งหมดที่มี CSS class .blue ในโค้ด HTML ของเราเปลี่ยนเป็นสีฟ้าอ่อน

สีพื้นหลังที่เกี่ยวข้องกับลิงก์ Instagram ของเราไม่เปลี่ยน เพราะเราไม่ได้ลงล้อมข้อความสำหรับลิงก์นั้นภายในแท็ก <span>

สรุป

แท็ก HTML <span> เป็น generic container ใช้เพื่อใช้สไตล์กับ element เฉพาะบนหน้า HTML โดยค่าเริ่มต้น แท็ก <span> ไม่ทำอะไร แต่สามารถใช้ร่วมกับ CSS เพื่อใช้สไตล์กับ elements

เป็นการท้าทาย ให้กำหนดแท็ก <span> ที่ทำให้คำในประโยคปรากฏเป็นตัวพิมพ์ใหญ่ทั้งหมด คุณจะต้องใช้ CSS rule เพื่อแปลงข้อความเป็น uppercase ด้วยแท็ก <span> ของคุณ

บทช่วยสอนนี้อภิปราย พร้อมตัวอย่าง วิธีใช้แท็ก HTML <span> ในโค้ดของคุณ คุณพร้อมที่จะเริ่มใช้แท็ก <span> อย่างนักพัฒนาเว็บมืออาชีพแล้ว!

สำหรับคำแนะนำและการสนับสนุนวิธีเรียน HTML อ่านคู่มือ How to Learn HTML แบบสมบูรณ์ของเรา