พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน span Tag

<span> ใน HTML5 เป็นหนึ่งใน inline element ที่ใช้เพื่อการจัดกลุ่มเนื้อหาภายในเอกสาร HTML โดยไม่ได้มีลักษณะการแสดงผลที่เจาะจงแบบเดียวกันกับ <div> ซึ่งเป็น block-level element

การใช้งานทั่วไปของ <span> จะมีลักษณะเพื่อการกำหนดหรือปรับแต่งสไตล์ เช่นการเพิ่ม CSS หรือตำหนิองค์ประกอบต่าง ๆ ด้วย JavaScript

ตัวอย่างการใช้งานพื้นฐานของ <span>

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <title>การใช้งาน span tag</title>
    <style>
        .highlight {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>ข้อความทั่วไป: <span class="highlight">เน้นข้อความนี้</span></p>
</body>
</html>

ในตัวอย่างนี้ <span class="highlight">เน้นข้อความนี้</span> ใช้ <span> เพื่อกำหนดให้ส่วนของข้อความนั้นมีการเปลี่ยนแปลงสไตล์ เช่นสีแดงและตัวหนา

รูปแบบการประยุกต์ใช้งาน

1. การใช้งานเพื่อการจัดกลุ่มข้อความ

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

HTML
<p>นี่คือ <span style="color:blue;">ข้อความสีฟ้า</span> ในประโยคนี้</p>

ในตัวอย่างนี้ ส่วนของ <span> ถูกใช้เพื่อเปลี่ยนเฉพาะข้อความที่อยู่ใน <span> ให้มีสีฟ้า

2. การใช้งานร่วมกับ JavaScript

เราสามารถใช้ <span> เพื่อการโต้ตอบกับ JavaScript ได้ เช่นการเปลี่ยนแปลงเนื้อหาภายใน <span> เมื่อผู้ใช้งานทำการคลิก

HTML
<p>คลิกที่นี่: <span id="clickable" onclick="changeText()">คลิกฉัน</span></p>

<script>
    function changeText() {
        document.getElementById("clickable").innerHTML = "เปลี่ยนเป็นข้อความใหม่";
    }
</script>

ในตัวอย่างนี้ เมื่อผู้ใช้งานคลิกที่ข้อความ “คลิกฉัน” เนื้อหาภายใน <span> จะถูกเปลี่ยนเป็น “เปลี่ยนเป็นข้อความใหม่”

3. การใช้งานร่วมกับ CSS Pseudo-classes

เราสามารถใช้ <span> ร่วมกับ CSS pseudo-classes เพื่อสร้างเอฟเฟกต์เพิ่มเติม เช่นการเปลี่ยนสไตล์เมื่อเมาส์ผ่าน

HTML
<style>
    span:hover {
        color: green;
        cursor: pointer;
    }
</style>

<p>ลองนำเมาส์ไปวางที่: <span>ข้อความนี้</span></p>

ในตัวอย่างนี้ เมื่อผู้ใช้เลื่อนเมาส์ไปที่ข้อความภายใน <span> ข้อความจะเปลี่ยนเป็นสีเขียว

4. การใช้งานเพื่อการเน้นข้อความ

เราสามารถใช้ <span> เพื่อเน้นข้อความบางส่วนโดยไม่ทำให้โครงสร้างของเอกสาร HTML เปลี่ยนแปลง

HTML
<p>ตัวอย่างการใช้: <span style="background-color: yellow;">เน้นข้อความ</span> ด้วยพื้นหลังสีเหลือง</p>

ในตัวอย่างนี้ <span> ถูกใช้เพื่อเน้นข้อความด้วยพื้นหลังสีเหลือง

5. การใช้งานเพื่อซ่อนข้อความ

สามารถใช้ <span> เพื่อซ่อนข้อความโดยการตั้งค่าสไตล์เป็น display: none;

HTML
<p>ข้อความนี้มองไม่เห็น: <span style="display:none;">ข้อความที่ซ่อนอยู่</span></p>

ในตัวอย่างนี้ ข้อความภายใน <span> จะถูกซ่อนจากผู้ใช้งาน

สรุป

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

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ