عناصر معنایی HTML5

علم‌شناختی (منشأ یونان باستان) می‌تواند به عنوان مطالعه معنا از زبان تعریف شود.

عناصر معنایی عناصری هستند که دارای معنا هستند.

معنایی چیست؟

عناصر معنایی به وضوح به مرورگرها و توسعه‌دهندگان معنا خود را توضیح می‌دهند.

غیرمعناییمثال‌های عناصر: <div> و <span> - نمی‌توانند اطلاعات محتوایی خود را ارائه دهند.

معناییمثال‌های عناصر: <form>، <table> و <img> - به وضوح محتوای خود را تعریف می‌کنند.

پشتیبانی مرورگر

بله بله بله بله بله

همه مرورگرهای مدرن از عناصر معنایی 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> تعریف بخش‌های مستندات است.

بر اساس مستندات HTML W3C: "بخش (section) یک گروه محتوایی با موضوع است که معمولاً دارای عنوان است."

ممکن است صفحه اصلی وبسایت را به بخش‌هایی مانند معرفی، محتوا و اطلاعات تماس تقسیم کنیم.

مثال

<section>
   <h1>WWF</h1>
   <p>صندوق جهانی طبیعت (WWF) است....</p>
</section>

به طور مستقیم امتحان کنید

عناصر <article> در HTML5

عناصر <article> محتوای مستقل و خودمحتوایی را تعیین می‌کنند.

یک سند می‌تواند معنای خاص خود را داشته باشد و می‌تواند مستقل از محتوای دیگر وب‌سایت خوانده شود.

موضع استفاده عناصر <article>:

  • فرم‌های انلاین
  • وبلاگ
  • اخبار

مثال

<article>
   <h1>WWF چه کار می‌کند؟</h1>
   <p>مأموریت WWF متوقف کردن کاهش محیط زیست طبیعی زمین است,</p>
  و آینده‌ای بسازیم که انسان‌ها با طبیعت هماهنگ زندگی کنند.</p>
</article>

به طور مستقیم امتحان کنید

عناصر معنایی پیچیده

در استاندارد HTML5، عناصر <article> به عنوان بلوک‌های خودمحتوایی مرتبط تعریف شده‌اند.

عناصر <section> به عنوان بلوک‌های عناصر مرتبط تعریف شده‌اند.

آیا می‌توانیم از این تعریف برای تعیین نحوه قرارگیری عناصر استفاده کنیم؟ خیر، نمی‌توانیم!

در اینترنت، شما خواهید دید که صفحات HTML شامل عناصر <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">
  <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> در عنصر:

مثال

<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، شبکه معنایی:

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

عناصر معنایی HTML5

در زیر، عناصر جدید معنایی HTML5 به ترتیب الفبایی آورده شده‌اند.

این لینک‌ها به دستورالعمل کامل HTML اشاره دارند.

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