HTML Text Formatting


HTML Text Formatting เป็นการจัดรูปแบบต่างๆ ให้กับข้อความ ไม่ว่าจะเป็นตัวหนา ตัวเอียง หรือตัวขีดเส้นใต้เป็นต้น ซึ่งมีรูปแบบคำสั่งในการใช้งานต่างๆ ดังต่อไปนี้

<!DOCTYPE html>
<html>
<body>

<p><b>ข้อความตัวหนา</b></p>
<p><i>ข้อความตัวเอียง</i></p>
<p>ข้อความ<sub>ตัวห้อย</sub> และ <sup>ตัวยก</sup></p>

</body>
</html>
html-text-formatting

HTML Formatting Elements

คำสั่งสำหรับจัดรูปแบบข้อความมีดังนี้

  • <b> – แสดงข้อความเป็นตัวหนา
  • <strong> – แสดงข้อความตัวหนา ใช้เพื่อกำหนดข้อความที่มีความสำคัญมาก และส่งผลต่อการทำ SEO
  • <i> – แสดงข้อความตัวเอียง
  • <em> – แสดงข้อความตัวเอียง ใช้เพื่อกำหนดข้อความที่มีความสำคัญมาก และส่งผลต่อการทำ SEO
  • <mark> – การกำหนดให้ไฮไลท์หรือเน้นข้อความ
  • <small> – แสดงข้อความให้มีขนาดเล็ก
  • <del> – แสดงข้อความให้มีเส้นขีดฆ่าข้อความทิ้ง
  • <ins> – แสดงข้อความส่วนที่เพิ่มเติม (ขีดเส้นใต้)
  • <sub> – แสดงข้อความเป็นตัวห้อย
  • <sup> – แสดงข้อความเป็นตัวยก

HTML <b> และ <strong>

<b> เป็นการแสดงข้อความแบบตัวหนา

<!DOCTYPE html>
<html>
<body>

<p>ข้อความแบบปกติ</p>

<p><b>ข้อความแบบตัวหนา</b></p>

</body>
</html>
html-text-formatting

<strong> จะแสดงข้อความเป็นตัวหนาเหมือนกับ <b> แต่จะใช้กับข้อความที่มีความสำคัญ และส่งผลต่อการทำ SEO

<!DOCTYPE html>
<html>
<body>

<p>ข้อความปกติ</p>

<p><strong>ข้อความที่ใช้คำสั่ง strong</strong></p>

</body>
</html>

HTML <i> และ <em>

<i> จะแสดงข้อความเป็นตัวเอียง ส่วนใหญ่จะใช้ในเรื่องของการแสดงอารมณ์หรือคำพูด

tag <i> มักจะใช้ระบคำศัพท์ทางเทคนิค,วลี, ข้อความจากภาษาอื่น, ความคิด หรือชื่อเรือ เป็นต้น
<!DOCTYPE html>
<html>
<body>

<p>ข้อความปกติ</p>

<p><i>ข้อความแบบตัวเอียง</i></p>

</body>
</html>

tag <em> แสดงข้อความตัวเอียง ใช้เพื่อกำหนดข้อความที่มีความสำคัญมาก และส่งผลต่อการทำ SEO

โปรแกรมอ่านหน้าจอจะออกเสียงใน tag <em> โดยจะเน้นเสียงข้อความใน tag นี้
<!DOCTYPE html>
<html>
<body>

<p>ข้อความปกติ</p>

<p><em>ข้อความที่ใช้คำสั่ง em</em></p>

</body>
</html>

HTML <small>

tag <small>  จะแสดงข้อความให้มีขนาดเล็ก

<!DOCTYPE html>
<html>
<body>

<p>ข้อความปกติ</p>
<p><small>ข้อความจะเล็กลงกว่าปกติเมื่อใช้คำสั่ง small</small></p>

</body>
</html>

HTML <mark>

tag <mark> จะใช้เพื่อการกำหนดให้ไฮไลท์หรือเน้นข้อความ

<!DOCTYPE html>
<html>
<body>

<p>อย่าลืม!!! ซื้อ <mark>นม</mark> กลับมาด้วยนะ</p>

</body>
</html>

HTML <del>

tag <del> ใช้แสดงข้อความให้มีเส้นขีดฆ่าข้อความทิ้ง

<!DOCTYPE html>
<html>
<body>

<p>สีที่เราชอบคือ <del>สีแดง</del> สีฟ้า</p>

</body>
</html>

HTML <ins>

tag <ins>  จะใช้เพื่อแสดงข้อความส่วนที่เพิ่มเข้าไปในเอกสาร โดยข้อความที่เพิ่มจะถูกขีดเส้นใต้

<!DOCTYPE html>
<html>
<body>

<p>สัตว์ที่ชอบคือ <del>กวาง</del> <ins>เพนกวิน</ins>.</p>

</body>
</html>

HTML <sub>

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

<!DOCTYPE html>
<html>
<body>

<p>นี่คือตัวอย่าง <sub>ตัวห้อย</sub> ของข้อความ</p>

</body>
</html>

HTML <sup>

tag <sup> จะใช้เพื่อแสดงข้อความเป็นตัวยก ข้อความที่เป็นตัวยก จะยกขึ้นไปครึ่งหนึ่งเหนือข้อความปกติ ซึ่งบางครั้งอาจมีขนาดเล็กกว่าอักษรปกติ ส่วนมากจะใช้กับข้อความที่เป็นเชิงอรรถ หรือข้อความที่เป็นหมายเหตุ ยกตัวอย่างเช่น https[1] เป็นต้น

<!DOCTYPE html>
<html>
<body>

<p>นี่คือตัวอย่าง <sup>ตัวยก</sup> ของข้อความ</p>

</body>
</html>

สรุป

TagDescription
<b>แสดงข้อความเป็นตัวหนา
<em>แสดงข้อความตัวเอียง ใช้เพื่อกำหนดข้อความที่มีความสำคัญมาก และส่งผลต่อการทำ SEO
<i>แสดงข้อความตัวเอียง
<small>แสดงข้อความให้มีขนาดเล็ก
<strong>แสดงข้อความตัวหนา ใช้เพื่อกำหนดข้อความที่มีความสำคัญมาก และส่งผลต่อการทำ SEO
<sub>แสดงข้อความเป็นตัวห้อย
<sup>แสดงข้อความเป็นตัวยก
<ins>แสดงข้อความส่วนที่เพิ่มเติม (ขีดเส้นใต้)
<del>แสดงข้อความให้มีเส้นขีดฆ่าข้อความทิ้ง
<mark>การกำหนดให้ไฮไลท์หรือเน้นข้อความ