عنصرهای معنایی

---

« صفحهٔ قبل

صفحهٔ بعد »

عنصرهای معنایی = عنصرهایی با یک معنی

عنصرهای معنی چیست؟

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

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

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

عنصرهای معنایی جدید در HTML

بسیاری از وب‌سایت‌ها برای نشان دادن راهبری، عنوان و پاورقی دارای کد HTML هستند مانند: <div id="nav"> <div class="header"> <div id="footer">

HTML عنصرهای معنایی جیدی را برای تعریف بخش‌های مختلف یک صفحه وب پیشنهاد می‌دهد:

• <article>

• <aside>

• <details>

• <figcaption>

• <figure>

• <footer>

• <header>

• <main>

• <mark>

• <nav>

• <section>

• <summary>

• <time>

عنصر <section> در HTML

عنصر <section> یک بخش در سند را معرفی می‌کند.

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

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

مثال

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

مشاهدهٔ نتیجه

عنصر <article> در HTML

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

یک فصل (article) باید به تنهایی با مفهوم باشد و باید خواندن آن به تنهایی و جدا از بقیه وب‌سایت ممکن باشد.

مثال‌هایی از موقعیت‌هایی که می‌توان یک عنصر <article> را به کار برد:

• پست‌های انجمن
• پست‌های بلاگ
• سرفصل‌های روزنامه

مثال

<article>
  <h1>What Does WWF Do?</h1>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

مشاهدهٔ نتیجه

تودرتو کردن <article> در <section> یا برعکس؟

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

عنصر <section> یک بخش در سند را تعریف می‌کند.

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

بنابران، در اینترنت، شما صفحات HTML با عنصرهای <section> شامل عنصرهای <article> و عنصرهای <article> شامل عنصرهای <section> خواهید یافت.

صفحاتی با عنصرهای <section> دارای عنصرهای <section> و عنصرهای <article> دارای عنصرهای <article> نیز خواهید یافت.

مثالی برای روزنامه: ورزش <article> در بخش ورزش ممکن است یک بخش فنی در هر <article> داشته باشد.

عنصر <header> در HTML

عنصر <header> عنوانی را برای یک سند یا بخش تعریف می‌کند.

عنصر <header> باید بعنوان ظرفی (Container) برای محتوای مقدماتی استفاده شود.

می‌توانید عنصرهای <header> بسیاری در سند داشته باشید.

مثال زیر عنوانی برای یک فصل تعریف می‌کند:

مثال

<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

مشاهدهٔ نتیجه

عنصر <footer> در HTML

عنصر <footer> یک پاورقی برای سند یا بخش تعریف می‌کند.

یک عنصر <footer> باید دارای اطلاعاتی در مورد عنصر ظرفش (Containing) باشد.

پاورقی معمولاً شامل نویسنده سند، اطلاعات کپی رایت، لینک‌هایی به شرایط استفاده، اطلاعات تماس و غیره است.

ممکن است چند عنصر <footer> در یک سند داشته باشید.

مثال

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p>Contact information: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer>

مشاهدهٔ نتیجه

عنصر <nav> در HTML

عنصر <nav> مجموعه لینک‌های راهبری (Navigation Links) را تعریف می‌کند.

دقت کنید که همه لینک‌های سند نباید داخل یک عنصر <nav> باشند. عنصر <nav> فقط برای بلوک اصلی لینک‌های راهبری در نظر گرفته می‌شود.

مثال

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

مشاهدهٔ نتیجه

عنصر <aside> در HTML

عنصر <aside> محتوایی به جز محتوایی که در آن قرار دارد تعریف می‌کند (مانند sidebar).

محتوای <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>

مشاهدهٔ نتیجه

عنصرهای <figure> و <figcaption> در HTML

هدف از زیرنویس شکل (Figure Caption) اضافه‌کردن یک توضیح بصری به یک تصویر است.

در HTML یک تصویر و یک زیرنویس می‌توانند باهم در یک عنصر <figure> گروه‌بندی شوند:

مثال

<figure>
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>

مشاهدهٔ نتیجه

عنصر <img> تصویر و عنصر <figcaption> زیرنویس را تعریف می‌کند.

چرا عنصرهای معنایی؟

با توجه به W3C یک وب معنایی: «اجازه می‌دهد داده‌ها در میان برنامه‌های کاربردی، پروژه‌ها و انجمن‌ها به اشتراک گذاشته شود».

عنصرهای معنایی در HTML

در جدول زیر لیست عنصرهای معنایی جدید در HTML به ترتیب الفبا آمده‌است:

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

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

---

« صفحهٔ قبل

صفحهٔ بعد »