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 语义元素

HTML5 <section> 元素

<section> 元素定义文档中的节。

根据 W3C 的 HTML 文献：“节（section）是有主题的内容组，通常具有标题”。

可以将网站首页划分为简介、内容、联系信息等节。

实例

<section>
   <h1>WWF</h1>
   <p>عالمی قدرت فنڈ (WWF)...</p>
</section>

亲自试一试

HTML5 <article> عناصر

<article> عناصر مستقل خود متکامل کانٹین کا تعریف کرتے ہیں。

مستند اپنے آپ میں معنویت رکھتا ہے اور اس کی پڑھائی کی جاسکتی ہے، جو اس کا مالک نہیں ہو。

<article> عناصر کا استعمال سیناریو:

  • فورم
  • بلاگ
  • اخبار

实例

<article>
   <h1>WWF کیا کرتا ہے؟</h1>
   <p>WWF کا مقصد، ہمارے سیارہ کی قدرتی ماحولیات کی زوال کو روکنا ہے،
  اور ایک ایسا مستقبل تعمیر کرسکتے ہیں جس میں انسان قدرت کے ساتھ ہم آہنگی میں زندگی گزارتا ہے。</p>
</article>

亲自试一试

اینٹی معنوی عناصر

HTML5 معیار میں، <article> عناصر پورا مرتبط عناصر کا خود متکامل بلاک کا تعریف کرتے ہیں。

<section> عناصر کا تعریف، مرتبط عناصر کا بلاک کے طور پر کیا جاتا ہے。

آپ سکھ سکتے ہیں کہ کس طرح عناصر کو اینٹی ہیکنری کرسکتے ہیں؟ نہیں، آپ نہیں سکھ سکتے!

اینٹرنیٹ پر، آپ کو <section> عناصر کا مالک <article> عناصر والی HTML پہچان دیکھی جاسکتی ہے، نیز <article> عناصر کا مالک <sections> عناصر والی پہچان دیکھی جاسکتی ہے。

آپ کو یہ بھی پائیں گا کہ <section> عناصر <section> عناصر کا مالک ہیں، نیز <article> عناصر <sections> عناصر کا مالک ہیں。

HTML5 <header> عناصر

<header> عناصر مستند یا سیکشن کی پہچان کے لئے کئے جاتے ہیں。

<header> عناصر کو معرفی مواد کا کانٹینر استعمال کیا جانا چاہئیے。

ایک مستند میں متعدد <header> عناصر استعمال کئے جاسکتے ہیں。

درج ذیل مثال میں ایک مستند کی پہچان کی گئی ہے:

实例

<article>
   <header>
     <h1>WWF کیا کرتا ہے؟</h1>
     <p>WWF کا مقصد:</p>
   </header>
   <p>WWF کا مقصد، ہمارے سیارہ کی قدرتی ماحولیات کی زوال کو روکنا ہے،
  اور ایک ایسا مستقبل تعمیر کرسکتے ہیں جس میں انسان قدرت کے ساتھ ہم آہنگی میں زندگی گزارتا ہے。</p>
</article>

亲自试一试

HTML5 <footer> عناصر

<footer> عناصر کا استعمال، مستند یا سیکشن کی پاگلائی کے لئے کیا جاتا ہے。

<footer> عناصر کو اس کے شامل عناصر کی معلومات فراہم کرنا چاہئیے。

پاگلائی بائیًا، پاگلائی کا مالک، کارپائی، استعمال شرائط لنک، کنٹیکٹ معلومات وغیرہ شامل ہوتا ہے。

آپ ایک سند میں متعدد <footer> عناصر استعمال کرسکتے ہیں。

实例

<footer>
   <p>پوسٹ کیوں: ہیگا ریفسنز</p>
   <p>کنٹیکٹ معلومات: <a href="mailto:someone@example.com">
  someone@example.com.

亲自试一试

HTML5

HTML5

亲自试一试

HTML5
和
元素

在书籍和报纸中，与图片搭配的标题很常见。

标题（caption）的作用是为图片添加可见的解释。

通过 HTML5，图片和标题能够被组合在 <figure> 元素中：

实例

<figure>
   The Pulpit Rock
   
Fig1. - The Pulpit Pock, Norway.

亲自试一试

元素定义图像，<figcaption> 元素定义标题。

为何使用 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> ਡੈਟਾਈਲਸ> ਈਲੈਮੈਂਟ ਦੀ ਦਿਸ਼ਾ ਸਿਰਲੇਖ ਨਿਰਧਾਰਿਤ ਕਰੋ。
<time> ਮਿਤੀ/ਸਮੇਂ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ。