Tag <article>
ความหมายและการใช้งาน
แท็ก <article> จะใช้ครอบคลุมสิ่งที่มีความหมายในตัวของมันเองบนเว็บเพจ เช่น ข่าว บทความ เป็นต้น สังเกตว่าสิ่งเหล่านี้ ไม่ว่าจะวางไว้ตรงไหน ยังคงมีความหมายอยู่ สามารถเข้าใจได้
นอกจากนั้นแล้ว <article> ยังสามารถใช้ซ้อนกันภายใน <article> เองได้อีกด้วย ซึ่งจะใช้ในกรณีที่เนื้อหาภายใน <article> นั้นๆ มีบางส่วน ที่มีความหมายในตัวของมันเอง แม้ว่าจะตัดเนื้อหารอบๆ ออกก็ยังอ่านเข้าใจ เช่น ความคิดเห็นของบทความ เป็นต้น
ตัวอย่างการใช้งาน
<article>
<h1>Google Chrome</h1>
<p>Google Chrome is a free, open-source web browser developed by Google.</p>
</article>
Tag <section>
ความหมายและการใช้งาน
คือ การแบ่งกลุ่มเนื้อหาออกเป็นส่วนๆ เช่น การแบ่งบทความออกเป็น chapter หรือแบ่งเนื้อหาทั้งหมดออกเป็นประเด็นย่อยๆ อย่างการแบ่งข่าวออกเป็น กลุ่มของข่าวในพระราชสำนัก กลุ่มของข่าวกีฬา กลุ่มของข่าวบันเทิง เป็นต้น โดยทั่วไปเรามักจะใช้ Section ภายใน Article และเนื้อหาภายใน section จะต้องเกี่ยวข้องกันทั้งหมด ที่สำคัญคือ section ไม่ได้ใช้สำหรับแบ่งเว็บเพจออกเป็นส่วนๆ ไม่ได้ใช้สำหรับทำ Layout ถ้าอยากทำ Layout ให้ใช้ div แทน
ตัวอย่างการใช้งาน
<section>
<h3>Red Delicious</h3>
<p>These bright red apples are the most common found in many supermarkets.</p>
</section>
Tag <aside>
ความหมายและการใช้งาน
<aside> ส่วนของเนื้อหาที่เกี่ยวของกับเนื้อหาหลักที่อยู่โดยรอบ โดยมีจุดประสงค์เพื่อให้แยกออกจากเนื้อหาหลัก
และใช้เป็นกรอบคำอธิบายเพิ่มเติมที่เกี่ยวข้องกับเนื้อหาหลัก และนอกจากนี้ <aside> ยังสามารถใช้เป็นส่วนของ แถบด้านข้าง (Sidebar) ได้อีกด้วย
ตัวอย่างการใช้งาน
<aside>
<h4>Epcot Center</h4>
</aside>
Tag <nav>
ความหมายและการใช้งาน
tag nav คือ การนำทางหรือ ลิ้งค์นำทาง nav ไม่จำเป็นต้อง ใส่อันต่ออัน สามารถใส่ครอบคลุมทีเดียวหลายๆอันได้เลย
ตัวอย่างการใช้งาน
<nav>
<a href=”/html/”>HTML</a> |
<a href=”/css/”>CSS</a> |
<a href=”/js/”>JavaScript</a> |
<a href=”/jquery/”>jQuery</a>
</nav>
Tag <header>
ความหมายและการใช้งาน
เป็น element ที่ใช้ครอบเนื้อหาที่เป็นต้นขั้วของเอกสาร โดยวิธีการใช้จะขึ้นด้วย <header> …… </header>
ตัวอย่างการใช้งาน
<html>
<body>
<header>
<h1>Heading A</h1>
<p>เนื้อหาส่วนนี้เป็นของ Heading A</p>
<h2>Heading B</h2>
<p>เนื้อหาส่วนนี้เป็นของ Heading B</p>
<h2>Heading C</h2>
<p>เนื้อหาส่วนนี้เป็นของ Heading C</p>
</header>
<p>คำถาม: เนื้อหาส่วนนี้เป็นของ Heading ไหน?</p>
</body>
</html>
Tag <footer>
ความหมายและการใช้งาน
แท็ก footer เป็นแท็กที่ใช้สำหรับใส่อะไรก็ได้ที่อยู่ด้านล่างๆ อย่างเช่น creadit ผู้แต่งเว็บไซต์ หรือหน้า site map รวบรวมลิ้งก์ของเว็บไซต์เราเอง
ตัวอย่างการใช้งาน
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: someone@example.com </p>
</footer>