HTML Semantic Elements
องค์ประกอบเชิงความหมาย = องค์ประกอบที่มีความหมาย
องค์ประกอบเชิงความหมายคืออะไร?
องค์ประกอบเชิงความหมายอธิบายความหมายของทั้งเบราว์เซอร์และนักพัฒนาอย่างชัดเจน
ตัวอย่างขององค์ประกอบที่ไม่ใช่ความหมาย<div> : และ<span>- ไม่บอกอะไรเกี่ยวกับเนื้อหา
ตัวอย่างขององค์ประกอบเชิงความหมาย<form> : , <table>, และ<article>- กำหนดเนื้อหาอย่างชัดเจน
องค์ประกอบความหมายใน HTML
เว็บไซต์จำนวนมากมีโค้ด HTML เช่น <div id="nav"> <div class="header"> <div id="footer"> เพื่อระบุการนำทาง ส่วนหัว และส่วนท้าย
ใน HTML มีองค์ประกอบเชิงความหมายบางอย่างที่สามารถใช้เพื่อกำหนดส่วนต่างๆ ของหน้าเว็บ:
- <บทความ>
- <กัน>
- <รายละเอียด>
- <figcaption>
- <รูป>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <สรุป>
- <เวลา>
HTML <section> องค์ประกอบ
องค์ประกอบ<section>กำหนดส่วนในเอกสาร
ตามเอกสาร HTML ของ W3C: "ส่วนคือการจัดกลุ่มเนื้อหาตามธีม โดยทั่วไปจะมีส่วนหัว"
ตัวอย่างตำแหน่งที่<section>สามารถใช้องค์ประกอบได้:
- บทที่
- บทนำ
- รายการข่าว
- ข้อมูลติดต่อ
โดยปกติหน้าเว็บสามารถแบ่งออกเป็นส่วนต่างๆ สำหรับการแนะนำ เนื้อหา และข้อมูลการติดต่อ
ตัวอย่าง
สองส่วนในเอกสาร:
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an
international organization working on issues regarding the conservation,
research and restoration of the environment, formerly named the World
Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF.
The well-known panda logo of WWF originated from a panda named Chi Chi that
was transferred from the Beijing Zoo to the London Zoo in the same year of
the establishment of WWF.</p>
</section>
HTML <บทความ> องค์ประกอบ
องค์ประกอบ<article>ระบุเนื้อหาที่เป็นอิสระและมีอยู่ในตัวเอง
บทความควรมีความสมเหตุสมผลในตัวเอง และควรเผยแพร่แยกจากส่วนอื่นๆ ของเว็บไซต์ได้
ตัวอย่างตำแหน่งที่<article>องค์ประกอบสามารถใช้ได้:
- โพสต์ในฟอรั่ม
- โพสต์บล็อก
- ความคิดเห็นของผู้ใช้
- บัตรผลิตภัณฑ์
- บทความในหนังสือพิมพ์
ตัวอย่าง
บทความสามบทความที่มีเนื้อหาอิสระและมีเนื้อหาในตัวเอง:
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser
developed by Google, released in 2008. Chrome is the world's most popular
web browser today!</p>
</article>
<article>
<h2>Mozilla
Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed
by Mozilla. Firefox has been the second most popular web browser since
January, 2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p>
</article>
ตัวอย่าง 2
ใช้ CSS เพื่อจัดรูปแบบ <article> องค์ประกอบ:
<html>
<head>
<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>
</head>
<body>
<article class="all-browsers">
<h1>Most
Popular Browsers</h1>
<article class="browser">
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser
developed by Google, released in 2008. Chrome is the world's most popular web
browser today!</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an
open-source web browser developed by Mozilla. Firefox has been the second most
popular web browser since January, 2018.</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p>
</article>
</article>
</body>
</html>
ซ้อน <บทความ> ใน <ส่วน> หรือในทางกลับกัน?
องค์ประกอบ<article>
ระบุเนื้อหาที่เป็นอิสระและมีอยู่ในตัวเอง
องค์ประกอบ<section>กำหนดส่วนในเอกสาร
เราสามารถใช้คำจำกัดความเพื่อตัดสินใจว่าจะซ้อนองค์ประกอบเหล่านั้นอย่างไร ไม่เราทำไมได้!
ดังนั้น คุณจะพบหน้า HTML ที่มี<section>องค์ประกอบที่มี<article>องค์ประกอบ และ<article>องค์ประกอบที่มี<section>องค์ประกอบ
HTML <header> องค์ประกอบ
องค์ประกอบ นี้<header>แสดงถึงคอนเทนเนอร์สำหรับเนื้อหาเบื้องต้นหรือชุดของลิงก์การนำทาง
องค์ประกอบ<header>โดยทั่วไปประกอบด้วย:
- องค์ประกอบส่วนหัวอย่างน้อยหนึ่งรายการ (<h1> - <h6>)
- โลโก้หรือไอคอน
- ข้อมูลผู้แต่ง
หมายเหตุ:คุณสามารถมี<header>องค์ประกอบหลายอย่างในเอกสาร HTML เดียว อย่างไรก็ตาม<header>ไม่สามารถวางไว้ภายใน a <footer>หรือ<address>องค์ประกอบอื่น<header>ได้
ตัวอย่าง
ส่วนหัวสำหรับ <บทความ>:
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
HTML <footer> องค์ประกอบ
องค์ประกอบ<footer>กำหนดส่วนท้ายสำหรับเอกสารหรือส่วน
องค์ประกอบ<footer>โดยทั่วไปประกอบด้วย:
- ข้อมูลผู้แต่ง
- ข้อมูลลิขสิทธิ์
- ข้อมูลติดต่อ
- แผนผังเว็บไซต์
- กลับไปด้านบนลิงค์
- เอกสารที่เกี่ยวข้อง
คุณสามารถมี<footer>องค์ประกอบหลายอย่างในเอกสารเดียว
ตัวอย่าง
ส่วนท้ายในเอกสาร:
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</footer>
HTML <nav> องค์ประกอบ
องค์ประกอบ<nav>กำหนดชุดของลิงก์การนำทาง
โปรดสังเกตว่าลิงก์ทั้งหมดของเอกสารไม่ควรอยู่ภายใน<nav>องค์ประกอบ องค์ประกอบ
<nav>นี้มีไว้สำหรับบล็อกลิงก์การนำทางหลักเท่านั้น
เบราว์เซอร์ เช่น โปรแกรมอ่านหน้าจอสำหรับผู้ใช้ที่ปิดใช้งาน สามารถใช้องค์ประกอบนี้เพื่อกำหนดว่าจะละเว้นการแสดงผลเริ่มต้นของเนื้อหานี้หรือไม่
ตัวอย่าง
ชุดลิงก์การนำทาง:
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
HTML <กัน> องค์ประกอบ
องค์ประกอบ<aside>กำหนดเนื้อหาบางอย่างนอกเหนือจากเนื้อหาที่วางอยู่ (เช่นแถบด้านข้าง)
เนื้อหา<aside>ควรเกี่ยวข้องทางอ้อมกับเนื้อหาโดยรอบ
ตัวอย่าง
แสดงเนื้อหาบางส่วนนอกเหนือจากเนื้อหาที่อยู่ใน:
<p>My family and I visited The Epcot center this summer. The weather was
nice, and Epcot was amazing! I had a great summer together with my
family!</p>
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme
park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</p>
</aside>
ตัวอย่าง 2
ใช้ CSS เพื่อจัดรูปแบบ <aside> องค์ประกอบ:
<html>
<head>
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</style>
</head>
<body>
<p>My family and I visited The Epcot
center this summer. The weather was nice, and Epcot was amazing! I had a great
summer together with my family!</p>
<aside>
<p>The Epcot center is a
theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</p>
</aside>
<p>My family and I visited The Epcot center
this summer. The weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>
<p>My family and I visited The Epcot center
this summer. The weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>
</body>
</html>
HTML <รูป> และ <figcaption> องค์ประกอบ
แท็ ก<figure>ระบุเนื้อหาในตัวเอง เช่น ภาพประกอบ ไดอะแกรม ภาพถ่าย รายการรหัส ฯลฯ
แท็ ก<figcaption>กำหนดคำอธิบายสำหรับ<figure>องค์ประกอบ <figcaption>สามารถวางองค์ประกอบเป็นลูกแรกหรือลูกสุดท้ายขององค์ประกอบ<figure>ได้
องค์ประกอบ<img>กำหนดภาพ/ภาพประกอบจริง
ตัวอย่าง
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
ทำไมต้องเป็นองค์ประกอบเชิงความหมาย?
ตาม W3C: "เว็บความหมายอนุญาตให้แชร์และนำข้อมูลไปใช้ซ้ำในแอปพลิเคชันองค์กรและชุมชน"
องค์ประกอบความหมายใน HTML
ด้านล่างนี้คือรายการองค์ประกอบเชิงความหมายบางส่วนใน HTML
| Tag | Description |
|---|---|
| <article> | Defines independent, self-contained content |
| <aside> | Defines content aside from the page content |
| <details> | Defines additional details that the user can view or hide |
| <figcaption> | Defines a caption for a <figure> element |
| <figure> | Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. |
| <footer> | Defines a footer for a document or section |
| <header> | Specifies a header for a document or section |
| <main> | Specifies the main content of a document |
| <mark> | Defines marked/highlighted text |
| <nav> | Defines navigation links |
| <section> | Defines a section in a document |
| <summary> | Defines a visible heading for a <details> element |
| <time> | Defines a date/time |
สำหรับรายการแท็ก HTML ทั้งหมดที่มีอยู่ โปรดไปที่การอ้างอิงแท็ก HTMLของ เรา