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

جلسه 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>

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

<header>
  <img src="logo.png" alt="لوگوی سایت">
  <h1>عنوان سایت من</h1>
</header>

2. تگ <nav>

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

<nav>
  <ul>
    <li><a href="#">صفحه اصلی</a></li>
    <li><a href="#">تماس با ما</a></li>
  </ul>
</nav>

3. تگ <main>

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

<main>
  <h2>خوش آمدید!</h2>
  <p>این محتوای اصلی صفحه است.</p>
</main>

4. تگ <article>

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

<article>
  <h2>عنوان مقاله</h2>
  <p>متن مقاله در اینجا...</p>
</article>

5. تگ <section>

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

<section>
  <h2>خدمات ما</h2>
  <p>ما خدمات طراحی وب ارائه می‌دهیم.</p>
</section>

6. تگ <aside>

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

<aside>
  <h3>مطالب مرتبط</h3>
  <p>این مطالب ممکن است برای شما جالب باشد.</p>
</aside>

7. تگ <footer>

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

<footer>
  <p>© تمامی حقوق محفوظ است. 1403</p>
</footer>

8. تگ <mark>

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

<p>این یک متن معمولیه اما <mark>این بخش مهمه</mark> و هایلایت شده.</p>

⚠️ توجه!

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

9. تگ <time>

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

<p>تاریخ انتشار: <time datetime="2024-03-04">4 مارس 2024</time></p>

10. تگ <figure> و <figcaption>

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

<figure>
  <img src="chart.jpg" alt="چارت فروش">
  <figcaption>نمودار فروش سال 1402</figcaption>
</figure>

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

11. تگ <details> و <summary>

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

<details>
  <summary>برای دیدن جزئیات بیشتر کلیک کنید</summary>
  <p>این محتوا به صورت پیشفرض مخفیه و با کلیک روی عنوان نمایش داده می‌شه.</p>
</details>

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

12. تگ <address>

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

<address>
  نویسنده: <a href="mailto:saeed@example.com">سعید</a><br>
  آدرس: ایران، تهران، خیابان ولیعصر<br>
  تلفن: 021-12345678
</address>

13. تگ <blockquote>

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

<blockquote>
  <p>این یک نقل قوله...</p>
</blockquote>

14. تگ <cite>

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

<p>کتاب <cite>شاهنامه</cite> اثر فردوسی یکی از شاهکارهای ادبیات فارسیه.</p>

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

<blockquote>
  <p>موفقیت نتیجه آمادگی و تلاش است.</p>
  <footer>— <cite>کتاب روانشناسی موفقیت</cite></footer>
</blockquote>

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

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

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

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

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

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

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

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

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

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

جمع‌ بندی 🎯

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

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

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