جلسه 13 آموزش HTML: آشنایی با تگ‌ های معنایی (Semantic Elements)

سلام رفیق! 😊 امروز حالت چطوره؟

تو جلسه سیزدهم آموزش HTML رایا وردپرس قراره با تگ‌های معنایی (Semantic Tags) آشنات کنم. این تگ‌ها نه‌تنها باعث میشن کدهای HTML ات مرتب‌تر و خواناتر بشن، بلکه به موتورهای جستجو مثل گوگل هم کمک می‌کنن تا بهتر متوجه بشن محتوای صفحه‌ات درباره چیه.

یه مثال ساده تا بهتر متوجه بشی : فرض کن داری یه مقاله می‌نویسی، ولی هیچ تیتر، پاراگراف یا بخش‌بندی‌ای نداره. همه‌چی پشت سر هم نوشته شده، بدون هیچ نظمی! 🤯 خواننده چطور باید بفهمه کجا مقدمه تموم میشه و کجا متن اصلی شروع میشه؟

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

حالا همینو توی دنیای وب در نظر بگیر! اگه تو فقط از <div> و <span> برای چیدمان صفحه استفاده کنی، مرورگر و گوگل هم مثل اون خواننده گیج میشه. اما با تگ‌های معنایی مثل <header>, <nav>, <section>, و <footer> می‌تونی صفحه رو به بخش‌های مشخص تقسیم کنی تا هم خودت راحت‌تر کد بزنی، هم کاربر و موتور جستجو بهتر متوجه ساختار سایتت بشه.

پس بیا بریم سراغ یادگیری این تگ‌های جادویی! 🚀

تگ‌های معنایی (Semantic Tags) چی هستن؟ 🤓

تگ‌های معنایی در HTML5 تگ‌هایی هستن که به بخش‌های مختلف صفحه‌ ات معنا و مفهوم می‌دن. در گذشته، ما مجبور بودیم همه چیز رو با تگ‌های عمومی مثل <div> و <span> بسازیم و با کلاس‌ها بهشون معنا بدیم. اما الان، خود HTML تگ‌های خاصی داره که هر کدوم یک معنای مشخص دارن.

این تگ‌ها سه تا مزیت بزرگ دارن:

1. خوانایی کد 📝: کدت رو برای خودت و بقیه برنامه‌نویسا خواناتر می‌کنن
2. دسترسی‌پذیری ♿: به نرم‌افزارهای خواننده صفحه کمک می‌کنن تا محتوا رو برای افراد ناتوان، بهتر نمایش بدن
3. سئو 🔍: به موتورهای جستجو کمک می‌کنن تا محتوای سایتت رو بهتر درک کنن

مهم‌ترین تگ‌های معنایی HTML5 👑

1. تگ <header>

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

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

2. تگ <nav>

این تگ برای منوهای ناوبری (Navigation) استفاده می‌شه. مثلاً منوی بالای سایت یا منوی فوتر:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

3. تگ <main>

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

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

4. تگ <article>

این تگ برای محتوای مستقل مثل پست‌های وبلاگ، اخبار یا مقالات استفاده می‌شه:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

5. تگ <section>

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

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

6. تگ <aside>

برای محتوایی که به طور غیرمستقیم با محتوای اصلی مرتبطه استفاده می‌شه، مثل سایدبار یا ستون کناری:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

7. تگ <footer>

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

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

8. تگ <mark>

برای هایلایت کردن متن از این تگ استفاده می‌شه:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

⚠️ توجه!

تگ‌هایی که تا اینجا معرفی کردم، جزو مهم‌ترین و پراستفاده‌ترین تگ‌های معنایی در HTML هستن. ولی خب، یه سری تگ‌های معنایی دیگه هم وجود دارن که شاید کمتر به چشمت خورده باشن و خیلی هم کمتر استفاده بشن. 🤔 اما برای اینکه این آموزش کامل و جامع باشه، اون‌ها رو هم بهت معرفی میکنم🔥

9. تگ <time>

✅ از این تگ برای نمایش تاریخ و زمان استفاده می‌شه که هم برای کاربران قابل خوندنه و هم مرورگرها و موتورهای جستجو بتونن اون رو درک کنن: ⏳📅

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

10. تگ <figure> و <figcaption>

از این تگ‌ها برای نمایش تصاویر، نمودارها و سایر محتوای گرافیکی همراه با توضیحات مربوط به اون‌ها استفاده می‌شه. 📊🖼️

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

نکته! تگ <figcaption> برای اضافه کردن توضیحات یا کپشن برای محتوای داخل تگ <figure> استفاده می‌شه. این تگ معمولاً زیر تصویر یا گرافیک قرار می‌گیره و توضیح مختصری در مورد محتوای داخل <figure> می‌ده.

11. تگ <details> و <summary>

این تگ‌ها برای ساخت باکس‌های آکاردئونی استفاده می‌شن، جایی که کاربر می‌تونه با کلیک روی عنوان، جزئیات بیشتری رو مشاهده کنه:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

نکته! تگ <summary> عنوان بخش آکاردئونی رو مشخص می‌کنه و وقتی کاربر روی اون کلیک می‌کنه، محتوای مخفی داخل بخش که با تگ <details> محصور شده، نمایش داده می‌شه.

12. تگ <address>

تگ <address> برای نمایش اطلاعات تماس مثل ایمیل، آدرس یا شماره تلفن به کار میره. معمولاً این تگ برای ارائه اطلاعات مربوط به شخص یا سازمان استفاده می‌شه:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

13. تگ <blockquote>

این تگ معمولاً برای نقل قول‌هایی به کار می‌ره که بیشتر از یک خط هستن و معمولاً داخل تگ <blockquote> قرار می‌گیرن تا از متن اصلی جدا بشن.

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

14. تگ <cite>

تگ <cite> برای اشاره به منبع یا عنوان یک اثر استفاده میشه. معمولاً از این تگ برای ارجاع به نام کتاب‌ها، مقالات، فیلم‌ها، موسیقی‌ها یا سایر آثار خلاقانه استفاده میشه:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

نکته! از تگ می‌تونی برای اشاره به منبع یا فرد نقل قول کننده استفاده کنی، به این صورت:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

خب حالا با مهم‌ترین و حتی کم‌استفاده‌ترین تگ‌های معنایی HTML آشنا شدی. من همه رو داخل جدول زیر قرار دادم تا بتونی یه نگاه بهتر و دید کلی بهشون داشته باشی:

البته! اینم یه جدول که تمام تگ‌های معنایی HTML رو همراه با توضیح کوتاهشون برات آورده:

تگ های غیر معنایی یا Non-Semantic در HTML

در مقابل تگ های معنایی، تگ های غیرمعنایی قرار دارن. تگ‌های غیر معنایی یا Non-Semantic Tags در HTML، تگ‌هایی هستن که هیچ معنای خاصی در مورد محتوا رو به مرورگر یا موتور جستجو منتقل نمیکنن. این تگ‌ها بیشتر برای ساختاردهی و گروه‌بندی محتوا استفاده میشن، بدون اینکه به محتوا معنا بدن. 🤔

• تگ‌های غیر معنایی: مثل <div> و <span>، فقط برای قالب‌بندی و بخش بندی محتوا هستن و اطلاعات معنایی خاصی ندارن. 🛠️

یه مثال کوچیک برای اینکه بهتر تفاوت تگ های معنایی و غیرمعنایی رو درک کنی:

ببین، از نظر نمایش، هیچ فرقی بین <div class="header"> و <header> وجود نداره! یعنی اگه بخوام یه بخش رو به‌عنوان هدر قرار بدم، می‌تونم از هر کدومشون استفاده کنم و مشکلی پیش نمیاد.

اما تفاوت اصلیشون در معناییه که به مرورگر و موتورهای جستجو میدن. یعنی توی بحث سئو مهمه که از کدوم استفاده کنی.

وقتی از <header> استفاده می‌کنی، گوگل و مرورگرها بهتر متوجه می‌شن که این بخش، واقعاً هدر صفحه‌ست. این باعث می‌شه سایتت ساختار شفاف‌تری داشته باشه و رتبه بهتری بگیره.

پس بهتره از تگ‌های معنایی مثل <header> استفاده کنی تا هم سئو بهتری داشته باشی و هم کدت تمیزتر و استانداردتر باشه!

جمع‌ بندی 🎯

خب رفیق، تو این جلسه با تگ‌های معنایی HTML5 آشنا شدی! 🚀

حالا دیگه می‌دونی که این تگ‌ها کدنویسی‌ات رو مرتب‌تر، سئوی سایتت رو بهتر و دسترسی‌پذیری رو قوی‌تر می‌کنن.

حالا وقتشه که بری و کدهات رو با این تگ ها بهینه‌تر بنویسی! 🔥 هر جا به مشکل خوردی یا سوالی داشتی، من اینجام که کمکت کنم. توی این مسیر پیشرفت خیلی خوبی داشتی و مطمئنم که می‌تونی این مفاهیم رو توی پروژه‌هات به بهترین شکل اجرا کنی. 💪 تا جلسه بعدی آموزش تو رو به خدای بزرگ میسپارم فعلنننن 🙂

جلسه 10 آموزش HTML: ساخت جدول و کار با تگ table

مطالعه

جلسه 8 آموزش HTML: کار با تصاویر در html

مطالعه

جلسه 11 آموزش HTML: ساخت فرم و کار با تگ form

مطالعه