HTML5 ศัพท์ตัวแทน

นิยามวิทยา (มาจากกรีกโบราณ) สามารถกำหนดเป็นการศึกษาความหมายของภาษา

อาทิตย์นิยามสีมาตรฐานคืออาทิตย์ที่มีนิยาม

อาทิตย์นิยามสีมาตรฐานคืออะไร?

อาทิตย์นิยามสีมาตรฐานชัดเจนที่บอกเล่าถึงความหมายของตนเองต่อบราวเซอร์และนักพัฒนา

ไม่มีนิยามสีมาตรฐานตัวอย่างของอาทิตย์: <div> และ <span> - ไม่สามารถให้ข้อมูลเกี่ยวกับเนื้อหาของตนเอง

นิยามสีมาตรฐานตัวอย่างของอาทิตย์: <form>、<table> และ <img> - กำหนดเนื้อหาของตนเองชัดเจน

การรับรองของเว็บเบราวเซอร์

Yes Yes Yes Yes Yes

ทั้งหมดบราวเซอร์ที่ปรับปรุงล่าสุดทุกตัวทุกเวลาเข้ารับอาทิตย์นิยามสีมาตรฐาน 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 ศัพท์ตัวแทน

HTML5 ศัพท์ตัวแทน

อาทิตย์ HTML5 <section>

อาทิตย์ <section> กำหนดหมวดหมู่ในเอกสาร

ตามเอกสาร HTML ของ W3C: “หมวดหมู่ (section) คือกลุ่มเนื้อหาที่มีหัวข้อ โดยทั่วไปจะมีชื่อหัวข้อ”

สามารถแบ่งหน้าหลักของเว็บไซต์เป็นหมวดหมู่เช่น นิยาย ส่วนเนื้อหา ข้อมูลติดต่อและอื่น ๆ

ตัวอย่าง

<section>
   <h1>WWF</h1>
   <p>World Wide Fund for Nature (WWF) คือ....</p>
</section>

ลองทดลองเอง

ตัวแทน <article> ของ HTML5

ตัวแทน <article> กำหนดเนื้อหาที่เป็นหน่วยที่มีความหมายเดี่ยวๆ

เอกสารมีความหมายของตนเอง และสามารถอ่านได้โดยไม่ต้องอาศัยเนื้อหาอื่นของเว็บไซต์

สถานการณ์ที่ใช้ตัวแทน <article>:

  • ฟอรัม
  • บล็อก
  • ข่าว

ตัวอย่าง

<article>
   <h1>WWF ทำอะไร?</h1>
   <p>ภารกิจของ WWF คือเพื่อหยุดการเสื่อมแย่ของสิ่งแวดล้อมธรรมชาติของโลกของเรา,</p>
  และสร้างอนาคตที่มนุษย์มีชีวิตอยู่ในความสงบกับธรรมชาติ</p>
</article>

ลองทดลองเอง

องค์ประกอบที่วางตรงนี้

ในมาตราฐาน HTML5 ตัวแทน <article> ถูกกำหนดว่าเป็นบล็อคขององค์ประกอบที่เกี่ยวข้องและเป็นหน่วยของตัวแทนที่เกี่ยวข้องโดยเฉพาะ

ตัวแทน <section> ถูกแนะนำว่าเป็นบล็อคขององค์ประกอบที่เกี่ยวข้อง

เราสามารถใช้การระบุนี้เพื่อตัดสินว่าจะวางองค์ประกอบภายในตัวแทนไหนได้หรือไม่? ไม่รับทราบ!

บนอินเทอร์เน็ต คุณจะพบว่าตัวแทน <section> สามารถมีตัวแทน <article> ในหน้า HTML และหน้าที่ตัวแทน <article> มีตัวแทน <sections>

คุณจะพบว่าตัวแทน <section> สามารถมีตัวแทน <section> ได้ และตัวแทน <article> สามารถมีตัวแทน <article> ได้

ตัวแทน <header> ของ HTML5

ตัวแทน <header> กำหนดหัวเอกสารหรือบทบาท

ตัวแทน <header> ควรถูกใช้เป็นตัวแทนของเนื้อหานำเสนอ

ในเอกสารหนึ่ง สามารถมีหลายตัวแทน <header> ได้

ตัวอย่างด้านล่างนี้นับว่าเป็นการกำหนดหัวเอกสาร

ตัวอย่าง

<article>
   <header>
     <h1>WWF ทำอะไร?</h1>
     <p>ภารกิจของ WWF:</p>
   </header>
   <p>ภารกิจของ WWF คือเพื่อหยุดการเสื่อมแย่ของสิ่งแวดล้อมธรรมชาติของโลกของเรา,</p>
  และสร้างอนาคตที่มนุษย์มีชีวิตอยู่ในความสงบกับธรรมชาติ</p>
</article>

ลองทดลองเอง

ตัวแทน <footer> ของ HTML5

ตัวแทน <footer> กำหนดฝายหลังสำหรับเอกสารหรือบทบาท

ตัวแทน <footer> ควรให้ข้อมูลเกี่ยวกับองค์ประกอบที่มีอยู่ของตน

ฝายหลังทั่วไปประกอบด้วยชื่อผู้เขียนเอกสาร, ข้อมูลลิขสิทธิ์, ลิงก์ของข้อกำหนดใช้งาน, ข้อมูลติดต่อและอื่นๆ

คุณสามารถใช้หลาย <footer> ในเอกสารเดียวกันได้

ตัวอย่าง

<footer>
   <p>โดย: Hege Refsnes</p>
   <p>ข้อมูลติดต่อ: <a href="mailto:someone@example.com">
  <a href="mailto:someone@example.com">someone@example.com</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> คือองค์ประกอบที่มีสิ่งที่อยู่นอกจากเนื้อหาหลักของหน้าเว็บ (เช่นด้านข้าง)</aside>

หากใช้ <aside> นั้น ต้องมีความเกี่ยวข้องกับสิ่งที่อยู่รอบๆ

ตัวอย่าง

<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>

ในหนังสือและหนังหลังปักหน้าที่มีภาพและหัวข้อที่มีความสัมพันธ์กันมากมาย。

หน้าต่าง (caption) มีความหมายในการเพิ่มความชัดเจนที่เห็นได้ของภาพ。

ผ่าน HTML5 ภาพและหัวข้อสามารถที่จะทำการรวมเข้ากันได้ <figure> ในองค์ประกอบ <figure>:

ตัวอย่าง

<figure>
   <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
   <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>

ลองทดลองเอง

<img> องค์ประกอบ <img> นิยามภาพ。<figcaption> องค์ประกอบ <h1> นิยามชื่อหัวข้อ。

ทำไมต้องใช้องค์ประกอบ HTML5?

ถ้าใช้ HTML4 นั้น，นักพัฒนาจะใช้ชื่อ 속성ที่พวกเขาชื่นชอบเพื่อตั้งรูปแบบสำหรับองค์ประกอบหน้าเว็บ:

header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...

ดังนั้น บราวเซอร์ไม่สามารถรับรู้เนื้อหาของเว็บไซต์ที่ถูกต้องได้

และผ่านทางองค์ประกอบ HTML5 อย่างเช่น：<header> <footer> <nav> <section> <article> ปัญหานี้จึงแก้ไขได้

ตาม W3C รับรู้ว่า วิกฤติเครือข่าย:

“อนุญาตให้มีการแบ่งปันและใช้งานความรู้ที่เกี่ยวข้องกับโปรแกรมปลายทาง ธุรกิจและกลุ่มบุคคล”

องค์ประกอบเชิงวิเคราะห์ใน HTML5

ด้านล่างนี้คือรายการองค์ประกอบเชิงวิเคราะห์ที่ใหม่ของ HTML5 ที่จัดเรียงตามอักษร

ลิงก์ดังกล่าวนำไปสู่อ้างอิงคู่มือ HTML ทั้งหมด

แท็ก การอธิบาย
<article> กำหนดบทความ
<aside> กำหนดเนื้อหาที่อยู่นอกเนื้อหาหลักของหน้า
<details> กำหนดรายละเอียดเพิ่มเติมที่ผู้ใช้สามารถดูหรือซ่อนได้
<figcaption> กำหนดหัวข้อขององค์ประกอบ <figure>
<figure> กำหนดเนื้อหาที่เป็นส่วนที่เปิดโชว์ตัวเอง
<footer> กำหนดหัวข้อหรือท้ายของเอกสารหรือหนึ่งหน่วย
<header> กำหนดหัวข้อหรือท้ายของเอกสารหรือหนึ่งหน่วย
<main> กำหนดเนื้อหาหลักของเอกสาร
<mark> กำหนดข้อความที่สำคัญหรือที่เน้น
<nav> กำหนดลิงก์การนำทาง
<section> กำหนดหนึ่งหน่วยหรือหนึ่งส่วนของเอกสาร
<summary> กำหนดหัวข้อที่มองเห็นขององค์ประกอบ <details>
<time> กำหนดวันที่/เวลา