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

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

<mark> tag ใน HTML5 ใช้ในการเน้นข้อความเพื่อแสดงให้ผู้ใช้ทราบว่าข้อความที่อยู่ภายในนั้นมีความสำคัญหรือเกี่ยวข้องกับสิ่งที่ผู้ใช้งานกำลังค้นหา โดยทั่วไปจะใช้เพื่อทำให้ข้อความที่ถูกเน้นมีพื้นหลังเป็นสีเหลือง คล้ายกับการใช้ปากกาไฮไลท์เน้นข้อความในหนังสือ

การใช้งาน <mark> Tag

การใช้งาน <mark> นั้นค่อนข้างตรงไปตรงมา เพียงแค่ครอบข้อความที่ต้องการเน้นด้วยแท็ก <mark>

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>การใช้ mark tag</title>
</head>
<body>
    <p>นี่คือข้อความธรรมดา แต่ข้อความนี้ <mark>สำคัญมาก</mark> และควรให้ความสนใจ</p>
</body>
</html>

ในตัวอย่างนี้ข้อความ “สำคัญมาก” จะถูกเน้นด้วยพื้นหลังสีเหลือง

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

เน้นคำที่ค้นหาในผลลัพธ์การค้นหา

การใช้ <mark> มักจะถูกนำมาใช้ในการแสดงผลลัพธ์การค้นหาบนเว็บ โดยเน้นคำที่ตรงกับคำค้นหาของผู้ใช้

HTML
<p>ผลการค้นหาสำหรับคำว่า <mark>ธรรมะ</mark> พบในเนื้อหานี้</p>

ใช้ร่วมกับ CSS เพื่อปรับแต่งสไตล์

สามารถใช้ CSS เพื่อปรับเปลี่ยนสีพื้นหลังของ <mark> ให้เข้ากับสไตล์ของเว็บไซต์ได้

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        mark {
            background-color: lightgreen;
            color: black;
        }
    </style>
    <title>การปรับแต่ง mark tag</title>
</head>
<body>
    <p>เนื้อหานี้มีความเกี่ยวข้องกับ <mark>การตลาด</mark> ซึ่งควรให้ความสำคัญ</p>
</body>
</html>

ในตัวอย่างนี้ แทนที่พื้นหลังจะเป็นสีเหลือง จะถูกเปลี่ยนเป็นสีเขียวอ่อน

ใช้ในการแสดงข้อมูลจากระบบอัตโนมัติ

สามารถใช้ <mark> เพื่อเน้นคำหรือประโยคที่ถูกแสดงจากระบบ หรือการแจ้งเตือนให้ผู้ใช้ทราบ เช่น ข้อมูลอัปเดตใหม่

HTML
<p>ข้อมูลใหม่ที่เพิ่มเข้ามาคือ <mark>ยอดขายประจำเดือนนี้เพิ่มขึ้น 20%</mark></p>

ใช้ในการแสดงข้อมูลการศึกษา

ใช้ <mark> ในการเน้นคำสำคัญที่ผู้เรียนควรให้ความสำคัญในเนื้อหาการศึกษา

HTML
<p>การปฏิบัติตาม <mark>ศีลห้า</mark> เป็นหลักธรรมที่สำคัญในพุทธศาสนา</p>

ประโยชน์ของการใช้ <mark>

  • เน้นข้อมูลที่สำคัญ: เหมาะสำหรับเน้นคำหรือวลีที่เกี่ยวข้องกับเนื้อหาที่ผู้ใช้กำลังมองหา
  • สร้างความโดดเด่น: ทำให้ผู้ใช้สามารถมองเห็นข้อมูลที่เน้นได้ง่าย
  • ใช้งานง่าย: สามารถผสมผสานกับ CSS เพื่อเพิ่มความสวยงาม

สรุป

การใช้ <mark> tag เป็นวิธีที่มีประสิทธิภาพในการเน้นข้อความที่สำคัญบนหน้าเว็บ โดยสามารถประยุกต์ใช้ได้หลากหลายรูปแบบ ไม่ว่าจะเป็นการเน้นผลลัพธ์การค้นหา การแสดงข้อความอัปเดต หรือคำสำคัญในเนื้อหาการศึกษา

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

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