The header tag

<header> element นั้นค่อนข้างจะคลุมเคลือเพราะมันสามารถใช้ได้หลายแบบ สิ่งแรกที่ควรจะรู้คือ <header> element ไม่ใช่การขึ้นหัวข้อใหม่ แต่มันเป็นหัวข้อของข้อมูลที่มีอยู่แล้ว อย่างที่ 2 คือ ไม่ควรจะใช้สลับกับ <head> element เพราะว่ามันเป็น element คนละตัวกัน

หน้าตาของมันจะเป็นดังนี้

<header>...</header>

เราสามารถมี 2 <header> element ในหน้า page เดียวกันได้ไหม? คำตอบคือ ได้ ลองคิดว่าเรามี 3 blog ในหน้าเดียวกัน เราก็จะมี <header> ให้ทั้งหมด

ตัวอย่าง Flour-article จากตัวอย่างเก่าที่เราใช้ <div> element ในการแบ่งหัวข้อ ตอนนี้เราจะแทนที่ด้วย <header> element

<article>
	<header>
		<h1>All About Flour</h1>
		<p class="teaser">Wheat flour is the backbone of the baked goods we love.</p>
		<p class="byline">by Jane Doe</p> 
	</header>

	<div id="content">
		<h2>The Two Types of Wheat</h2>
…

เมื่อเราใช้ <header> element เราควรใช้ heading tag (<h1> - <h6>) แต่เราสามารถมีได้ หลายๆตัว เราสามารถใช้ <hgroup> element ได้อีกด้วย ซึ่งจะอธิบายในบทต่อๆไป เราสามารถมี header อื่น ๆได้ อีก เช่น byline (by ชื่อคน), publication date (วันที่ผลิต/ ตีพิมพ์), table of content (สารบัญ)

สรุป

<header> เป็น semantic element ใหม่ของ HTML5
<header> จะใช้ในกลุ่มของข้อมูล ไม่จำเป็นต้องอยู่ด้านบนเสมอ
• เพราะฉะนั้นจึงสามารถมี <header> ได้หลายๆตัวในเอกสารเดียวกัน

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!

Metadata

The header tag

สรุป