ສັນຍານ HTML5

ຄວາມຈິງ (ຈາກໄອລາກີ່ອະຍິດ) ແມ່ນການຊັບສະນະຄວາມຈິງຂອງພາສາ.

ປ້ອງສະນະຈິງແມ່ນປ້ອງສະນະທີ່ມີຄວາມຈິງ.

ວ່າແມ່ນຫຍັງປ້ອງສະນະຈິງ?

ປ້ອງສະນະຈິງຈະອະທິບາຍຄວາມຈິງໃຫ້ທໍລະຍາດ ແລະ ນັກພັດທະນາ.

ບໍ່ຈິງຕົວຢ່າງຂອງປ້ອງ: <div> ແລະ <span> - ບໍ່ສາມາດບັນທຶກຂໍ້ມູນຫລັກ.

ຄວາມຈິງຕົວຢ່າງຂອງປ້ອງ: <form>、<table> ແລະ <img> - ບໍ່ອາດຈະບັນທຶກຂໍ້ມູນຫລັກ.

ການສະໜອງທໍລະຍາດ

Yes Yes Yes Yes Yes

ທັງໝົດທໍລະຍາດທີ່ມີຄວາມຈິງສະໜອງປ້ອງສະນະ HTML5.

ອີກຢ່າງໜຶ່ງພວກເຈົ້າສາມາດ "ຊ່ວຍ" ການໃຊ້ທໍລະຍາດເກົ່າຮຽບຮ້ອງ "ສິ່ງທີ່ບໍ່ຮູ້".

ຕັ້ງໃຈຮຽນການສຶກສາຫລັກສະນະນີ້ຕາມ 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

ປ້ອງ <section> HTML5

ປ້ອງ <section> ຈະສະແດງຫລັກສະນະຂອງຫລັກສະນະຂອງເອກະສານ.

ຕາມຂໍ້ມູນຂອງ W3C HTML:“ພັກ (section) ແມ່ນການຈັດວາງຂໍ້ມູນທີ່ມີຫົວຂໍ້ຫລັກ.”

ສາມາດແຍກອອກເວບໜຸ່ມຂອງເວັບໄຊຫົວໜ້າເປັນສາຍຄູ່ວິຊາການລາຍງານຂໍ້ມູນຊີວິດເພື່ອການຕິດຕໍ່ສາຍລະຫວ່າງຄົນໄດ້.

ຕົວຢ່າງ

<section>
   <h1>WWF</h1>
   <p>ມະຫາສະຫະພັນສາກົນສຳລັບທຳມະຊາດ (WWF) ແມ່ນ....</p>
</section>

ທ່ານຈະທົດລອງຕອນນັ້ນ

HTML5 <article> ສິບຕິກຳ

<article> ສິບຕິກຳສະໜອງສິບຕິກຳທີ່ບັນທຶກຢູ່ເທິງບັນດາສິບຕິກຳ.

ເອກະສານຈະມີຄວາມຄິດຫຍັງຂອງຕົນເອງ, ແລະສາມາດອ່ານພຽງແຕ່ເອກະສານດຽວນີ້.

<article> ສິບຕິກຳທີ່ນໍາໃຊ້:

  • ຟອມ
  • ບຣອກ
  • ຂ່າວ

ຕົວຢ່າງ

<article>
   <h1>ບັນດາການເຮັດຂອງ WWF ແມ່ນຫຍັງ?</h1>
   <p>ພາກສາຂອງ WWF ���ວ່າຢຸດການທຳລາຍສິ່ງສັງຄົມທຳມະຊາດຂອງໂລກພວກເຮົາ,</p>
  ແລະສ້າງອະນາຄົດທີ່ຄົນຈະອາໄສໃນຄວາມສັນຕິພາບກັບທຳມະຊາດ.</p>
</article>

ທ່ານຈະທົດລອງຕອນນັ້ນ

ສິບຕິກຳຂອງສັບສິນລະອຽດ

ໃນມາດຕະຖານ HTML5, <article> ສິບຕິກຳຖືກກໍານົດວ່າສິບຕິກຳຂອງຫຼັກທີ່ກ່ຽວຂ້ອງຈະບັນທຶກຢູ່ເທິງບັນດາສິບຕິກຳ.

<section> ສິບຕິກຳຖືກກໍານົດວ່າສິບຕິກຳຂອງຫຼັກທີ່ກ່ຽວຂ້ອງ.

ພວກເຮົາສາມາດໃຊ້ການກໍານົດນີ້ເພື່ອຕັດສິນວ່າຈະວາງລະບົບສິບຕິກຳຫຼືບໍ່ບາງຫຍັງຫລືບໍ່?

ໃນອິນເຕີເນັດ, ທ່ານຈະພົບວ່າ <section> ສິບຕິກຳທີ່ບັນທຶກ <article> HTML ເວັບໄຊ, ແລະ <article> ສິບຕິກຳທີ່ບັນທຶກ <sections>.

ທ່ານຈະພົບວ່າ <section> ສິບຕິກຳທີ່ບັນທຶກ <section> ແລະ <article> ສິບຕິກຳທີ່ບັນທຶກ <article>.

HTML5 <header> ສິບຕິກຳ

<header> ສິບຕິກຳສະໜອງປາກົດປະກອບບັດບາດຫຼືບັນດາຫຼັກ.

<header> ສິບຕິກຳຄວນຖືກໃຊ້ໃຫ້ເປັນສະໜອງສຳນວນການສະເໜີ.

ເອກະສານສາມາດມີ <header> ສິບຕິກຳຫຼາຍໃນເອກະສານ.

ຄັ້ງລວມແມ່ນຫົວຂໍ້ຂອງບັນດາບັນດາຫຼັກຂອງເອກະສານ.

ຕົວຢ່າງ

<article>
   <header>
     <h1>ບັນດາການເຮັດຂອງ WWF ແມ່ນຫຍັງ?</h1>
     <p>ພາກສາຂອງ WWF:</p>
   </header>
   <p>ພາກສາຂອງ WWF ���ວ່າຢຸດການທຳລາຍສິ່ງສັງຄົມທຳມະຊາດຂອງໂລກພວກເຮົາ,</p>
  ແລະສ້າງອະນາຄົດທີ່ຄົນຈະອາໄສໃນຄວາມສັນຕິພາບກັບທຳມະຊາດ.</p>
</article>

ທ່ານຈະທົດລອງຕອນນັ້ນ

HTML5 <footer> ສິບຕິກຳ

<footer> ສິບຕິກຳສະໜອງປາກົດປະກອບບັດບາດຫຼືບັນດາຫຼັກ.

<footer> ສິບຕິກຳຄວນສະໜອງຂໍ້ມູນກ່ຽວກັບບັນດາສິບຕິກຳທີ່ບັນທຶກ.

ປາກົດປະກອບຂອງ <footer> ຈະບັນນາທິການຜູ້ຂຽນ, ຂໍ້ມູນລິຂະສິດ, ພວກຫົນການນໍາໃຊ້, ຂໍ້ມູນການຕິດຕໍ່ ແລະ ອື່ນໆ.

ທ່ານສາມາດໃຊ້ <footer> ສິບຕິກຳຫຼາຍໃນເອກະສານດຽວ.

ຕົວຢ່າງ

<footer>
   <p>ສ້າງໂດຍ: Hege Refsnes</p>
   <p>ຂໍ້ມູນການຕິດຕໍ່: <a href="mailto:someone@example.com">
  <a href="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 ຄວນຈະກ່ຽວຂ້ອງກັບຂັ້ນຕົວບໍລິຫານ.

ຕົວຢ່າງ

<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> ໃນສະມາຊິກ HTML5:

ຕົວຢ່າງ

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

ທ່ານຈະທົດລອງຕອນນັ້ນ

<img> ສະມາຊິກ HTML5 ອອກພາບ.<figcaption> ສະມາຊິກ HTML5 ອອກສະພາບຫົວຂໍ້.

ຍ້ອນວ່າໃຊ້ HTML5 ສະມາຊິກ?

ຖ້າໃຊ້ HTML4 ແລ້ວ ນັກພັດທະນາຈະໃຊ້ຊື່ປະສົມທີ່ມັກໃຈເພື່ອການການຈັດຕັ້ງຮູບແບບຂອງສັບພູມິນອາກາດ:

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

如此，浏览器便无法识别正确的网页内容。

而通过 HTML5 元素，比如：

HTML5 中的语义元素

下面列出了以字母顺序排列的 HTML5 新语义元素。

ການເຊື່ອມຕໍ່ HTML Reference Manual ທົດສະຕິດ

ຕົວເກດ ການອະທິບາຍ
<article> ການອະທິບາຍຂອງບົດ
<aside> ການອະທິບາຍຂັ້ນນວນທີ່ບໍ່ແມ່ນຂອງເອກະສານ
<details> ການອະທິບາຍຂັ້ນສະເພາະທີ່ຜູ້ນຳໃຊ້ສາມາດເບິ່ງຫຼືປິດ
<figcaption> ການອະທິບາຍຫົວຂໍ້ຂອງປະກອບ <figure>
<figure> ການປະກອບຂໍ້ຂອງຂັ້ນນວນທີ່ບໍ່ແມ່ນຂອງເອກະສານ
<footer> ການປະກອບຂໍ້ຂອງຫົວຂໍ້ຂອງເອກະສານຫຼືຫົວຂໍ້
<header> ການປະກອບຂໍ້ຂອງຫົວຂໍ້ຂອງເອກະສານຫຼືຫົວຂໍ້
<main> ການປະກອບຂໍ້ຂອງຫົວຂໍ້ທີ່ເປັນຫົວຂໍ້ຂອງເອກະສານ
<mark> ການອະທິບາຍຂໍ້ຄວາມທີ່ສຳຄັນຫຼືສະເພາະ
<nav> ການອະທິບາຍຫົວຂໍ້ຂອງຫົວຂໍ້ການນໍາສາຍ
<section> ການອະທິບາຍຫົວຂໍ້ຂອງຫົວຂໍ້ໃນໂຕກະດີ
<summary> ການອະທິບາຍຫົວຂໍ້ຂອງປະກອບ <details>
<time> ການອະທິບາຍວັນທີ/ເວລາ