พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน p Tag

แท็ก <p> ใน HTML5 ใช้เพื่อสร้าง ย่อหน้า (paragraph) ภายในเอกสาร HTML เป็นหนึ่งในแท็กที่สำคัญที่สุดและใช้บ่อยมากในการจัดรูปแบบเนื้อหา โดยแท็กนี้ทำหน้าที่แยกกลุ่มข้อความออกจากกันเพื่อให้อ่านง่ายขึ้น โดยไม่ต้องเว้นบรรทัดหรือเพิ่มช่องว่างด้วยการใช้โค้ด HTML เพิ่มเติม

โครงสร้างพื้นฐานของแท็ก <p>

HTML
<p>เนื้อหาของย่อหน้านี้จะอยู่ภายในแท็ก p</p>

ผลลัพธ์ที่ได้คือจะเป็นการแสดงข้อความในรูปแบบย่อหน้า โดยเบราว์เซอร์ส่วนใหญ่จะมีการเว้นบรรทัดอัตโนมัติระหว่างย่อหน้า

ตัวอย่างการใช้งานพื้นฐาน

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <title>ตัวอย่างการใช้งานแท็ก p</title>
</head>
<body>

<p>นี่คือย่อหน้าแรกที่สร้างขึ้นด้วยแท็ก p.</p>
<p>นี่คือย่อหน้าที่สอง ซึ่งถูกแยกจากย่อหน้าแรกด้วยการใช้แท็ก p เช่นเดียวกัน.</p>

</body>
</html>

การใช้แท็ก <p> ในรูปแบบต่าง ๆ

การแทรกเนื้อหาข้อความปกติ

  • สามารถใช้สำหรับการแทรกข้อความปกติที่เราต้องการให้มีการแบ่งย่อหน้า เช่น
HTML
<p>ข้อความนี้เป็นย่อหน้าแรก</p>
<p>ข้อความนี้เป็นย่อหน้าที่สอง</p>

การใช้งานภายในฟอร์แมตอื่นๆ

  • สามารถใส่แท็กอื่น ๆ ภายใน <p> ได้ เช่น <strong>, <em>, <a>, เป็นต้น
HTML
<p>ย่อหน้านี้มีการเน้นคำว่า <strong>สำคัญ</strong> และแทรกลิงก์ <a href="https://example.com">คลิกที่นี่</a></p>

การจัดการช่องว่างระหว่างย่อหน้า

  • แท็ก <p> จะแทรกช่องว่างระหว่างย่อหน้าโดยอัตโนมัติในเบราว์เซอร์
HTML
<p>ย่อหน้าที่ 1</p>
<p>ย่อหน้าที่ 2 จะมีช่องว่างระหว่างย่อหน้าโดยอัตโนมัติ</p>

การใส่รูปภาพหรือมัลติมีเดีย

  • สามารถแทรกรูปภาพหรือวิดีโอในย่อหน้าได้เพื่อรวมเนื้อหาหลายรูปแบบ
HTML
<p>นี่คือรูปภาพ:</p>
<p><img src="image.jpg" alt="รูปภาพตัวอย่าง"></p>

การใช้ CSS กับแท็ก <p>

  • สามารถใช้ CSS เพื่อปรับแต่งลักษณะการแสดงผลของย่อหน้า เช่น การตั้งค่าขนาดตัวอักษร สี หรือระยะห่าง
HTML
<style>
    p {
        font-size: 18px;
        color: blue;
    }
</style>
<p>ย่อหน้าที่ถูกจัดการด้วย CSS</p>

การใช้แท็ก <p> ร่วมกับ JavaScript

  • สามารถใช้งานแท็ก <p> ร่วมกับ JavaScript เพื่อจัดการเนื้อหาหรือเพิ่มความโต้ตอบได้
HTML
<p id="myPara">ย่อหน้าที่จะถูกเปลี่ยนข้อความโดย JavaScript</p>
<script>
    document.getElementById("myPara").innerHTML = "ข้อความนี้ถูกเปลี่ยนด้วย JavaScript!";
</script>

การใช้แท็ก <p> ในการทำงานกับเนื้อหาแบบ dynamic

  • ใช้กับเนื้อหาแบบ dynamic เช่น ข้อมูลที่ดึงมาจากฐานข้อมูลหรือ API และทำการแสดงผลในรูปแบบย่อหน้า
HTML
<div id="content"></div>
<script>
    let data = "ข้อความที่ได้มาจาก API หรือฐานข้อมูล";
    document.getElementById("content").innerHTML = `<p>${data}</p>`;
</script>

ข้อควรระวัง

  • ห้ามใช้แท็ก <p> ซ้อนกันหรืออยู่ภายใน <p> โดยตรง เช่น <p><p>...</p></p> เบราว์เซอร์จะไม่ยอมรับการเขียนแบบนี้
  • แท็ก <p> ควรใช้กับเนื้อหาที่เป็นข้อความหรือย่อหน้าเท่านั้น ไม่ควรใช้เพื่อจัดการโครงสร้างของเลย์เอาต์

การใช้แท็ก <p> อย่างเหมาะสมช่วยให้การแสดงผลเนื้อหาเป็นไปอย่างมีระเบียบและเป็นมาตรฐาน

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ