HTML <article> ตาม

  • หน้าก่อน <area>
  • หน้าต่อไป <aside>

การใช้งานและการประกาศ

<article> ตาก์ก์กำหนดเนื้อหาที่เป็นส่วนที่เป็นตัวเองและมีความเป็นตัวเองเด็ดขาด

บทความควรสามารถเข้ารับความเข้าใจได้โดยตัวเองและสามารถแจกจ่ายอิสระจากเว็บไซต์ทั้งหมดได้

<articel> แหล่งข้อมูลองค์ประกอบนี้รวมถึง:

  • ข้อความในฟอรัม
  • บทความบล็อก
  • รายงานข่าว
  • ความคิดเห็นของผู้ใช้

สัญญาณเตือน:ในเว็บเบราว์เซอร์<article> องค์ประกอบนี้จะไม่แสดงรูปแบบพิเศษใดๆ แต่คุณสามารถใช้ CSS ที่จะทำสไตล์ได้ <article> องค์ประกอบ (ดูตัวอย่างด้านล่าง)

ดูเพิ่มเติมที่:

คู่มืออ้างอิง HTML DOM:วัตถุ Article

ตัวอย่าง

ตัวอย่าง 1

สามบทความที่เป็นส่วนที่เป็นตัวเองและมีความเป็นตัวเองเด็ดขาด:

<article>
<h2>กูเกิล ชโรม</h2>
<p>กูเกิล ชโรม คือเว็บเบราว์เซอร์ที่พัฒนาโดยกูเกิล และเปิดตัวในปี 2008 ชโรมเป็นเว็บเบราว์เซอร์ที่เปิดกว้างที่สุดในโลกในปัจจุบัน</p>
</article>
<article>
<h2>มอซิลลา ฟากซ์ ไฟร์โฟกซ์</h2>
<p>มอซิลลา ฟากซ์ ไฟร์โฟกซ์ คือเว็บเบราว์เซอร์ที่เปิดตัวโดยมอซิลลา ฟากซ์ ซึ่งเป็นเว็บเบราว์เซอร์ที่เปิดกว้างที่สุดที่สองตั้งแต่เดือนมกราคม 2018 จนถึงขณะนี้</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge คือบราวเซอร์ที่พัฒนาโดย Microsoft และเปิดตัวในปี 2015 แทน Internet Explorer</p>
</article>

ลองทดลองเอง

ตัวอย่าง 2

ตั้งค่าสไตล์สำหรับองค์ประกอบ <article> ด้วย CSS:

<html>
<head>
<style>
.all-browsers {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}
.all-browsers > h1, .browser {
  margin: 10px;
  padding: 5px;
}
.browser {
  background: white;
}
.browser > h2, p {
  margin: 4px;
  font-size: 90%;
}
</style>
</head>
<body>
<article class="all-browsers">
  <h1>เว็บเบราว์เซอร์ที่เปิดกว้างที่สุด</h1>
  <article class="browser">
    <h2>กูเกิล ชโรม</h2>
    <p>กูเกิล ชโรม คือเว็บเบราว์เซอร์ที่พัฒนาโดยกูเกิล และเปิดตัวในปี 2008 ชโรมเป็นเว็บเบราว์เซอร์ที่เปิดกว้างที่สุดในโลกในปัจจุบัน</p>
  </article>
  <article class="browser">
    <h2>มอซิลลา ฟากซ์ ไฟร์โฟกซ์</h2>
    <p>มอซิลลา ฟากซ์ ไฟร์โฟกซ์ คือเว็บเบราว์เซอร์ที่เปิดตัวโดยมอซิลลา ฟากซ์ ซึ่งเป็นเว็บเบราว์เซอร์ที่เปิดกว้างที่สุดที่สองตั้งแต่เดือนมกราคม 2018 จนถึงขณะนี้</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge คือบราวเซอร์ที่พัฒนาโดย Microsoft และเปิดตัวในปี 2015 แทน Internet Explorer</p>
  </article>
</article>
</body>
</html>

ลองทดลองเอง

รายการทั่วไป

<article> แบบตัวอย่างยังสนับสนุน รายการทั่วไปใน HTML。

รายการเหตุการณ์

<article> แบบตัวอย่างยังสนับสนุน รายละเอียดของรายการเหตุการณ์ใน HTML。

การตั้งค่า CSS ปริยาย

โดยมากบราวเซอร์จะแสดงค่าปริยายดังนี้ <article> องค์ประกอบ：

article {
  display: block;
}

การสนับสนุนโดยบราวเซอร์

ตัวเลขในตารางระบุว่าบราวเซอร์ที่สนับสนุนองค์ประกอบนี้เต็มที่สุด

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
6.0 9.0 4.0 5.0 11.1
  • หน้าก่อน <area>
  • หน้าต่อไป <aside>