جلسه ی  چهل و سوم: تگ Section در HTML

html, آموزش طراحی سایت ابوالفضل کلهری بدون نظر 10 فوریه 2019 156 بازدید

تگ Section در HTML

در جلسات پیش در مورد قسمت sidebar و تگ aside صحبت نموده ایم (برای دیدن آموزش تگ Aside در HTML5 کلیک کنید) در این جلسه می خواهیم درباره ی تگ Section در HTML صحبت کنیم (برای دیدن آموزش HTML به زبان ساده کلیک کنید)

 

تگ Section در HTML

باید بگوییم که تگ Section به نوعی یک تگ مادر به حساب می آید. تگ Section یکی از تگ های جدید در زبان نشانه گذاری HTML می باشد. عموما شاید بعضی ها به این فکر کنند که این تگ جایگزینی برای تگ div است اما باید بگوییم که این حرف کاملا غیر منطقی و غلط می باشد.

سوال دیگری که در مورد تگ Section ممکن است ذهن شما را به خود مشغول کرده باشد این است که آیا می توانید از این تگ به درستی استفاده کنید یا خیر؟؟؟ باید بگوییم زمانی از این تگ استفاده می کنیم که محتوای مورد نظر ما دارای تگ های Heading باشند. (برای دیدن آموزش Heading ها کلیک کنید) یعنی عموما این تگ زمانی استفاده می شود که ما بخواهیم بخش Content در وب سایت خود را طراحی کنیم.

نکته: یادتان باشد زمانی که نتوانستیم تشخیص دهیم آیا نیاز است که از تگ Section استفاده کنیم یا نه بهتر است از آن تگ استفاده نکرده و به جای آن از از تگ div استفاده کنیم.

نکته: تگ Section در تمامی مرورگر ها پشتیبانی می شود.

 

کاربرد تگ Section در HTML5

باید بگوییم که عموما کاربرد تگ Section در HTML تقسیم بندی صفحه بوده و نماینده ی صفحه نیز می باشد. در کل این تگ در قسمت هایی از صفحه استفاده می شود که با یکدیگر ارتباط معنایی دارند. چون تگ Section تگ کاملی است و مانند نماینده ی صفحه می باشد می توان در آن از تگ های Hreader و Footer نیز استفاده کرد، همچنین تگ های Section، nav، aside، Article نیز در آن قرار دارند.

یادتان باشد زمانی که از تگ Section استفاده می کنیم حتما باید در آن از Heading ها استفاده کنیم. در صورتی که نمی توانیم برای تگ Section یک عنوان تعریف کنیم نباید از این تگ استفاده شود و کافیست به جای آن از تگ Div استفاده کنیم.

نکته: زمانی که می خواهیم اسکریپت بنویسیم بهتر است به جای استفاده از تگ Section از تگ Div استفاده کنیم.

نکته: در صورتی که می خواهید به یک مبحث استایل بدهید نباید از تگ Section استفاده کنیم.

نکته: بادتان باشد که در یک تگ Section می توان Section های دیگری نیز قرار داد.

نکته: زمانی که از تگ های دیگر درون تگ Section استفاده می کنید به یاد داشته باشید که محتوای درون  این تگ ها باید با یکدیگر ارتباط معنایی داشته باشند.

برای فهم بیشتر به مثال زیر توجه کنید:

کد HTML:

<section>

<img src="image/img.jpg" alt="">

<h2>لوگوی کمیابی ها</h2>

<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.</p>

</section>

کد CSS:

body {

background-color: #fff;

}

img {

width: 350px;

height: 250px

}

section {

text-align: center;

box-shadow: 1px 1px 20px rgba(0,0,0,.5);

border-radius: 5px;

width: 60%;

margin: 20px auto;

padding: 20px 0;

}

body {

background-color: #fff;

}

img {

width: 350px;

height: 250px

}

section {

text-align: center;

box-shadow: 1px 1px 20px rgba(0,0,0,.5);

border-radius: 5px;

width: 60%;

margin: 20px auto;

padding: 20px 0;

}

خروجی کد بالا:

تگ Section در HTML

همانطور که در مثال بالا مشاهده می کنید در تگ Section از تگ های Heading استفاده نموده ایم. این مثال یک مثال کوچک در این زمینه می باشد. حال میخواهیم در مثال بعدی کاربرد این تگ را بهتر نشان دهیم. به مثال زیر توجه کنید:

کد HTML:

<section>

<h2>فوتر چیست؟</h2>

<p>به پایین ترین قسمت سایت که به لینک سازی سایت کمک نموده و همچنین قسمتی از منو نیز می باشد فوتر می گویند.</p>

</section>

<section>

<h2>هدر چیست؟</h2>

<p>به بالاترین قسمت سایت که منو ها، لوگو و قسمت سرچ در آن قرار میگیرد هدر می گویند.</p>

</section>

<section>

<h2>sidebar چیست؟</h2>

<p>به قسمت کناری سایت که عموما مطالب کم اهمیت و غیر مرتبط در آن قرار میگیرند ساید بار می گویند.</p>

</section>

کد CSS:

body {

background-color: #fff;

}

img {

width: 350px;

height: 250px

}

section {

border-bottom: 1px solid #777;

margin: 20px auto;

padding: 20px 0;

}

خروجی کد بالا:

تگ Section در HTML

 

همانطور که در نمونه کد بالا مشاهده می کنید هر تگ Section در HTML به دو بخش تقسیم شده که دارای تگ های H2 و p می باشد. در این مثال می توانید کاملا بخش بندی را متوجه شوید. عموما هر تگ Section یک چنین حالتی به وب سایت ما می دهد.

 

خلاصه مطلب

  1. تگ Section یکی از تگ های جدید در زبان نشانه گذاری HTML می باشد.
  2. یادتان باشد زمانی که نتوانستیم تشخیص دهیم آیا نیاز است که از تگ Section استفاده کنیم یا نه بهتر است از آن تگ استفاده نکرده و به جای آن از از تگ div استفاده کنیم.
  3. عموما کاربرد تگ Section تقسیم بندی صفحه می باشد.
  4. یادتان باشد زمانی که از تگ Section استفاده می کنیم حتما باید در آن از Heading ها استفاده کنیم. در غیر این صورت از این تگ استفاده نمیکنیم.
  5. زمانی که از تگ های دیگر درون تگSection استفاده می کنید به یاد داشته باشید که محتوای درون این تگ ها باید با یکدیگر ارتباط معنایی داشته باشند.

احساس خود را درباره این مقاله بگویید 0 نظر

جلسه ی  چهل و سوم: تگ Section در HTML
0 0
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

مقالات پیشنهادی
دیدگاه شما در رابطه با این مقاله چیست!؟

ارسال دیدگاه

  • ایمیل شما هیچگاه توسط کمیابی ها فاش نمی شود.
  • لطفا از پرسش تکراری خودداری کنید.
  • برای پشتیبانی محصولات و دریافت بهترین نتیجه از بخش تیکت استفاده کنید.
  • میانگین زمان پاسخ دهی به دیدگاه ها، حدود 1 ساعت می باشد.
  • ارسال دیدگاه به معنی این است که شما ابتدا قوانین ارسال دیدگاه را مطالعه کرده‌اید و با آن موافق هستید.

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.