การจัดรูปแบบข้อความ (Text Formatting) เป็นพื้นฐานสำคัญของการเขียนเว็บด้วย HTML
เพราะข้อความคือสิ่งที่ผู้ใช้เห็นมากที่สุดในหน้าเว็บ การรู้จักแท็กที่ใช้เน้นข้อความ เช่น
<b>, <strong>, <i>, <em> จะช่วยให้เนื้อหาถูกสื่อสารได้ชัดเจนยิ่งขึ้น
ข้อความตัวหนา
ข้อความตัวเอียง
ข้อความตัวห้อย และ ตัวยก
HTML Formatting Elements
คำสั่งสำหรับจัดรูปแบบข้อความมีดังนี้
<b>– แสดงข้อความเป็นตัวหนา<strong>– แสดงข้อความตัวหนา ใช้เพื่อกำหนดข้อความที่มีความสำคัญมาก และส่งผลต่อการทำ SEO<i>– แสดงข้อความตัวเอียง<em>– แสดงข้อความตัวเอียง ใช้เพื่อกำหนดข้อความที่มีความสำคัญมาก และส่งผลต่อการทำ SEO<mark>– การกำหนดให้ไฮไลท์หรือเน้นข้อความ<small>– แสดงข้อความให้มีขนาดเล็ก<del>– แสดงข้อความให้มีเส้นขีดฆ่าข้อความทิ้ง<ins>– แสดงข้อความส่วนที่เพิ่มเติม (ขีดเส้นใต้)<sub>– แสดงข้อความเป็นตัวห้อย<sup>– แสดงข้อความเป็นตัวยก
HTML <b> และ <strong>
<b> เป็นการแสดงข้อความแบบตัวหนา
<b>ข้อความแบบตัวหนา</b>
<strong> จะแสดงข้อความเป็นตัวหนาเหมือนกับ <b> แต่จะใช้กับข้อความที่มีความสำคัญ และส่งผลต่อการทำ SEO
<strong>ข้อความที่ใช้คำสั่ง strong</strong>
HTML <i> และ <em>
<i> จะแสดงข้อความเป็นตัวเอียง ส่วนใหญ่จะใช้ในเรื่องของการแสดงอารมณ์หรือคำพูด
<i>ข้อความแบบตัวเอียง</i>
📝 เคล็ดลับ
Tag
<i> มักจะใช้กับคำศัพท์ทางเทคนิค, วลี, ข้อความจากภาษาอื่น, ความคิด หรือชื่อเรื่อง เป็นต้น
<em> แสดงข้อความตัวเอียง ใช้เพื่อกำหนดข้อความที่มีความสำคัญมาก และส่งผลต่อการทำ SEO
<em>ข้อความที่ใช้คำสั่ง em</em>
📝 เคล็ดลับ
โปรแกรมอ่านหน้าจอจะออกเสียงใน Tag
<em> โดยจะเน้นเสียงข้อความใน Tag นี้
HTML <small>
<small> จะแสดงข้อความให้มีขนาดเล็ก
<small>ข้อความจะเล็กลงกว่าปกติเมื่อใช้คำสั่ง small</small>
HTML <mark>
<mark> จะใช้เพื่อการกำหนดให้ไฮไลท์หรือเน้นข้อความ
<p>อย่าลืม!!! ซื้อ <mark>นม</mark> กลับมาด้วยนะ</p>
HTML <del>
<del> ใช้แสดงข้อความให้มีเส้นขีดฆ่าข้อความทิ้ง
<p>สีที่เราชอบคือ <del>สีแดง</del> สีฟ้า</p>
HTML <ins>
<ins> จะใช้เพื่อแสดงข้อความส่วนที่เพิ่มเข้าไปในเอกสาร โดยข้อความที่เพิ่มจะถูกขีดเส้นใต้
<p>สัตว์ที่ชอบคือ <del>กวาง</del> <ins>เพนกวิน</ins></p>
HTML <sub>
<sub> ใช้เพื่อแสดงข้อความตัวห้อย (Subscript) โดยข้อความจะห้อยลงมาครึ่งหนึ่งของข้อความปกติ และในบางครั้งตัวห้อยอาจมีขนาดเล็กกว่าตัวอักษรปกติ ซึ่งส่วนใหญ่จะถูกนำไปใช้กับสูตรทางเคมี เป็นต้น
<p>นี่คือตัวอย่าง <sub>ตัวห้อย</sub> ของข้อความ</p>
HTML <sup>
<sup> จะใช้เพื่อแสดงตัวยก (Superscript) โดยข้อความที่เป็นตัวยกจะยกขึ้นไปครึ่งหนึ่งเหนือข้อความปกติ ซึ่งบางครั้งอาจมีขนาดเล็กกว่าอักษรปกติ ส่วนมากจะใช้กับข้อความที่เป็นเชิงอรรถ หรือข้อความที่เป็นหมายเหตุ เช่น https[1]
<p>นี่คือตัวอย่าง <sup>ตัวยก</sup> ของข้อความ</p>
สรุป
| Tag | คำอธิบาย |
|---|---|
<b> | แสดงข้อความเป็นตัวหนา |
<em> | แสดงข้อความตัวเอียง ใช้เพื่อกำหนดข้อความที่มีความสำคัญมาก และส่งผลต่อการทำ SEO |
<i> | แสดงข้อความตัวเอียง |
<small> | แสดงข้อความให้มีขนาดเล็ก |
<strong> | แสดงข้อความตัวหนา ใช้เพื่อกำหนดข้อความที่มีความสำคัญมาก และส่งผลต่อการทำ SEO |
<sub> | แสดงข้อความเป็นตัวห้อย |
<sup> | แสดงข้อความเป็นตัวยก |
<ins> | แสดงข้อความส่วนที่เพิ่มขึ้น (ขีดเส้นใต้) |
<del> | แสดงข้อความที่ลบหรือตัดข้อความทิ้ง |
<mark> | การกำหนดให้ไฮไลท์หรือเน้นข้อความ |