عنصرهای معنایی
عنصرهای معنایی = عنصرهایی با یک معنی
محتویات
- ۱ عنصرهای معنی چیست؟
- ۲ عنصرهای معنایی جدید در HTML
- ۳ عنصر <section> در HTML
- ۴ عنصر <article> در HTML
- ۵ تودرتو کردن <article> در <section> یا برعکس؟
- ۶ عنصر <header> در HTML
- ۷ عنصر <footer> در HTML
- ۸ عنصر <nav> در HTML
- ۹ عنصر <aside> در HTML
- ۱۰ عنصرهای <figure> و <figcaption> در HTML
- ۱۱ چرا عنصرهای معنایی؟
- ۱۲ عنصرهای معنایی در HTML
- ۱۳ منابع آموزشی
عنصرهای معنی چیست؟
یک عنصر معنایی به خوبی معنی خود را به مرورگر و توسعه دهنده توضیح می‌دهد.[۱]
مثال‌هایی از عنصرهای غیر معنایی: <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: "بخش یک گروه‌بندی موضوعی محتوا و معمولاً با یک عنوان است ".
معمولاً ممکن است صفحه خانه به بخش‌هایی برای مقدمه، محتوا و اطلاعات تماس تقسیم‌بندی شود.
مثال
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> یک پاورقی برای سند یا بخش تعریف می‌کند.
یک عنصر <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> مجموعه لینک‌های راهبری (به انگلیسی: 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> | تاریخ / زمان را مشخص می‌کند |
منابع آموزشی