Semantic elements หมายถึง “องค์ประกอบ (แท็ก) ที่มีความหมายในตัวเอง”
Semantic Elements คืออะไร ?
Semantic Elements คือ แท็ก HTML ที่มีความหมายในตัวเอง บอกได้ว่าข้อมูลภายในนั้นคืออะไร หรือทำหน้าที่อะไร
ตัวอย่างแท็กที่ไม่เป็น Semantic:
<div> และ <span> แท็กเหล่านี้ “ไม่บอกว่าเนื้อหาภายในคืออะไร”
ตัวอย่างแท็กที่เป็น Semantic: <img>, <table>, <article> แท็กเหล่านี้ “บอกความหมายของเนื้อหาได้ชัดเจน”
Semantic Elements ใน HTML
เว็บไซต์ส่วนใหญ่จะใช้แท็ก <div> แทนส่วนต่าง ๆ ของเว็บ เช่น
<div id="nav"> </div>
<div class="header"> </div>
<div id="footer"> </div>
แต่ HTML มีแท็ก Semantic โดยเฉพาะ เช่น <article>, <aside>, <details>, <figure>, <footer>, <header>, <main>, <nav>, <section>, <time>
HTML <section> Element
ใช้กำหนด ส่วนหนึ่งของเอกสาร เช่น บท บทนำ หรือรายการข่าว โดยปกติหน้าเว็บสามารถแบ่งได้เป็นส่วนต่าง ๆ เช่น บทนำ เนื้อหา และข้อมูลติดต่อ
<section>
<h1>Web Hosting</h1>
<p>บริการ Web Hosting บน Server ประสิทธิภาพสูง ใช้งานง่าย รองรับการใช้งานหลากหลาย พร้อมระบบติดตั้ง Script อัตโนมัติ เราบริการด้วยทีมงาน Network Engineer ที่ความรู้ความเชี่ยวชาญด้าน Web Hosting โดยเฉพาะ</p>
</section>
<section>
<h1>Cloud Server</h1>
<p>บริการ Cloud Server สำหรับ Web หรือ Application ที่ต้องการประสิทธิภาพ และความเสถียรภาพสูงสุด อิสระในการใช้งาน สามารถเลือกและติดตั้ง OS ได้เอง</p>
</section>
HTML <article> Element
ใช้กำหนด เนื้อหาที่เป็นอิสระและมีความหมายในตัวเอง เช่น บทความ ข่าว หรือโพสต์
บทความสามบทความที่มีเนื้อหาแยกกัน
<article>
<h2>Google Chrome</h2>
<p>Google Chrome เป็นเว็บเบราว์เซอร์ที่พัฒนาโดย Google ซึ่งเปิดตัวในปี 2008 ปัจจุบัน Chrome เป็นเว็บเบราว์เซอร์ที่ได้รับความนิยมมากที่สุดในโลก!</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox เป็นเว็บเบราว์เซอร์โอเพ่นซอร์สที่พัฒนาโดย Mozilla Firefox เป็นเว็บเบราว์เซอร์ที่ได้รับความนิยมเป็นอันดับสองตั้งแต่เดือนมกราคม 2018</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge เป็นเว็บเบราว์เซอร์ที่พัฒนาโดย Microsoft ซึ่งเปิดตัวในปี 2558 Microsoft Edge เข้ามาแทนที่ Internet Explorer</p>
</article>
ใช้ CSS เพื่อกำหนดรูปแบบให้กับองค์ประกอบ
<article>
<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>
<article class="all-browsers">
<h1>Browsers ยอดฮิต</h1>
<article class="browser">
<h2>Google Chrome</h2>
<p>Google Chrome เป็นเว็บเบราว์เซอร์ที่พัฒนาโดย Google ซึ่งเปิดตัวในปี 2008 ปัจจุบัน Chrome เป็นเว็บเบราว์เซอร์ที่ได้รับความนิยมมากที่สุดในโลก!</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox เป็นเว็บเบราว์เซอร์โอเพ่นซอร์สที่พัฒนาโดย Mozilla Firefox เป็นเว็บเบราว์เซอร์ที่ได้รับความนิยมเป็นอันดับสองตั้งแต่เดือนมกราคม 2018</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge เป็นเว็บเบราว์เซอร์ที่พัฒนาโดย Microsoft ซึ่งเปิดตัวในปี 2558 Microsoft Edge เข้ามาแทนที่ Internet Explorer</p>
</article>
</article>
ซ้อน <article> ใน <section> หรือในทางกลับกัน
สามารถมี <section> ภายใน <article> หรือ <article> ภายใน <section> ก็ได้ ทั้งหมดขึ้นอยู่กับว่า โครงสร้างเนื้อหาแบบไหนเหมาะสมกับเว็บ
HTML <header> Element
แท็ก
<header> ใช้เป็น “ส่วนหัว” ของหน้าเว็บหรือของเนื้อหาย่อย ๆ เช่น <article>
โดยมักใช้เก็บ
- หัวเรื่อง (เช่น
<h1>–<h6>) - โลโก้ หรือไอคอน
- ข้อมูลผู้เขียน
⚠️ หมายเหตุ
สามารถมี
<header> ได้หลายอันในหน้าเดียว
แต่ห้ามวาง <header> ไว้ใน <footer>, <address> หรือ <header> อื่น
<article>
<header>
<h1>hostatom</h1>
<p>เกี่ยวกับเรา</p>
</header>
<p>hostatom.com ภายใต้การดำเนินการของ Network Technical System Co., Ltd. เราให้บริการ Hosting แบบครบวงจร เราเป็นบริษัทจดทะเบียน ที่คลุกคลีกับงาน Server และ Network Infrastructure มานานกว่า 10 ปี</p>
</article>
HTML <footer> Element
แท็ก <footer ใช้สำหรับกำหนดส่วนท้ายของหน้าเว็บหรือเนื้อหาย่อย มักมีข้อมูล เช่น ผู้เขียน (Author) ลิขสิทธิ์ (Copyright) การติดต่อ (Contact) ลิงก์กลับด้านบน ลิงก์ที่เกี่ยวข้อง และสามารถมีหลาย <footer องค์ประกอบในเอกสารเดียว
<footer>
<p>ผู้เขียน: ชัชชัย</p>
<p><a href="mailto:hostatom@example.com">hostatom@example.com</a></p>
</footer>
HTML <nav> Element
แท็ก <nav> ใช้เพื่อรวม ชุดของลิงก์นำทางหลักในเว็บไซต์ เช่น เมนูหลัก (Main Menu)
⚠️ หมายเหตุ
ไม่จำเป็นต้องใส่ลิงก์ทุกอันใน
<nav> ให้ใช้เฉพาะส่วนหลัก ๆ เท่านั้น
<nav>
<a href="/content/">ศูนย์ความรู้</a> |
<a href="/lessons/">บทเรียน</a>
</nav>
HTML <aside> Element
แท็ก
<aside> ใช้สำหรับแสดงเนื้อหาที่ เกี่ยวข้องทางอ้อม กับเนื้อหาหลัก
มักใช้ทำเป็น แถบด้านข้าง (sidebar)
<p>สัปดาห์นี้ฉันและเพื่อนนัดกันจะไปสวนสัตว์เปิดเขาเขียว ที่นั่นมีโซนการแสดงสัตว์ต่างๆเยอะมาก คงต้องวางแผนเวลาให้ดีเพื่อที่จะได้ดูแต่ละโซนให้ครบทั้งหมด</p>
<aside>
<p>โซนจัดแสดง: หุบเสือป่า กรงนกใหญ่ สวนละมั่ง ส่วนแสดงช้าง ลีเมอร์แลนด์ แอฟริกัน และซาวันน่า</p>
</aside>
HTML <figure> และ <figcaption> Elements
แท็ก
<figure> ใช้เก็บเนื้อหาที่เป็น สื่ออิสระ เช่น รูปภาพ, แผนภาพ, หรือโค้ด
และแท็ก <figcaption> ใช้ใส่ คำอธิบายภาพ (caption)
<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
สรุป
<article>ใช้กำหนดบทความหรือเนื้อหาย่อยที่เป็นอิสระ เช่น ข่าว หรือโพสต์บล็อก<aside>ใช้กำหนดเนื้อหาที่เกี่ยวข้องหรือเสริมกับเนื้อหาหลัก เช่น แถบด้านข้าง (Sidebar)<details>ใช้สร้างส่วนที่สามารถเปิด/ปิด เพื่อแสดงรายละเอียดเพิ่มเติมได้<figcaption>ใช้กำหนดคำบรรยายภาพในแท็ก<figure><figure>ใช้ครอบภาพ แผนภูมิ โค้ด หรือเนื้อหาที่เป็นสื่อประกอบ พร้อมคำอธิบาย<footer>ใช้กำหนดส่วนท้ายของหน้าเว็บหรือส่วนท้ายของบทความ<header>ใช้กำหนดส่วนหัวของหน้าเว็บหรือส่วนหัวของเนื้อหา<main>ใช้กำหนดส่วนเนื้อหาหลักของเอกสาร ซึ่งไม่ซ้ำกับส่วนหัวหรือส่วนท้าย<mark>ใช้เน้นข้อความ เช่น การไฮไลต์คำสำคัญ<nav>ใช้กำหนดส่วนของลิงก์นำทาง (Navigation Menu)<section>ใช้กำหนดส่วนของเนื้อหาในเอกสาร เช่น บท หรือหัวข้อย่อย<summary>ใช้กำหนดหัวข้อสรุปของ<details><time>ใช้แสดงเวลา หรือวันที่ ในรูปแบบที่เครื่องอ่านและโปรแกรมสามารถประมวลผลได้