TOC

This article is currently in the process of being translated into Thai (~96% done).

Semantic HTML5 section tags:

The article tag

Article element เป็น ใหม่ของ HTML5 เราจะใช้ <article> element ในการสร้างสารบัญของข้อมูล เราสามารถใช้ใน “about me”, “blog entry”, และ “comment” ของ blog entry
แต่เราจะไม่ใช้ <article> element ทุกย่อหน้า เราควรใช้เมื่อจำเป็นและสมเหตุสมผล

ตัวอย่าง Flour-article จะเป็นแบบตัวอย่างด้านล่าง (จะสังเกตเห็นว่าแทนที่จะใช้ข้อมูลทั้งหมด เราจะแทนที่จุด 3 จุด เพื่อลดการใช้พื้นที)

<!DOCTYPE html>
	<body>
	<article>
		<div id="header">
			<h1>All About Flour</h1>
			...
		</div>
		<div id="content">
			<h2>The Two Types of Wheat</h2>
				<p>There are…</p>
			<h2>All-Purpose Flour</h2>
				<p>All-purpose …</p>
			...
		</div>
	</article>
	</body>
</html>

จากตัวอย่าง ด้านบน จะประกอบไปด้วย <div id="header"> และ <div id="content"> เราจะยังไม่ใช้ <div id="footer"> เพราะบทความนี้จะไม่ครอบคลุมหัวข้อนี้ เราจะยังใช้ div element ในตัวอย่างนี้ แต่ในบทต่อๆไป เราจะใช้ element ของ HTML5 มาแทนที่

นี่ก็เป็นอีกตัวอย่างนึงของการใช้ article element เราจะใช้ element กับตัวอย่างที่แล้วของ blog entry เราจะใช้ เพื่อรวม blog entry เข้าด้วยกัน

<article>
	<h1>Just Another Day</h1>
	<p>Written by Christina<br />
	On January 11th </p>
	<p class="content">This is my second blog entry, and I just wanted to check in on you </p>
</article>
<article>
	<h1>My First Blog Entry</h1>
	<p>Written by Christina<br />
	On January 10th </p>
	<p class="content">I’m so happy to write my first blog entry – yay!</p>
</article>

สรุป

  • <article> เป็น semantic element ใหม่ของ HTML5
  • เราควรใช้ <article> เช่นใน rss-reader เมื่อจำเป็นและสมเหตุสมผล
  • <article> เป็น element ที่เฉพาะเจาะจงซึ่งจะไม่เหมือนกับ <div> element
This article has been fully translated into the following languages:
Is your preferred language not on the list? Click here to help us translate this article into your language!
adplus-dvertising