TOC

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

Semantic HTML5 section tags:

The footer tag

พื้นที่ด้านล่างของ website โดยปกติแล้วจะมีข้อมูลแสดงอยู่ เช่น copyright, ลิงค์ไปที่ต่างๆ, หรือทีติดต่อกลับ ซึ่งเหมือนกับ <header> ที่ <footer> element ที่ไม่ได้เป็นการเริ่มการจัดหมู่ แต่จะเป็นส่วนสุดท้ายที่มี <article> และ <section> อยู่

หมายความว่าเราสามารถมี footer ได้หลายอันใน 1 page ถ้าเรามีหลายๆ blog เราก็จะมี footer ให้แต่ละ blog ได้ แล้วยังมี footer ให้ page ได้อีกด้วย

ตัวอย่าง Flour-article เราจะ ใช้ <footer> element ได้ดังนี้

</header>
<div id="content">
	<h2>The Two Types of Wheat</h2>
	…
</div>
<footer>
	<p class="disclaimer">This article is copyright of AllRecipes.com</p>
	<p><a href="http://allrecipes.com/howto/all-about-flour/">See the original article here</a></p>
	<p>Part of <a href="http://www.html5-tutorials.org">HTML5-tutorials.org</a></p>
</footer>
</article>

ถ้า footer มีแค่ link หน้าตา <footer> tage จะเป็นแบบนี้

<footer>
	<ul>
		<li>About us</li>
		<li>Contact</li>
		…
	</ul>
</footer>

แล้วในส่วนของ footer ควรมีอะไร? ควรจะเป็นข้อมูลที่เกี่ยวของกับบทความแต่ไม่ได้อยู่ในบทความ

ในส่วนของ blog <footer> จะใส่ข้อมูลของ comment, facebook like-button, publication date (วันที่ผลิต/ ตีพิมพ์) ถ้าไม่ได้ใส่ใน <header>

สรุป

  • Footer เป็นส่วนสุดท้ายของ page ไม่จำเป็นต้องเป็นบทความ
  • <footer> element เป็น nest ด้านในของ parent element
  • เราสามารถมี footer ได้หลายอันใน 1 page
  • Footer จะมีข้อมูลแสดงอยู่ เช่น ผู้แต่ง, publish date(วันที่ผลิต/ ตีพิมพ์), หรือ copyright
  • <footer> element เป็น block-level 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!