4. แท็กย่อหน้า (Paragraph Tag)
หลังจากที่เราได้เรียนรู้เรื่องแท็กหัวเรื่อง (Heading Tags) ไปแล้ว ในบทนี้เราจะมาทำความรู้จักกับอีกหนึ่งแท็กที่สำคัญอย่างยิ่งในการจัดโครงสร้างเนื้อหาของเว็บไซต์ นั่นคือ แท็กย่อหน้า (<p>) แท็กนี้ใช้สำหรับสร้างย่อหน้าในหน้าเว็บเพจ และเป็นองค์ประกอบพื้นฐานที่ช่วยให้เนื้อหาของเราอ่านง่ายและเป็นระเบียบ
แท็ก <p> คืออะไร?
แท็ก <p> (ย่อมาจาก paragraph) เป็นแท็ก HTML ที่ใช้สำหรับกำหนดส่วนของข้อความให้เป็นย่อหน้า โดยปกติแล้วเบราว์เซอร์จะเพิ่มช่องว่าง (margin) ด้านบนและด้านล่างของแต่ละย่อหน้า ทำให้เนื้อหาดูเป็นสัดส่วนและง่ายต่อการอ่าน
รูปแบบการใช้งาน:
<p>ข้อความในย่อหน้า</p>
ตัวอย่าง:
<p>นี่คือย่อหน้าแรกของเนื้อหา</p>
<p>และนี่คือย่อหน้าที่สอง ซึ่งอาจจะยาวกว่าย่อหน้าแรก</p>
ผลลัพธ์:
นี่คือย่อหน้าแรกของเนื้อหา
และนี่คือย่อหน้าที่สอง ซึ่งอาจจะยาวกว่าย่อหน้าแรก
การจัดรูปแบบข้อความในย่อหน้า
ถึงแม้ว่าแท็ก <p> จะทำหน้าที่หลักในการสร้างย่อหน้า แต่เราก็สามารถใช้แท็กอื่นๆ ภายในแท็ก <p> เพื่อจัดรูปแบบข้อความเพิ่มเติมได้ เช่น:
- <strong>: ทำให้ข้อความเป็นตัวหนา (bold)
- <em>: ทำให้ข้อความเป็นตัวเอียง (italic)
- <br>: ขึ้นบรรทัดใหม่ (line break) ภายในย่อหน้า
- <a>: สร้างลิงก์ (จะกล่าวถึงในบทถัดไป)
- <span>: ใช้สำหรับจัดรูปแบบข้อความเฉพาะส่วน (จะกล่าวถึงในบทหลังๆ)
ตัวอย่าง:
<p>นี่คือย่อหน้าที่มีข้อความ<strong>ตัวหนา</strong> และข้อความ<em>ตัวเอียง</em><br>
และนี่คือข้อความที่ขึ้นบรรทัดใหม่ภายในย่อหน้าเดียวกัน</p>
ผลลัพธ์:
นี่คือย่อหน้าที่มีข้อความตัวหนา และข้อความตัวเอียง
และนี่คือข้อความที่ขึ้นบรรทัดใหม่ภายในย่อหน้าเดียวกัน
การใช้ Attributes กับ <p>
เช่นเดียวกับแท็ก HTML อื่นๆ แท็ก <p> ก็สามารถมี attributes ได้ attributes ที่พบบ่อยและมีประโยชน์คือ:
- class: ใช้สำหรับกำหนด class ให้กับย่อหน้า เพื่อใช้ในการจัดรูปแบบด้วย CSS (Cascading Style Sheets)
- id: ใช้สำหรับกำหนด ID ที่ไม่ซ้ำกันให้กับย่อหน้า เพื่อใช้ในการอ้างอิงจาก CSS หรือ JavaScript
- style: ใช้สำหรับกำหนด style inline ให้กับย่อหน้า (ไม่แนะนำให้ใช้บ่อยนัก ควรใช้ CSS ภายนอกมากกว่า)
- align: ใช้สำหรับกำหนดการจัดเรียงข้อความภายในย่อหน้า (เลิกใช้แล้ว ควรใช้ CSS แทน)
ตัวอย่าง:
<p class="highlight" id="first-paragraph" style="text-align: justify;">
นี่คือย่อหน้าที่ถูกกำหนด class, id และ style
</p>
ในตัวอย่างนี้:
class="highlight"กำหนด class ชื่อ "highlight" ให้กับย่อหน้า ซึ่งเราสามารถใช้ CSS เพื่อกำหนด style ให้กับย่อหน้าที่มี class นี้ได้id="first-paragraph"กำหนด ID ชื่อ "first-paragraph" ให้กับย่อหน้า ซึ่งเราสามารถใช้ ID นี้เพื่ออ้างอิงย่อหน้านี้จาก CSS หรือ JavaScript ได้style="text-align: justify;"กำหนด style inline ให้กับย่อหน้า โดยให้จัดเรียงข้อความแบบชิดขอบทั้งสองด้าน (justify)
หมายเหตุ: การใช้ attribute align ได้ถูกยกเลิก (deprecated) ใน HTML5 และไม่แนะนำให้ใช้งาน ควรใช้ CSS property text-align แทน
ความสำคัญของการแบ่งย่อหน้า
การแบ่งย่อหน้าอย่างเหมาะสมเป็นสิ่งสำคัญอย่างยิ่งสำหรับการสร้างเนื้อหาที่อ่านง่ายและน่าติดตาม การแบ่งย่อหน้าที่ดีจะช่วยให้ผู้อ่าน:
- เข้าใจเนื้อหาได้ง่ายขึ้น: ย่อหน้าแต่ละย่อหน้าควรมีใจความสำคัญเพียงหนึ่งเดียว การแบ่งย่อหน้าตามใจความจะช่วยให้ผู้อ่านเข้าใจประเด็นหลักของแต่ละส่วนได้ง่ายขึ้น
- พักสายตา: การแบ่งย่อหน้าช่วยให้ผู้อ่านมีช่วงพักสายตา ทำให้ไม่อ่อนล้าและสามารถอ่านเนื้อหาได้นานขึ้น
- ติดตามเนื้อหาได้ง่ายขึ้น: ย่อหน้าที่สั้นและกระชับจะช่วยให้ผู้อ่านติดตามเนื้อหาได้ง่ายขึ้น
หลักการทั่วไปในการแบ่งย่อหน้า:
- หนึ่งย่อหน้า หนึ่งใจความ: แต่ละย่อหน้าควรพูดถึงประเด็นหลักเพียงหนึ่งเดียว
- ความยาวที่เหมาะสม: ย่อหน้าไม่ควรยาวเกินไป โดยทั่วไปแล้วย่อหน้าควรมีความยาวประมาณ 3-5 บรรทัด
- ความต่อเนื่องของเนื้อหา: แต่ละย่อหน้าควรเชื่อมโยงกับย่อหน้าก่อนหน้าและย่อหน้าถัดไป
ตัวอย่างการแบ่งย่อหน้าที่ดี:
<p>HTML (HyperText Markup Language) คือภาษามาตรฐานที่ใช้ในการสร้างโครงสร้างของเว็บไซต์</p>
<p>HTML ประกอบด้วยชุดของแท็ก (tags) ที่ใช้สำหรับกำหนดองค์ประกอบต่างๆ ของหน้าเว็บ เช่น หัวเรื่อง ย่อหน้า รูปภาพ ลิงก์ และอื่นๆ</p>
<p>การเรียนรู้ HTML เป็นพื้นฐานที่สำคัญสำหรับการพัฒนาเว็บไซต์ เพราะ HTML เป็นตัวกำหนดว่าเนื้อหาและองค์ประกอบต่างๆ จะถูกจัดวางอย่างไรบนหน้าเว็บ</p>
เปรียบเทียบกับการไม่แบ่งย่อหน้า:
<p>HTML (HyperText Markup Language) คือภาษามาตรฐานที่ใช้ในการสร้างโครงสร้างของเว็บไซต์ HTML ประกอบด้วยชุดของแท็ก (tags) ที่ใช้สำหรับกำหนดองค์ประกอบต่างๆ ของหน้าเว็บ เช่น หัวเรื่อง ย่อหน้า รูปภาพ ลิงก์ และอื่นๆ การเรียนรู้ HTML เป็นพื้นฐานที่สำคัญสำหรับการพัฒนาเว็บไซต์ เพราะ HTML เป็นตัวกำหนดว่าเนื้อหาและองค์ประกอบต่างๆ จะถูกจัดวางอย่างไรบนหน้าเว็บ</p>
จะเห็นได้ว่าการแบ่งย่อหน้าทำให้เนื้อหาอ่านง่ายและเข้าใจได้ง่ายกว่าอย่างชัดเจน
สรุป
ในบทนี้เราได้เรียนรู้เกี่ยวกับแท็ก <p> ซึ่งเป็นแท็กพื้นฐานที่สำคัญสำหรับการสร้างย่อหน้าในหน้าเว็บเพจ เราได้เรียนรู้ถึงการใช้งานแท็ก <p> การจัดรูปแบบข้อความภายในย่อหน้า การใช้ attributes กับแท็ก <p> และความสำคัญของการแบ่งย่อหน้าอย่างเหมาะสม
ในบทถัดไป เราจะมาเรียนรู้เกี่ยวกับแท็กลิงก์ (<a>) ซึ่งเป็นแท็กที่ใช้สำหรับสร้างลิงก์ไปยังหน้าเว็บอื่นๆ หรือไปยังส่วนต่างๆ ของหน้าเว็บเดียวกัน