ความหมายคือการศึกษาความหมายของคำและวลีในภาษา
องค์ประกอบความหมายเป็นองค์ประกอบที่มีความหมาย
ความหมายของ HTML คือการใช้มาร์กอัป HTML ในการเสริมสร้างความหมายหรือความหมายของข้อมูลในหน้าเว็บและการใช้งานเว็บมากกว่าเพียงการกำหนดการนำเสนอหรือมอง
ความหมายของ HTML จะถูกประมวลผลโดยเว็บเบราว์เซอร์ดั้งเดิมเช่นเดียวกับหลายตัวแทนผู้ใช้อื่น ๆ CSS จะใช้ในการแนะนำให้นำเสนอให้กับผู้ใช้ของมนุษย์
อะไรคือองค์ประกอบความหมาย?
องค์ประกอบความหมายได้อย่างชัดเจนอธิบายความหมายของมันทั้งเบราว์เซอร์และนักพัฒนา
ตัวอย่างขององค์ประกอบที่ไม่ใช่ความหมาย: <div> และ <span> - บอกอะไรเกี่ยวกับเนื้อหา
ตัวอย่างขององค์ประกอบความหมาย: <form> , <table> และ <img> - ชัดเจนกำหนดเนื้อหา
สนับสนุนเบราว์เซอร์
| ใช่ | ใช่ | ใช่ | ใช่ | ใช่ |
HTML5 องค์ประกอบความหมายได้รับการสนับสนุนในเบราว์เซอร์ที่ทันสมัย
นอกจากนี้คุณสามารถ "teach" เบราว์เซอร์รุ่นเก่าวิธีการจัดการ "unknown elements"
อ่านเกี่ยวกับมันใน การสนับสนุนเบราว์เซอร์ HTML5
องค์ประกอบความหมายใหม่ใน HTML5
เว็บไซต์จำนวนมากมีโค้ด HTML ที่ชอบ: <div id="nav"> <div class="header"> <div id="footer">
เพื่อบ่งชี้นำทาง, ส่วนหัวและส่วนท้าย
HTML5 มีองค์ประกอบความหมายใหม่ในการกำหนดส่วนต่าง ๆ ของหน้าเว็บ:
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
HTML5 <section> ธาตุ
<section> องค์ประกอบที่กำหนดส่วนในเอกสาร
ตามเอกสาร HTML5 ของ W3C: "A section is a thematic grouping of content, typically with a heading."
หน้าแรกของเว็บไซต์จะถูกแบ่งออกเป็นส่วนสำหรับการแนะนำเนื้อหาและข้อมูลการติดต่อ
ตัวอย่าง
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section> ลองตัวเอง» HTML5 <article> ธาตุ
<article> องค์ประกอบระบุอิสระเนื้อหาที่ตนเองมี
บทความที่ควรให้ความรู้สึกของมันเองและมันควรจะเป็นไปได้ที่จะอ่านมันเป็นอิสระจากส่วนที่เหลือของเว็บไซต์
ตัวอย่างของกรณีที่ <article> องค์ประกอบที่สามารถนำมาใช้:
- โพสต์ฟอรั่ม
- โพสต์บล็อก
- บทความในหนังสือพิมพ์
ตัวอย่าง
<article>
<h1>What Does WWF Do?</h1>
<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> ลองตัวเอง» องค์ประกอบความหมายรัง
ในมาตรฐาน HTML5 ที่ <article> องค์ประกอบที่กำหนดเสร็จสมบูรณ์บล็อกตนเองมีขององค์ประกอบที่เกี่ยวข้อง
<section> องค์ประกอบที่ถูกกำหนดให้เป็นบล็อกขององค์ประกอบที่เกี่ยวข้อง
เราสามารถใช้คำจำกัดความที่จะตัดสินใจว่าจะองค์ประกอบรัง? ไม่เราทำไมได้!
บนอินเทอร์เน็ตที่คุณจะพบกับหน้าเว็บ HTML <section> องค์ประกอบที่มี <article> องค์ประกอบและ <article> องค์ประกอบที่มี <sections> องค์ประกอบ
นอกจากนี้คุณยังจะได้พบหน้าเว็บที่มี <section> องค์ประกอบที่มี <section> องค์ประกอบและ <article> องค์ประกอบที่มี <article> องค์ประกอบ
หนังสือพิมพ์กีฬา articles ในกีฬา section มีเทคนิค section ในแต่ละ article
HTML5 <header> ธาตุ
<header> องค์ประกอบระบุส่วนหัวสำหรับเอกสารหรือส่วนใดส่วนหนึ่ง
<header> องค์ประกอบที่ควรจะใช้เป็นภาชนะสำหรับเนื้อหาเบื้องต้น
คุณสามารถมีหลาย <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> ลองตัวเอง» HTML5 <footer> ธาตุ
<footer> องค์ประกอบระบุท้ายสำหรับเอกสารหรือส่วนใดส่วนหนึ่ง
<footer> องค์ประกอบที่ควรจะมีข้อมูลเกี่ยวกับองค์ประกอบที่มีของ
ส่วนท้ายมักจะมีผู้เขียนข้อมูลเอกสารลิขสิทธิ์เชื่อมโยงกับข้อตกลงในการใช้ข้อมูลที่ติดต่อ ฯลฯ
คุณสามารถมีหลาย <footer> องค์ประกอบในเอกสารหนึ่ง
ตัวอย่าง
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:[email protected]">
[email protected]</a>.</p>
</footer> ลองตัวเอง» HTML5 <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> ลองตัวเอง» HTML5 <aside> ธาตุ
<aside> องค์ประกอบกำหนดเนื้อหาบางส่วนนอกเหนือจากเนื้อหาที่ถูกวางไว้ใน (like a sidebar)
เนื้อหากันควรจะเกี่ยวข้องกับเนื้อหาโดยรอบ
ตัวอย่าง
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside> ลองตัวเอง» HTML5 <figure> และ <figcaption> องค์ประกอบ
ในหนังสือและหนังสือพิมพ์มันเป็นเรื่องธรรมดาที่จะมีคำอธิบายภาพที่มีภาพ
วัตถุประสงค์ของคำอธิบายคือการเพิ่มคำอธิบายภาพลงในภาพ
ด้วย HTML5 ภาพและคำอธิบายภาพสามารถรวมกลุ่มกันใน <figure> องค์ประกอบ:
ตัวอย่าง
<figure>
<img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Rock, Norway.</figcaption>
</figure> ลองตัวเอง» <img> องค์ประกอบที่กำหนดภาพที่ <figcaption> องค์ประกอบที่กำหนดคำบรรยายใต้ภาพ
ทำไมความหมาย HTML5 องค์ประกอบ?
ด้วย HTML4 นักพัฒนาใช้ที่ชื่นชอบของตัวเองแอตทริบิวต์ชื่อองค์ประกอบของหน้ารูปแบบ:
header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...
นี่เองที่ทำให้มันเป็นไปไม่ได้สำหรับเครื่องมือค้นหาเพื่อระบุเนื้อหาของหน้าเว็บที่ถูกต้อง
ที่มีองค์ประกอบ HTML5 ที่ชอบ: <header> <footer> <nav> <section> <article> นี้จะกลายเป็นเรื่องง่าย
ตามที่ W3C, เว็บความหมาย:
"อนุญาตให้ข้อมูลที่จะใช้ร่วมกันและนำกลับมาใช้ในการใช้งาน, ผู้ประกอบการและชุมชน."
การพิจารณา
ในกรณีที่เอกสารที่ต้องใช้ความหมายได้อย่างแม่นยำมากขึ้นกว่าที่แสดงในรูปแบบ HTML เพียงอย่างเดียวชิ้นส่วนของเอกสารที่อาจจะมีการปิดล้อมในช่วงหรือ div องค์ประกอบที่มีชื่อชั้นที่มีความหมายเช่น <span class = "ผู้เขียน"> และ <div class = "ใบแจ้งหนี้" > ในกรณีที่ชื่อชั้นเหล่านี้ยังมีตัวระบุชิ้นส่วนภายในสคีหรืออภิปรัชญาพวกเขาอาจจะเชื่อมโยงกับความหมายที่ชัดเจนยิ่งขึ้น ไมโครฟอร์แมตเป็นระเบียบแบบแผนวิธีการนี้เพื่อให้ความหมายในรูปแบบ HTML
หนึ่งในข้อ จำกัด ที่สำคัญของวิธีนี้คือมาร์กอัปดังกล่าวขึ้นอยู่กับองค์ประกอบรวมต้องตรงตามเงื่อนไขรูปแบบที่ดี เอกสารเหล่านี้เป็นต้นไม้โครงสร้างในวงกว้างนี้หมายความว่าชิ้นส่วนที่สมดุลเฉพาะจากต้นไม้ย่อยสามารถทำเครื่องหมายขึ้นในลักษณะนี้ หมายถึงการทำเครื่องหมายขึ้นส่วนใด ๆ โดยพลของ HTML จะต้องมีกลไกที่เป็นอิสระของโครงสร้างมาร์กอัปของตัวเองเช่น XPointer
ดีเนื้อหา HTML ยังช่วยเพิ่มการเข้าถึงของเอกสารเว็บ (เห็นแนวทาง Web Content Accessibility). [อ้างจำเป็น] ตัวอย่างเช่นเมื่ออ่านหน้าจอหรือเบราว์เซอร์เสียงอย่างถูกต้องสามารถตรวจสอบโครงสร้างของเอกสารก็จะไม่เสียผู้ใช้ความบกพร่องทางสายตาของ เวลาโดยการอ่านออกข้อมูลซ้ำหรือไม่เกี่ยวข้องเมื่อมันถูกทำเครื่องหมายอย่างถูกต้อง
องค์ประกอบความหมายใน HTML5
ด้านล่างนี้เป็นรายชื่อเรียงตามตัวอักษรขององค์ประกอบความหมายใหม่ใน HTML5
การเชื่อมโยงไปของเราสมบูรณ์ HTML5 อ้างอิง
| แท็ก | ลักษณะ |
|---|---|
| <article> | กำหนดบทความ |
| <aside> | กำหนดเนื้อหานอกเหนือจากเนื้อหาของหน้าเว็บ |
| <details> | กำหนดรายละเอียดเพิ่มเติมที่ผู้ใช้สามารถดูหรือซ่อน |
| <figcaption> | กำหนดคำอธิบายสำหรับ <figure> องค์ประกอบ |
| <figure> | ระบุเนื้อหาที่ตนเองมีเช่นภาพประกอบ, แผนภาพ, ภาพถ่าย, รายชื่อรหัส ฯลฯ |
| <footer> | กำหนดส่วนท้ายสำหรับเอกสารหรือส่วน |
| <header> | ระบุส่วนหัวสำหรับเอกสารหรือส่วนใดส่วนหนึ่ง |
| <main> | ระบุเนื้อหาหลักของเอกสาร |
| <mark> | กำหนดทำเครื่องหมายข้อความ / ไฮไลต์ |
| <nav> | กำหนดลิงค์การนำทาง |
| <section> | กำหนดส่วนในเอกสาร |
| <summary> | กำหนดหัวข้อที่มองเห็นสำหรับ <details> องค์ประกอบ |
| <time> | กำหนดวัน / เวลา |