جلسه سی و پنجم: آموزش کامل تگ section در HTML

به دوره حرفه‌ای آموزشHTML در آوای وب خوش اومدی! اینجا قراره تگ section رو مثل یه حرفه‌ای یاد بگیری! این تگ برای گروه‌بندی بخش‌های مرتبط تو صفحه وبته! تو این مقاله، از صفر تا صد تگ section رو با مثالای باحال، نکات خفن، و ترفندهای سئو یاد می‌گیری! آماده‌ای ؟ بزن بریم!

🏷️ تگ section چیه؟

تگ <section> تو HTML یه تگ معنایی (semantic) محسوب میشه. یعنی فقط ظاهر رو نمی‌چینه، بلکه به مرورگر و گوگل می‌فهمونه که «این یه بخش جدا از بقیه محتواست و یه موضوع مشخص داره».

مثلاً اگه توی یه صفحه وب، قسمت «درباره ما»، «تماس با ما» یا «خدمات» داریم، هر کدومش می‌تونه یه <section> باشه. اینطوری نه‌تنها کدت رو خواناتر و مرتب‌تر می‌کنه، بلکه برای سئو و دسترسی‌پذیری هم معجزه می‌کنه! چون ساختار صفحه‌ات رو واضح و حرفه‌ای نشون می‌ده!

🧱 ساختار تگ section : ساده اما خفن!

تگ section یه تگ جفتیه! یعنی باید باز و بسته بشه! کافیه محتوات رو با یه تیتر (مثل <h2>) داخلش بذاری! نگاه کن:

مثال ساده:

<section>
 <h2>معرفی</h2>
 <p>اینجا درباره ماست</p>
</section>

🔍 فرق <section> با <div> و بقیه تگ‌ها چیه؟

✅ نکته: همیشه هر وقت یه بخش از صفحه داری که موضوع خاص خودش رو داره و با یه عنوان جدا مشخص می‌شه، اون‌جا جای تگ <section> ـه.

💡 چرا باید از section استفاده کنیم؟

چند تا دلیل خفن:

• گوگل و سئو عاشق ساختارمند بودنن! (ساختار با تگ‌های معنایی مثل <section> مشخص میشه)
• اسکرین‌ریدرها راحت‌تر متن رو می‌خونن (برای افراد دارای معلولیت)
• نگهداری و توسعه‌ی سایت آسون‌تر میشه (کدت قابل فهم‌تر میشه)
• تو فریم‌ورک‌ها مثل React هم خیلی کاربردیه

🧪 چجوری از تگ <section> استفاده کنیم؟ با مثال

✨ مثال ۱: یه بخش ساده “درباره ما”

<section>
  <h2>درباره ما</h2>
  <p>ما یه تیم عاشق طراحی و کدنویسی هستیم 😎</p>
</section>

✔️ حتما یه تگ عنوان مثل <h2> بذار توی هر <section> چون گوگل اینجوری موضوع اون بخش رو می‌فهمه.

✨ مثال ۲: چندتا بخش مختلف توی یه صفحه

 <section>
    <h2>خدمات ما</h2>
    <ul>
      <li>طراحی وب</li>
      <li>آموزش HTML</li>
    </ul>
  </section>

  <section>
    <h2>تماس با ما</h2>
    <p>ایمیل: [email protected]</p>
  </section>

✨ مثال 3: مقاله‌ای که چند بخش داره

<article>
  <h1>راهنمای خرید لپ‌تاپ</h1>

  <section>
    <h2>مقدمه</h2>
    <p>اگه دنبال یه لپ‌تاپ مناسب هستی، این مقاله واست نوشته شده.</p>
  </section>

  <section>
    <h2>نتیجه‌گیری</h2>
    <p>همیشه نیازت رو بدون، بعد برو خرید.</p>
  </section>
</article>

⚠️ اشتباهات رایج با <section>

📈 نکات سئو مخصوص تگ <section>

• تگ <section> به گوگل کمک می‌کنه که صفحه رو بهتر تحلیل کنه.
• اگه داخلش از heading مناسب و کلمات کلیدی درست استفاده بشه، تأثیر فوق‌العاده‌ای روی رتبه داره.
• استفاده از تگ‌های معنایی باعث افزایش Time on Site میشه (مدت‌زمان حضور کاربر در سایت).

📝 پروژه عملی: با تگ section یه بخش بساز!

حالا نوبت توئه که با تگ <section> یه بخش منظم و معنایی توی صفحه‌ت بسازی. کاری که باید انجام بدی اینه:

1. از تگ <section> استفاده کن تا یه بخش مستقل توی سایتت بسازی.
2. توی این سکشن، یه عنوان (با <h2>) و حداقل ۳ مورد خدمات یا ویژگی سایتت بنویس.
3. هر ویژگی رو با یه عنوان کوچیک (مثل <h3>) و یه توضیح کوتاه توصیف کن.

در ضمن، یادت نره اگه مبتدی هستی، کدات رو تو W3C Validator چک کنی و مطمئن شی درست نوشتی.

❓ پرسش‌های متداول (FAQ)

🔹 تگ <section> چیه؟

بخشی از صفحه با موضوع مشخصه که با عنوان همراهه.

🔹 فرقش با <div> چیه؟

<div> فقط برای چیدمانه، ولی <section> معنا داره (موتور جستجو می‌فهمه چی‌به‌چیه).

🔹 باید تو هر <section> یه <h2> بذارم؟

آره، بهتره. تا گوگل و کاربران بفهمن این بخش درباره چیه.

🔹 چند تا <section> می‌تونم استفاده کنم؟

هرچقدر که نیاز داری! محدودیتی نداره.

🏁 جمع‌بندی: بخش‌بندی‌ات رو بترکون!

حالا تگ section رو مثل یه حرفه‌ای بلدی! وقتشه دست به کار شی! با section می‌تونی بخش‌های مرتبط و خفن تو وب بسازی، کاربرات رو راضی کنی، و گوگل رو عاشق سایتت کنی! این مقاله همه‌چیز رو بهت داد! ساختار، کاربردها، مثال‌ها، نکات پیشرفته، و ترفندهای سئو رو یاد گرفتی تا بهترین بخش‌بندی‌های دنیا رو خلق کنی! پس معطل نکن! یه section بنویس و نشون بده چقدر خفنی! ما تا آخر خط باهاتیم!

💬 ایده‌هات رو فریاد بزن!

نظرت راجب تگ section چیه؟ دلت می‌خواد چه چیزی به این آموزش اضافه کنیم؟ سوالی تو ذهنت مونده؟ تو نظرات برامون بگو! تیم حرفه‌ای پشتیبانی با جون و دل جوابت رو می‌ده!

شهرام نجفی

شهرام نجفی — بیش از ۱۵ سال طراحی و توسعهٔ وب به‌صورت فریلنس. قالب اختصاصی آوای وب را از صفر نوشته‌ام. مطالب این سایت را بر پایهٔ مستندات رسمی MDN و WHATWG می‌نویسم و قبل از انتشار در مرورگرهای واقعی تست می‌کنم. نمونه‌کارهایم در shahramnajafi.com است.