Elementong Semantiko ng HTML5

Ang semantika (mula sa Griyego) ay tinatawag na pag-aaral ng kahulugan ng wika.

Ang semantikong elemento ay elemento na may kahulugan.

Ano ang semantikong elemento?

Ang semantikong elemento ay naglalarawan ng kahulugan nito sa browser at developer.

NonsemantikoHalimbawa ng elemento: <div> at <span> - walang kakayahan na magbigay ng impormasyon tungkol sa kanilang nilalaman.

SemantikaHalimbawa ng elemento: <form>, <table> at <img> - malinaw na naglalarawan ng kanilang nilalaman.

Suporta ng browser

Yes Yes Yes Yes Yes

Ang lahat ng modernong browser ay sumusuporta sa semantikong elemento ng HTML5.

Sa karagdagan, maaari mong

Makakatutok sa kabanata na ito para mas maalaman ang masusing kaalaman sa HTML5 browser.

Bagong mga semantikong elemento sa HTML5

Maraming website ay may kasamang HTML code na nagtutukoy sa navigation, header at footer, tulad ng: <div id="nav"> <div class="header"> <div id="footer">.

Nagbibigay ang HTML5 ng bagong mga semantikong elemento para sa paglalarawan ng iba't ibang bahagi ng pahina.

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

Elementong Semantiko ng HTML5

Elementong Semantiko ng HTML5

Elemento ng <section> sa HTML5

Ayon sa dokumento ng W3C sa HTML:

Maaaring hatiin ang pahina ng tahanan ng website sa mga bahagi tulad ng paglalarawan, nilalaman, contact information at iba pa.

Halimbawa

<section>
   <h1>WWF</h1>
   <p>The World Wide Fund for Nature (WWF) is.....</p>
</section>

Subukan nang personal na

Elemento <article> ng HTML5

Ang elemento <article> ay nagbigay ng malayang kumpletong nilalaman.

Ang dokumento ay may sariling kahulugan at maaaring basahin nang hiwalay sa ibang nilalaman ng websayt.

Ang mga gamit ng elemento <article>:

  • Forum
  • Blog
  • Balita

Halimbawa

<article>
   <h1>ANONG GAWIN NG WWF?</h1>
   <p>Mga misyon ng WWF ay para pigilan ang pagpapaabot sa likas na kapaligiran ng ating planetang.
  at magtayo ng isang kinabukasan kung saan buhay na magkapayapa ang mga tao sa kalikasan.</p>
</article>

Subukan nang personal na

Nakasakop na semantiko na elemento

Sa pamantayan ng HTML5, ang elemento <article> ay tinukoy bilang kumpletong kasamang bloke ng kaugnay na elemento.

Ang elemento <section> ay tinukoy bilang bloke ng kaugnay na elemento.

Maaari ba nating gamitin ang kahulugan na ito upang matukoy kung paano mapagkakasunod ang mga elemento? Hindi, hindi namin pwedeng gawin!

Sa internet, makikita mo ang mga pahina na naglalaman ng elemento <section> na naglalaman ng elemento <article>, at ang mga pahina na naglalaman ng elemento <article> na naglalaman ng elemento <sections>.

Makikita mo rin na ang elemento <section> ay naglalaman ng elemento <section>, at ang elemento <article> ay naglalaman ng elemento <article>.

Elemento <header> ng HTML5

Ang elemento <header> ay nagbigay ng pag-alaala ng header sa dokumento o bahagi ng dokumento.

Ang elemento <header> ay dapat gamitin bilang tagapagsalita ng pagpapaunlad ng nilalaman.

Maaaring magkaroon ng ilang <header> elemento ang isang dokumento.

Isang halimbawa ng paglalarawan ng header ng isang artikulo:

Halimbawa

<article>
   <header>
     <h1>ANONG GAWIN NG WWF?</h1>
     <p>Mga misyon ng WWF:</p>
   </header>
   <p>Mga misyon ng WWF ay para pigilan ang pagpapaabot sa likas na kapaligiran ng ating planetang.
  at magtayo ng isang kinabukasan kung saan buhay na magkapayapa ang mga tao sa kalikasan.</p>
</article>

Subukan nang personal na

Elemento <footer> ng HTML5

Ang elemento <footer> ay nagbigay ng pag-alaala ng footer sa dokumento o bahagi ng dokumento.

Ang elemento <footer> ay dapat magbigay ng impormasyon tungkol sa mga nilalaman nito.

Ang footer ay karaniwang naglalaman ng impormasyon ng may-akda ng dokumento, impormasyon sa karapatang maglathala, link sa mga tuntunin ng paggamit, informasyon sa pakikipag-ugnayan at iba pa.

Maaari mong gamitin ang ilang <footer> elemento sa isang dokumento.

Halimbawa

<footer>
   <p>NAIPAPATAWARAN NG: Hege Refsnes</p>
   <p>Informasyon sa pakikipag-ugnayan: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer>

Subukan nang personal na

HTML5 <nav> elemento

Ang elemento ng <nav> ay nagtataglay ng koleksyon ng link sa navigation.

Ang elemento ng <nav> ay naglalayong itakda ang malaking bloke ng link sa navigation. Subalit, hindi lahat ng link sa dokumento ay dapat nasa elemento ng <nav>!

Halimbawa

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

Subukan nang personal na

HTML5 <aside> elemento

<aside> Ang elemento ay naglalaman ng ilang mga kontento sa labas ng pangunahing content ng pahina (tulad ng sidebar).

Ang content ng aside ay dapat may kaugnayan sa palibot na content.

Halimbawa

<p>Binisita ng aking pamilya ang Epcot center itoong tag-init.</p>
<aside>
   <h4>Epcot Center</h4>
   <p>The Epcot Center ay isang parke sa Disney World, Florida.</p>
</aside>

Subukan nang personal na

HTML5 <figure> at <figcaption> elemento

Sa mga libro at mga pahayagan, ang mga pamagat na kasama sa mga imahe ay laganap.

Ang ginagampanan ng caption ay ang pagdaragdag ng nakikitang paliwanag sa imahe.

Sa pamamagitan ng HTML5, ang mga imahe at mga pamagat ay maaaring ayusin sa <figure> Sa elemento ng:

Halimbawa

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

Subukan nang personal na

<img> Ang elemento ay nagtataglay ng imahe,<figcaption> Ang elemento ay nagtataglay ng pamagat.

Bakit gamitin ang elemento ng HTML5?

Kung gamit ang HTML4, gagamitin ng mga developer ang kanilang paboritong pangalan ng attribute upang itakda ang estilo ng elemento ng pahina:

header, itaas, labas, footer, menu, navigation, pangunahin, container, content, article, sidebar, itaasnav, ...

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

而通过 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> 定义日期/时间。