มีหลายวิธีจัดรูปแบบข้อความใน HTML เพื่อดึงดูดความสนใจ บทความนี้พูดถึงการจัดรูปแบบข้อความให้เป็น bold, italics, หรือ underline คุณจะกลายเป็น formatting pro ในไม่ช้า!
Bold (ตัวหนา)
การตั้งค่าข้อความเป็น bold ใน HTML ก่อน HTML5 ทำโดยห่อข้อความที่ต้องการเป็น bold ด้วยแท็ก <b>:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <p>This text is <b>bold</b></p> <script src="script.js"></script> </body> </html>
เมื่อ HTML5 Standard เปิดตัว วิธีที่แนะนำเปลี่ยนเป็นใช้แท็ก <strong>:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <p>This text is also <strong>bold</strong></p> <script src="script.js"></script> </body> </html>
ความแตกต่างระหว่าง <b> และ <strong> คือ semantics (ความหมาย) Screen readers จะเห็น <strong> และเน้นข้อความมากขึ้นเมื่ออ่าน <b> ไม่ทำได้
Italics (ตัวเอียง)
เหมือนกับ bold มี 2 มาตรฐานสำหรับข้อความเอียง ก่อน HTML5 ใช้แท็ก <i> ห่อข้อความ:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <p>This text is in <i>italics</i></p> <script src="script.js"></script> </body> </html>
เมื่อ HTML5 เป็นมาตรฐาน <i> ให้ทางแก่ <em> ที่มี semantics มากกว่า "em" ย่อมาจาก emphasis แท็ก <em> ส่งสัญญาณให้ screen reader เน้นข้อความมากขึ้น เพื่อให้ผู้ใช้แยกแยะข้อความปกติและข้อความเน้นได้
Underline (ขีดเส้นใต้)
ข้อความขีดเส้นใต้ใน HTML ใช้บ่อยสำหรับบ่งชี้คำผิด綴า อย่าใช้ในที่ที่อาจสับสนกับ hyperlink มาร์กอัพข้อความด้วยแท็ก <u> แล้วใช้ CSS ระบุสไตล์เส้นใต้
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <style> p u { text-decoration: underline red wavy; } </style> </head> <body> <p>This is a <u>mispelled</u> word</p> </body> </html>
สรุป
บทความนี้อธิบายแท็กจัดรูปแบบข้อความใน HTML กรณี <strong> และ <em> ใช้เพื่อ semantics ให้องค์ประกอบที่ดูเป็น bold และ italic บนหน้าจอ บน screen reader คำเหล่านั้นจะถูกเน้น ด้วยแท็ก <u> ใช้ขีดเส้นใต้ข้อความ ยังมีตัวเลือกจัดรูปแบบอื่นอีกมาก
