TOC

This article is currently in the process of being translated into Thai (~97% done).

HTML Basics:

Italic & Bold or Strong & Emphasize

จากที่ได้เคยกล่าวไว้ว่า HTML ไม่สามารถทำในส่วนของ look & feel (ความสวยงาม) ใน webpage ได้ แต่สามารถเปลี่ยนแปลงอักษรเป็นแบบ bold (ตัวหนา) หรือ italic (ตัวเอียง) ได้ element <b>, <i>, <em>, และ <strong> จะใช้ใน HTML ในส่วนของ HTML5 ก็จะมีใช้เช่นกัน

  • <i> element เป็นอักษรตัวเอียง (italic) ใช้เป็นข้อความตัวเลือก เช่น ภาษาต่างประเทศ, ศัพท์ทางเทคนิค, หรือ inline state direction (การกำหนดให้ภายในแท็กนั้น ๆ โดยจะมีผลต่อแท็กนั้น ๆ แท็กเดียว)
  • <b> element เป็นอักษรตัวหนา (bold) ใช้เน้นข้อความ เช่น keyword หรือ ชื่อของสินค้า
  • <em> element ใช้ขยายข้อความ เช่น การอ่านออกเสียงที่ต่างกัน
  • <strong> element ใช้เน้นและขยายข้อความในสิ่งที่สำคัญมากๆ

ด้านล่างคือตัวอย่างของตัวอักษรที่มีรูปแบบต่างๆกัน คลิกบน "Try this example" เพื่อสังเกตดูความแตกต่าง

<!DOCTYPE html>
A foreign word, <i>smuk</i>, means beautiful in Danish <br /><br />
The phrase <b>semantinc meaning</b> might be keywords in this document<br /><br />
Alternate accentuation? Use the <em>em</em>, not the italic element.<br /><br />
If you want to write semantic code <strong>it is important that you understand the differences</strong>!
</html>

ตัวอย่าง

ตัวอย่างต่อไปนี้ เป็นข้อความจาก Shakepeare’s MacBeth <i> element ใช้เป็นการบรรยายของละคร <b> element ใช้เป็นคำพูดของตัวละคร

Enter MACBETH and BANQUO

MACBETH So foul and fair a day I have not seen.

BANQUO How far is't call'd to Forres? What are these
So wither'd and so wild in their attire,
That look not like the inhabitants o' the earth,
And yet are on't? Live you? or are you aught
That man may question? You seem to understand me,
By each at once her chappy finger laying
Upon her skinny lips: you should be women,
And yet your beards forbid me to interpret
That you are so.

MACBETH Speak, if you can: what are you?

First Witch All hail, Macbeth! Hail to thee, thane of Glamis!

Second Witch - All hail, Macbeth, Hail to thee, thane of Cawdor!

Third Witch All hail, Macbeth, thou shalt be king hereafter!

การใช้ <i> และ <b>นี้ิอาจจะทำให้เกิดปัญหา ถ้าเกิดว่าเราอยากจะแสดงผลที่แตกต่างกัน เราจะนำ CSS มาใช้ โดยการ สร้างตัวแปร class ในแต่ละ <i> หรือ <b> เช่น ใช้เป็นการบรรยายของละคร เราจะย่อ stage direction class ด้วย stg-direc ใช้เป็นคำพูดของตัวละคร เราจะย่อ character class ด้วย char เราก็จะเขียนโปรแกรมได้ดังนี้

<p>
<i class="stg-direc">Enter MACBETH and BANQUO</i>
<b class="char">MACBETH</b> So foul and fair a day I have not seen.
<b class="char">BANQUO</b>How far is't call'd to Forres? What are these
…
</p>

สรุป

  • ถ้าไม่ใช้ CSS <em> และ <i> จะแสดงผลเหมือนกัน
  • ถ้าไม่ใช้ CSS <strong> และ <b> จะแสดงผลเหมือนกัน
  • ควรใช้ <em> และ <strong> แทนการใช้ <i> และ <b>
  • Element ต่างๆที่พูดถึงในบทนี้ ไม่ควรนำมาใช้เป็นตัวอ้างอิงค์หรือประโยคคำพูด เราจะใช้ <blockquote> หรือ <aside> แทน
  • การใช้ class ใน element ต่างๆที่พูดถึงในบทนี้ จะช่วยให้อ่านโค้ดเข้าใจได้ง่ายขึ้น
This article has been fully translated into the following languages:
Is your preferred language not on the list? Click here to help us translate this article into your language!
adplus-dvertising