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

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
(تغییرمسیر از عنصر article در html)
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Html-menu.png
موارد آموزشی
۱خانه
۲مقدمه
۳ویرایشگرها
۴پایه
۵عنصرها
۶ویژگی‌ها
۷عنوان‌ها
۸پاراگراف‌ها
۹استایل‌ها
۱۰قالب‌بندی
۱۱نقل‌قول‌ها
۱۲توضیحات
۱۳رنگ‌ها
۱۴CSS
۱۵لینک‌ها
۱۶تصاویر
۱۷جداول
۱۸لیست‌ها
۱۹بلوک‌ها
۲۰کلاس‌ها
۲۱شناسه
۲۲Iframeها
۲۳جاوا اسکریپت
۲۴مسیرهای فایل
۲۵سرصفحه
۲۶چیدمان‌ها
۲۷واکنش‌گرا
۲۸کد کامپیوتری
۲۹معنایی‌ها
۳۰راهنمای استایل
۳۱موجودیت‌ها
۳۲نماد‌ها
۳۳ایموجی‌ها
۳۴مجموعه کاراکترها
۳۵رمزگذاری URL
۳۶HTML و XHTML
فرم‌های HTML
گرافیک در HTML
رسانه در HTML
APIها در HTML
مثال‌ها
مرجع HTML


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


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

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

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

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

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

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

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

Img sem elements.gif
  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

عنصر <section> در HTML

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

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

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

مثال

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


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


عنصر <article> در HTML

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

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

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

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

مثال

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


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


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

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

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

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

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

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

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

عنصر <header> در HTML

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

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

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

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

مثال

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


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


عنصر <footer> در HTML

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

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

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

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

مثال

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


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


عنصر <nav> در HTML

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

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

مثال

1 <nav>
2   <a href="/html/">HTML</a> |
3   <a href="/css/">CSS</a> |
4   <a href="/js/">JavaScript</a> |
5   <a href="/jquery/">jQuery</a>
6 </nav>


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


عنصر <aside> در HTML

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

محتوای <aside> باید با محتوای اطرافش مرتبط باشد.

مثال

1 <p>My family and I visited The Epcot center this summer.</p>
2 
3 <aside>
4   <h4>Epcot Center</h4>
5   <p>The Epcot Center is a theme park in Disney World, Florida.</p>
6 </aside>


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


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

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

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

مثال

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


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


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

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

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

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

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

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

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


منابع آموزشی