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

แท็ก <em> ใน HTML5 ใช้เพื่อเน้นความสำคัญของข้อความ โดยทั่วไปการเน้นแบบนี้จะถูกตีความโดยเบราว์เซอร์ว่าเป็นการเน้นด้วยตัวเอียง (italic) ซึ่งจะให้ความหมายทางด้านเนื้อหาว่าคำหรือข้อความนี้ควรได้รับความสนใจหรือมีความสำคัญมากขึ้น ไม่ใช่แค่เรื่องของสไตล์อย่างเดียวเหมือนแท็ก <i> ที่เน้นเรื่องการแสดงผลแบบตัวเอียงอย่างเดียว

การใช้งานของ <em> มีหลายกรณีขึ้นอยู่กับบริบทที่ต้องการเน้นความสำคัญของข้อความ ตัวอย่างการประยุกต์ใช้งานต่างๆ มีดังนี้

เน้นข้อความในบทความ

การเน้นคำหรือวลีที่สำคัญในประโยคเพื่อให้ผู้อ่านทราบว่าควรให้ความสำคัญกับส่วนนี้เป็นพิเศษ

<p>This is a <em>very important</em> message.</p>

ผลลัพธ์: “This is a very important message.” (คำว่า very important จะเป็นตัวเอียง)

การเน้นหลายระดับ

หากมีการเน้นข้อความที่ซ้อนกันหรือหลายระดับ <em> สามารถใช้ซ้อนกันได้ โดยการซ้อนกันแต่ละครั้งจะเพิ่มระดับการเน้นความสำคัญมากขึ้นเรื่อยๆ

<p>I told him to <em>never</em> do that <em>again</em>.</p>
<p>You <em>really need to <em>pay attention</em> to this detail.</em></p>

ในประโยคที่สอง “pay attention” จะเน้นมากกว่า “really need to”

การเน้นข้อความในป้ายข้อความ (Labels)

ในแบบฟอร์มหรือการป้อนข้อมูล <em> สามารถใช้เพื่อเน้นความสำคัญของส่วนที่ต้องใส่ข้อมูล

<label for="name">Please enter your <em>full name</em>:</label>

ในที่นี้คำว่า full name ถูกเน้นเพื่อให้ผู้ใช้เข้าใจชัดเจนว่าจะต้องใส่ชื่อเต็ม

การเน้นในบทสนทนาหรือคำพูด

เมื่อเราต้องการสื่อถึงการเน้นอารมณ์หรือเน้นน้ำเสียงในบทสนทนา

<p>He said, "<em>That</em> was not what I meant."</p>

คำว่า That เน้นความสำคัญว่าเขาหมายถึงสิ่งนั้นโดยเฉพาะ

ใช้ใน Accessibility

การใช้แท็ก <em> ยังมีประโยชน์ในแง่การเข้าถึง (accessibility) เช่นสำหรับโปรแกรมอ่านหน้าจอ (screen readers) ซึ่งจะสามารถแยกแยะการเน้นความสำคัญของข้อความนี้ได้ และอาจอ่านด้วยน้ำเสียงหรือจังหวะที่แตกต่างออกไป

ตัวอย่างการประยุกต์ใช้หลายระดับใน Accessibility

<p>It is <em>critical</em> that you <em>understand</em> the <em>importance</em> of this task.</p>

คำว่า critical, understand, และ importance ถูกเน้นเพื่อให้ชัดเจนว่าผู้ใช้ควรให้ความสำคัญกับข้อความนี้

การใช้ร่วมกับ CSS

เราสามารถใช้แท็ก <em> ร่วมกับ CSS เพื่อปรับการแสดงผลเพิ่มเติมได้ หากไม่ต้องการให้เป็นตัวเอียงแต่ต้องการสไตล์เน้นอื่นๆ

<style>
em {
    font-style: normal;
    color: red;
    font-weight: bold;
}
</style>

<p>This is a <em>very important</em> message.</p>

ในตัวอย่างนี้ คำที่ถูกเน้นจะไม่ใช่ตัวเอียง แต่จะเป็นตัวหนาและสีแดงแทน

การใช้เน้นในหัวเรื่อง

เราอาจใช้ <em> เพื่อเน้นหัวข้อสำคัญในหัวเรื่อง (Headings)

<h1>Welcome to our <em>exclusive</em> event!</h1>

ในที่นี้ คำว่า exclusive จะถูกเน้นในหัวข้อใหญ่

สรุป

แท็ก <em> มีประโยชน์ในการเน้นความสำคัญของข้อความในเนื้อหา และเป็นการเน้นที่มีความหมายมากกว่าการใช้ตัวเอียงอย่างเดียว โดยสามารถนำไปประยุกต์ใช้ได้ในหลากหลายรูปแบบ ทั้งการเน้นเนื้อหา, การเข้าถึงสำหรับผู้ใช้ที่ใช้ screen readers และการใช้ร่วมกับ CSS เพื่อปรับสไตล์ให้เหมาะสมกับการออกแบบเว็บไซต์