فقط واتساپ ۰۹۱۵۷۲۳۲۳۹۸

تگ section در HTML + فیلم آموزشی

تگ section در html برای ایجاد یک بخش مستقل و معنادار استفاده می شود. ممکن است این سوال در ذهن شما به وجود بیاید که چطور بخش مستقل را تشخیص دهیم؟ برای کدام بخش ها استفاده از تگ سکشن اشتباه است؟ یا سوالاتی مشابه برایتان به وجود بیاید. در این نوشته شیوه اصولی استفاده از تگ section در html را همراه با مثال و تصویر بررسی کنیم تا با این تگ به خوبی آشنا شوید.

 

⭐ (پیشنهاد می کنم برای یادگیری بهتر، ابتدا ویدیو بالا که قسمتی از دوره رایگان آموزش HTML CSS به زبان ساده است را ببینید سپس ادامه متن را مطالعه نمایید.)⭐

 

تگ section چیست؟

تعریف تگ section: همانطور از نام آن مشخص است یعنی بخش و قسمت. در html5 از این تگ برای بخش بندی صفحه به قسمت های معنی دار استفاده می شود. بخش معنی دار، یعنی بخشی که از ایجاد آن یک هدف خاص داریم. هر جا که این تگ را قرار می دهیم موتورهای جستجو در آن بخش دنبال هدف ما می گردند. بنابراین استفاده نا به جا از آن باعث سردرگمی ربات های جستجو در سایت می شود و از نظر سئو به سایت لطمه می زند. در ادامه به صورت دقیق تر این موضع را بررسی می کنیم.

 

 

آموزش تگ section در html

طبق توضیحاتی که در بالا دادیم باید بخش هایی از صفحه که هدف خاصی را دنبال می کند مشخص کنیم، سپس برای بخش بندی آن قسمت ها از تگ Section استفاده کنیم. در زیر نکاتی را ذکر می کنیم که با استفاده از آنها شیوه استفاده از آن را بهتر دریابید:

  • معمولا بخش هایی که مشخص می کنیم باید یک عنوان خاص (<h1> تا <h6>) داشته باشند.
  • محتویاتی که داخل یک سکشن قرار می گیرند باید به هم مرتبط باشند و مجموعا یک معنا را برسانند. اگر محتوایات از نظر معنایی مرتبط نیستند بهتر است از <div> استفاده کنید.
  • بستگی به صفحه شما، هم تگ <section> می تواند درون تگ <article> قرار بگیرد و هم <article> می تواند درون <section> قرار گیرد.
  • برای قسمت هایی که فقط قصد داریم استایل خاصی داشته باشد از تگ <div> استفاده می کنیم و استفاده از <section> در این مواقع صحیح نیست.
  • استفاده از <section> به جای هدر، فوتر و سایدبار صحیح نیست.

 

کار با تگ section (همراه با مثال)

مثال 1- کار با تگ section (استفاده صحیح: شامل عنوان بخش و سایر قسمت ها)

 

مثال 2- استفاده از section درون article

 

مثال 3- استفاده از article درون section

 

کاربرد تگ section در html5 (نکات + تصویر)

  • اگر هدف ما از ایجاد بخش، نشان دادن یک محتوای مستقل باشد (مثلا وبلاگ، مقاله و … ) بهتر است از تگ <article> استفاده کنیم.
  • اگر اطلاعات مفیدی را بخواهیم نشان دهیم که در کنار محتوای اصلی نمایش داده شود بهتر است از تگ <aside> استفاده کنیم.
  • اگر در سند خود قصد داشته باشیم قسمت اصلی صفحه را مشخص کنیم از تگ <main> استفاده می کنیم.
  • اگر قصد داریم یک بخش داشته باشیم که فقط ظاهر خاصی داشته باشد و هدف خاص دیگری نداریم از <div> استفاده می کنیم.
  • معمولا برای هر <section> باید بتوانیم یک عنوان (<h1> تا <h6>) مشخص کنیم. اگر نمی توانید یک عنوان برای آن در نظر بگیرید کمی درباره آن بیشتر فکر کنید و اگر هدفتان مشخص بود از آن استفاده کنید.

 

 

 

جمع بندی

در این نوشته سعی کردیم تگ section در html را تعریف کنیم، کاربرهای آن را بیان کنیم و همچنین آموزش استفاده از آن و جاهایی که بهتر است از این تگ استفاده نشود را به صورت کامل مورد بررسی قرار دهیم. اگر نکته مبهمی در ذهن شما هست و یا تجربه ای در این زمینه دارید خوشحال می شویم در بخش نظرات مطرح نمایید تا شما هم سهمی در کاملتر شدن این آموزش داشته باشید.

 

منبع: https://www.w3schools.com/tags/tag_section.asp

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

ورود | ثبت نام
شماره موبایل یا ایمیل خود را وارد کنید
برگشت
کد تایید را وارد کنید
کد تایید برای شماره موبایل شما ارسال گردید
ارسال مجدد کد تا دیگر
برگشت
رمز عبور را وارد کنید
رمز عبور حساب کاربری خود را وارد کنید
برگشت
رمز عبور را وارد کنید
رمز عبور حساب کاربری خود را وارد کنید
برگشت
درخواست بازیابی رمز عبور
لطفاً پست الکترونیک یا موبایل خود را وارد نمایید
برگشت
کد تایید را وارد کنید
کد تایید برای شماره موبایل شما ارسال گردید
ارسال مجدد کد تا دیگر
ایمیل بازیابی ارسال شد!
لطفاً به صندوق الکترونیکی خود مراجعه کرده و بر روی لینک ارسال شده کلیک نمایید.
تغییر رمز عبور
یک رمز عبور برای اکانت خود تنظیم کنید
تغییر رمز با موفقیت انجام شد