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

//

تگ section در HTML5

تگ section

تگ section تگی است که با استفاده از آن میتوان یک بخش یا ( Section ) را در یک صفحه وب ایجاد کرد.

معمولا از این تگ برای مشخص کردن یک محتوای مستقل استفاده میشه و همچنین بهتره که هر بخش دارای یک عنوان باشه و عنوان رو نیز میتونیم از طریق تگ های تیتر H1-H6 ایجاد نماییم.

آموزش تگ های تیتر یا Heading در HTML

آموزش کار با تگ Section در HTML5

عنصر section در یک سند HTML دورن تگ body قرار می گیرد. این تگ با کمک دو تگ باز و بسته <section></section> باعث ایجاد بخش ها مستقل در صفحات وب می گردد.

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

دوباره تاکید می کنیم که مطابق داکیومنت htm حتما در هنگام استفاده از این تگ باید از تگ های heading که شامل h1 تا h6 هستند نیز استفاده نمایید.

آموزش تگ section

کاربرد تگ section در html

به یاد داشته باشید که، تگ section به عنوان ظرفی برای محتوا های دارای ارتباط معنایی با هم استفاده می شود و این محتوا ها باید و دارای عنوان یا همان heading ها باشند.

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

دلیل استفاده از عنوان برای تگ section  این است که اطلاعات مفهومی راجع به آن section را بیان کند.

مثال از تگ section در HTML

در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.

استفاده از تگ section بهمراه عنوان ( که عنوان از طریق تگ h2 ایجاد شده )

پشتیبانی از صفات و رویدادهای عمومی

تگ section از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.

تگ section

نکات و توضیحات

اگه یادتون باشه بارها گفتم که HTML برای هر چیزی تگ مخصوص ایجاد کرده ، مثلا برای عکس گذاشتن در صفحه باید از تگ img استفاده کنیم، یا مثلا برای ویدئو گذاشتن باید از تگ Video استفاده کنیم.

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

مثلا اگه ما بخوایم لیستی از نتایج جستجو در سایت رو به نمایش بگذاریم، خب تگ مخصوص برای اینکار که وجود نداره پس میتونیم از تگ section استفاده کنیم. ( همانند دستورات زیر )

در کاربرد این تگ در طراحی سایت به این نکات توجه کنید:

نکته قابل توجه در مورد این عنصر این است که، تگ <section> جایگزینی برای تگ هایی مثل تگ div، تگ header، تگ footer و… نیست.

برای ایجاد هدر وب سایت حتما از تگ header و برای ایجاد فوتر حتما از تگ footer استفاده نمایید.

فرق div و section و article در سئو

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

تعاریف و وظیفه مربوط به سایر semantic tags تا حدودی واضح است، اما ارائه محتوا به موتورهای جستجوگر توسط سه تگ div و section و article به شباهت کاربرد از همیت زیادی برخوردارد. بنابراین با دانستن تفاوت و کاربردهای این سه تگ می توانیم از آن ها به نحو درست استفاده کنیم.

در مورد تگ سکشن در این آموزش کاملا وضیح دادیم. در مورد کاربرد های تگ div و تگ article هم در آموزش مرتبط توضیح داده شده. به همن دلیل برای درک کاربرد این سه تگ می توانید از شکل های زیر استفاده کنید.

اگر به یادگیری تخصصی HTML و CSS علاقمند هستید حتما از دوره html و css استفاده کنید. همچنین برای یادگیری طراحی سایت می توانید از خدمات آموزش طراحی قالب وردپرس و یا شرکت در دوره طراحی قالب وردپرس حرفه ای فرا بگیرید.

دانلود فایل این جلسه

برای نصب نرم افزار برای کد نویسی html از لینک زیر استفاده فرمایید.

آموزش نرم افزار های مورد نیاز طراحی وب سایت

در صورت که به طراحی وب آشنایی ندارید میتوانید از آموزش زیر استفاده فرمایید .

طراحی وب

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

آموزش css html آموزش HTML5 CSS3

در یافت تمام جلسات آموزش مرحله به مرحله html از لینک زیر استفاده فرمایید.

آموزش html

میانگین رتبه 5/5 تعداد رای : 1

مطالب مرتبط

نظرات

هیچ دیدگاهی برای این محصول نوشته نشده است.

سبد خرید
در حال بروز رسانی

آموزش‌های ویدیویی جدید یوتیوب رو از دست ندی!

بزن بریــم!