عناصر معانی HTML5

معانیات (یونانی کی ریشه) کا تعریف، زبان کی معانی کا مطالعہ کا نام ہے۔

معانیاتی علامات معانیات والی علامات ہیں۔

معانیاتی علامات کیا ہیں؟

معانیاتی علامات واضح طور پر براوزر اور مصنفوں کو اپنے معانی کا تعارف کرتے ہیں۔

غیر معانیاتیعلامت کے مثال: <div> اور <span> - محتوا کے بارے میں کوئی معلومات فراہم نہیں کرسکتا۔

معانیاتعلامت کے مثال: <form>،<table> اور <img> - محتوا کا واضح تعریف۔

براوزر کا سپورٹ

Yes Yes Yes Yes Yes

تمام جدید براوزر اچیولی5 معانیاتی علامات کا سپورٹ فراہم کرتے ہیں۔

علاوہ ازیں، آپ

اس فصل کا تعلیم حاصل کرنے کے لئے اچیولی5 براوزر کا استعمال کریں۔

اچیولی5 میں نئی معانیاتی علامات

بسیار سارے ویب سائٹس نے رہنمائی، سرسرا اور پیچھلے کا اچیولی کو کا اچیولی کا کوڈ شامل کیا ہے، مثلاً ان: <div id="nav"> <div class="header"> <div id="footer">۔

اچیولی5 نے صفحات کے مختلف حصوں کا تعریف کرنے والی نئی معانیاتی علامات فراہم کی ہیں:

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

عناصر معانی HTML5

عناصر معانی HTML5

اچیولی5 <section> علامت

<section> علامت کا تعریف، مستند میں کیا جاتا ہے۔

و3سی کے اہل کے مطابق اچیولی میں: 'بخش (بخش) موضوع دار محتوا کا گروپ ہوتا ہے، جو عام طور پر عنوان رکھتا ہے'。

ممکن ہے کہ ویب سائٹ کی سرپرستی کو معرفی، محتوا، رابطہ اطلاعات وغیرہ بخشوں میں تقسیم کیا جائے۔

مثال

<section>
   <h1>WWF</h1>
   <p>المؤسسة العالمية للمعرفة الطبيعية (WWF) هي....</p>
</section>

آپ خود سجاوٹ کریں

عنصر <article> في HTML5

يحدد عنصر <article> محتوى مستقل ومضمن.

المستند له معنى خاص به ويُمكن قراءته بشكل مستقل عن محتوى الموقع الآخر.

تطبيقات عنصر <article>:

  • منتدى
  • مدونة
  • أخبار

مثال

<article>
   <h1>ماذا يفعل WWF؟</h1>
   <p>مهمة WWF هي وقف تدهور بيئة الكوكب الطبيعية لدينا,</p>
  وبناء مستقبل حيث يعيش البشر في وئام مع الطبيعة.</p>
</article>

آپ خود سجاوٹ کریں

عناصر النص الاصطناعي المدمجة

في معيار HTML5، يُعرف عنصر <article> ككتلة مرتبطة ومضمنة كاملة.

يُعرف عنصر <section> ككتلة عنصر مرتبطة.

هل يمكننا استخدام هذا التعريف لتحديد كيفية تدرج العناصر؟ لا، لا يمكننا ذلك!

في الإنترنت، ستجد صفحات تحتوي على عناصر <section> تحتوي على عناصر <article>، وعناصر <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">
  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> عنصر میں:

مثال

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

آپ خود سجاوٹ کریں

<img> عنصر کا استعمال تصویر کا تعریف کرتا ہے،<figcaption> عنصر کا استعمال عنوان کا تعریف کرتا ہے。

باز کیوں HTML5 عناصر استعمال کئے جاتے ہیں؟

اگر از HTML4 استفادہ کریں تو، توسعه کاران اپنے پسند کی نمائش نام استعمال کریں گے:

هادر، تب، پائین، فوتر، منو، ناویگیشن، من، کانٹینر، کانٹینٹ، آرٹیکل، سایدبار، تبناوی، ...

در این صورت، مرورگر نمی‌تواند محتوای صحیح وب‌سایت را شناسایی کند.

و با استفاده از عناصر HTML5 مانند: <header> <footer> <nav> <section> <article>، این مشکل حل می‌شود.

بر اساس W3C، وب‌semantic:

“اجازه می‌دهد داده‌ها بین برنامه‌ها، سازمان‌ها و گروه‌ها به اشتراک گذاشته شوند و استفاده شوند.”

عناصر semantic در HTML5

در زیر، عناصر جدید语义ی HTML5 به ترتیب الفبایی لیست شده‌اند.

این لینک‌ها به مرجع کامل HTML اشاره دارند.

تگ توصیف
<article> مقاله را تعریف می‌کند.
<aside> محتوایی خارج از محتوای صفحه را تعریف می‌کند.
<details> جزئیات اضافی را که کاربر می‌تواند مشاهده یا پنهان کند تعریف می‌کند.
<figcaption> عنوان عنصر <figure> را تعریف می‌کند.
<figure> محتوای درونی را تعریف می‌کند، مانند تصاویر، نمودارها، عکس‌ها، لیست‌های کد و غیره.
<footer> پایان‌نامه مستند یا بخش را تعریف می‌کند.
<header> سربرگ مستند یا بخش را تعریف می‌کند.
<main> محتوای اصلی مستند را تعریف می‌کند.
<mark> متن مهم یا تأکید شده را تعریف می‌کند.
<nav> لینک‌های ناوبری را تعریف می‌کند.
<section> قسمت‌های مستند را تعریف می‌کند.
<summary> عنوان قابل مشاهده برای عنصر <details> را تعریف می‌کند.
<time> تاریخ و زمان را تعریف می‌کند.