มีหลายวิธีในการจัดรูปแบบข้อความของคุณใน HTML เพื่อดึงดูดความสนใจไปที่บางสิ่งบางอย่าง ในบทความนี้ เราจะพูดถึงวิธีจัดรูปแบบข้อความของคุณใน HTML ให้เป็นตัวหนา เป็นตัวเอียง หรือขีดเส้นใต้ คุณจะเป็นผู้เชี่ยวชาญด้านการจัดรูปแบบในเวลาไม่นาน!
ตัวหนา
การตั้งค่าข้อความเป็น ตัวหนา ใน HTML ก่อน HTML5 เกี่ยวข้องกับข้อความที่คุณต้องการเป็นตัวหนาด้วย <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 เปิดตัว วิธีที่นิยมในการทำให้ข้อความเป็นตัวหนาเปลี่ยนเป็นการใช้ <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>
องค์ประกอบคือความหมาย โปรแกรมอ่านหน้าจอจะเห็น <strong>
แท็กและจะเน้นข้อความอย่างชัดเจนมากขึ้นเมื่ออ่าน <b>
ไม่อนุญาตให้ทำเช่นนั้น
ตัวเอียง
เช่นเดียวกับ ตัวหนา มีสองมาตรฐานที่แตกต่างกันที่เรารู้จักสำหรับการสร้างข้อความที่เป็นตัวเอียง ก่อนหน้ามาตรฐาน 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>
แท็ก “em” ย่อมาจาก emphasis . <em>
แท็กส่งสัญญาณให้โปรแกรมอ่านหน้าจอให้ความสำคัญกับข้อความมากขึ้น เพื่อให้ผู้ใช้สามารถแยกความแตกต่างระหว่างข้อความปกติและข้อความที่เน้น
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
ขีดเส้นใต้
ข้อความที่ขีดเส้นใต้ HTML มักใช้เพื่อระบุคำที่สะกดผิด อย่าใช้ในที่ที่อาจสับสนสำหรับไฮเปอร์ลิงก์ ทำเครื่องหมายข้อความของคุณด้วย <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 ในกรณีของ และ เราใช้ความหมายเหล่านี้กับองค์ประกอบที่ดูเหมือนตัวหนาและตัวเอียงบนหน้าจอ ในโปรแกรมอ่านหน้าจอ คำเหล่านั้นจะถูกเน้น ด้วยแท็ก เราสามารถใช้เพื่อขีดเส้นใต้ข้อความได้ มีตัวเลือกการจัดรูปแบบอื่นๆ อีกมากมายนอกเหนือจากสามตัวเลือกนี้