การใช่แท็กพื้นฐานเพื่อตัดรูปแบบเนื้อหา
เมื่อเราได้เรียนรู้ความหมายของ <!DOCTYPE html>, <html>, <head> และ <body> แล้ว ขั้นตอนต่อไปคือการลงลึกในส่วนที่ทำให้เว็บไซต์ดูเป็นระเบียบและอ่านง่าย – การใช้แท็กพื้นฐานของ HTML ที่กำหนดหัวข้อ ย่อหน้า ลิงก์ และรายการ ซึ่งจะช่วยให้ผู้เริ่มต้นเข้าใจวิธีสร้างเนื้อหาที่เป็นมิตรกับ SEO และเข้าถึงได้โดยตรงจากทุกอุปกรณ์
ในบทนี้เราจะพาคุณไปเจาะลึกถึง
- แท็กหัวข้อ
<h1>–<h6> - ย่อหน้าด้วย
<p> - ลิงก์ผ่าน
<a href="…">
1. แท็กหัวข้อ <h1>–<h6>
แท็กหัวข้อนี้เป็นตัวกำหนดโครงสร้างของเนื้อหาให้เป็นชั้น ๆ เช่นเดียวกับบทความที่มีหัวเรื่องหลักและหัวเรื่องย่อย การใช้ระดับหัวข้ออย่างถูกต้องไม่เพียงแต่ทำให้ผู้อ่านสามารถสแกนเนื้อหาได้ง่ายขึ้น แต่ยังช่วยเสริม SEO เพราะเครื่องมือค้นหาจะอ่าน <h1> เป็นหัวข้อสำคัญของหน้าเว็บ
ระดับความสำคัญของแท็กหัวข้อ:
<h1>: หัวเรื่องหลักของหน้าต่าง ๆ ควรมีเพียงหนึ่งครั้งต่อหน้า<h2>ถึง<h6>: ใช้สำหรับหัวข้อย่อยตามลำดับความสำคัญ (จากใหญ่ไปเล็ก)
ตัวอย่างโค้ด HTML ที่แสดงการใช้แท็กหัวข้อระดับต่าง ๆ:
<h1>บทนำสู่ HTML: ทำไมต้องใช้งาน HTML และพื้นฐานของมัน</h1>
<h2>ความสำคัญของโครงสร้างเอกสาร</h2>
<p>HTML เป็นภาษาที่กำหนดโครงสร้างและเนื้อหาของเว็บเพจโดยใช้แท็กต่าง ๆ ...</p>
<h3>ตัวอย่างโครงสร้างพื้นฐาน</h3>
<pre><!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<title>หน้าเว็บตัวอย่าง</title>
</head>
<body>
<h1>หัวข้อหลัก</h1>
<p>ย่อหน้าตัวอย่าง...</p>
</body>
</html></pre>
<h2>การจัดหมวดหมู่เนื้อหาโดยใช้ <code><h4></code> และล่างกว่า</h2>
จากตัวอย่างข้างต้นคุณจะเห็นว่าแท็กหัวข้อช่วยสร้างความชัดเจนในการแสดงผลและทำให้โครงสร้างของหน้าเว็บดูเป็นระเบียบ
2. ย่อหน้าด้วย <p>
แท็ก <p> คือ “paragraph” หรือย่อหน้าที่ใช้สำหรับบรรจุข้อความธรรมดาในเว็บเพจ เมื่อเราต้องการแยกเนื้อหาเป็นส่วน ๆ เพื่อให้ผู้อ่านไม่รู้สึกว่าอ่านข้อมูลติดต่อกันแบบไม่มีขอบเขต เราก็จะใช้ <p> เป็นตัวช่วย
เคล็ดลับในการใช้แท็ก <p>:
- แต่ละย่อหน้าควรมีความหมายหรือหัวข้อเฉพาะ เช่น “การอธิบายหลักสูตร” หรือ “ข้อมูลติดต่อ”
- หากต้องการเพิ่มระยะเว้นบรรทัดระหว่างย่อหน้า สามารถใช้ CSS เช่น
margin-bottom: 1rem; - ควรหลีกเลี่ยงการใส่แท็กอื่น ๆ ซ้อนใน
<p>หากไม่ได้รับประโยชน์จริง เช่น<div>หรือ<span>ที่ไม่มีความจำเป็น
ตัวอย่างโค้ด HTML แสดงการใช้แท็กย่อหน้า:
<p>HTML (HyperText Markup Language) เป็นภาษาที่ใช้กำหนดโครงสร้างของเอกสารบนเว็บ โดยใช้แท็กเพื่อบ่งชี้เนื้อหาแต่ละส่วน</p>
<p>ตัวอย่างเช่น เราสามารถใส่ข้อความ, ลิงก์, รูปภาพ หรือแม้กระทั่งโค้ด JavaScript ภายในแท็กต่าง ๆ ได้ตามต้องการ</p>
คุณสามารถเพิ่มสไตล์ให้กับย่อหน้าดังนี้:
<style>
p {
font-family: "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
margin-bottom: 1rem;
}
</style>3. ลิงก์ผ่าน <a href="…">
ลิงก์เป็นหัวใจของการเชื่อมโยงข้อมูลบนเว็บ เมื่อคุณต้องการให้ผู้ใช้คลิกเพื่อไปยังหน้าอื่นหรือดาวน์โหลดไฟล์ คุณจะใช้แท็ก <a> พร้อมแอตทริบิวต์ href
รูปแบบพื้นฐานของลิงก์:
<a href="URL">ข้อความที่จะแสดง</a>
ตัวอย่าง:
<p>
หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ HTML, <a href="https://developer.mozilla.org/th/docs/Web/HTML" target="_blank">คลิกที่นี่เพื่อดูเอกสารจาก MDN</a>.
</p>
แอตทริบิวต์อื่น ๆ ที่มักใช้ร่วมกับ <a> ได้แก่:
- target="_blank": เปิดลิงก์ในแท็บใหม่ (เหมาะสำหรับหน้าเว็บภายนอก)
- rel="noopener noreferrer": ป้องกันการโจมตีแบบ “tabnabbing” เมื่อใช้ target="_blank"
- title="…": แสดงข้อความบรรยายเมื่อผู้ใช้วางเมาส์บนลิงก์ (ช่วยให้เข้าถึงได้ดีขึ้น)
ตัวอย่างโค้ดที่รวมแอตทริบิวต์ทั้งหมด:
<a href="https://example.com" target="_blank" rel="noopener noreferrer" title="ไปยังเว็บไซต์ของเรา">เข้าเว็บของเรา</a>สรุป: การสร้างเนื้อหาอย่างเป็นระบบด้วยแท็กพื้นฐาน
การใช้ หัวข้อ (h1–h6), ย่อหน้า (p) และ ลิงก์ (a) เป็นพื้นฐานของการจัดโครงสร้างเว็บไซต์ที่อ่านง่ายและเข้าถึงได้สำหรับผู้ใช้ทุกคน ทั้งนี้เพื่อให้คุณสามารถเริ่มต้นเขียนเว็บเพจแรกของคุณได้อย่างมั่นใจ
ต่อไปในบทถัดไป เราจะมาดูวิธีใช้แอตทริบิวต์เพิ่มเติม เช่น class, id, และ style เพื่อให้การจัดรูปแบบเนื้อหามีความยืดหยุ่นและสวยงามมากขึ้น พร้อมทั้งตัวอย่างการสร้างเมนูนำทางด้วยแท็ก <nav> และรายการไม่เรียงลำดับ <ul>
Tip: ควรเขียนโค้ด HTML ของคุณในไฟล์ .html แล้วเปิดดูในเบราว์เซอร์เพื่อทดสอบการแสดงผลจริง ไม่ว่าจะเป็นบนคอมพิวเตอร์หรือมือถือ เพื่อให้แน่ใจว่าเนื้อหาตรงตามที่ต้องการและไม่มีข้อผิดพลาดทางไวยากรณ์