آموزش تگ section در HTML5 فیلم آموزشی
تگ section در HTML5
فهرست موضوعات در این آموزش
تگ section تگی است که با استفاده از آن میتوان یک بخش یا ( Section ) را در یک صفحه وب ایجاد کرد.
معمولا از این تگ برای مشخص کردن یک محتوای مستقل استفاده میشه و همچنین بهتره که هر بخش دارای یک عنوان باشه و عنوان رو نیز میتونیم از طریق تگ های تیتر H1-H6 ایجاد نماییم.
آموزش تگ های تیتر یا Heading در HTML
آموزش کار با تگ Section در HTML5
عنصر section در یک سند HTML دورن تگ body قرار می گیرد. این تگ با کمک دو تگ باز و بسته <section></section> باعث ایجاد بخش ها مستقل در صفحات وب می گردد.
هنگامی از تگ <section>استفاده کنید که محتوای شما از نظر مفهومی دارای تم مشخصی است. حتما به تگ section خود عنوان بدهید تا بخش مورد نظر برای مخاطب شما قابل فهم گردد.
دوباره تاکید می کنیم که مطابق داکیومنت htm حتما در هنگام استفاده از این تگ باید از تگ های heading که شامل h1 تا h6 هستند نیز استفاده نمایید.
کاربرد تگ section در html
به یاد داشته باشید که، تگ section به عنوان ظرفی برای محتوا های دارای ارتباط معنایی با هم استفاده می شود و این محتوا ها باید و دارای عنوان یا همان heading ها باشند.
اگر در هنگام ساخت قصد دارید از تگ section استفاده کرده و بخشی را به صفحه وب خود اضافه کنید ولی نمی توانید عنوانی برای آن تعریف کنید، مطمئن باشید که درست از section استفاده نکرده اید و باید از تگ div به جای آن استفاده کنید.
دلیل استفاده از عنوان برای تگ section این است که اطلاعات مفهومی راجع به آن section را بیان کند.
مثال از تگ section در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
استفاده از تگ section بهمراه عنوان ( که عنوان از طریق تگ h2 ایجاد شده )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<body dir="rtl"> <section> <h2>بخش اول</h2> <p>سایت آموزشی پاسخ وردپرس سایت آموزشی پاسخ وردپرس سایت آموزشی پاسخ وردپرس سایت آموزشی پاسخ وردپرس سایت آموزشی پاسخ وردپرس </p> </section> <section> <h2>بخش دوم</h2> <p>سایت آموزشی پاسخ وردپرس سایت آموزشی پاسخ وردپرس سایت آموزشی پاسخ وردپرس سایت آموزشی پاسخ وردپرس سایت آموزشی پاسخ وردپرس </p> </section> </body> |
پشتیبانی از صفات و رویدادهای عمومی
تگ section از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
نکات و توضیحات
اگه یادتون باشه بارها گفتم که HTML برای هر چیزی تگ مخصوص ایجاد کرده ، مثلا برای عکس گذاشتن در صفحه باید از تگ img استفاده کنیم، یا مثلا برای ویدئو گذاشتن باید از تگ Video استفاده کنیم.
حال تگ section میتونه داخلش محتوای مستقل قرار بگیره، منظور از مستقل یعنی اگه چیزی باشه ولی تگ مخصوص براش وجود نداشته باشه میتونه داخل تگ section قرار بگیره.
مثلا اگه ما بخوایم لیستی از نتایج جستجو در سایت رو به نمایش بگذاریم، خب تگ مخصوص برای اینکار که وجود نداره پس میتونیم از تگ section استفاده کنیم. ( همانند دستورات زیر )
|
1 2 3 4 5 6 7 8 |
<body> <section> <h2>نتایج یافت شده از جستجو</h2> <p> طراحی قالب وردپرس</p> <p> آموزش طراحی قالب ووکامرس</p> <p> آموزش php</p> </section> </body> |
در کاربرد این تگ در طراحی سایت به این نکات توجه کنید:
نکته قابل توجه در مورد این عنصر این است که، تگ <section> جایگزینی برای تگ هایی مثل تگ div، تگ header، تگ footer و… نیست.
برای ایجاد هدر وب سایت حتما از تگ header و برای ایجاد فوتر حتما از تگ footer استفاده نمایید.
فرق div و section و article در سئو
ارائه تگ های معنادار در html5 اتفاق مثبتی است که باعث بهبود سئو وب سایت های استاندارد می شود. تگ هایی که بخش بندی های صفحات سایت ما را بهتر به ربات های موتور جستجو معرفی می کنند.
تعاریف و وظیفه مربوط به سایر semantic tags تا حدودی واضح است، اما ارائه محتوا به موتورهای جستجوگر توسط سه تگ div و section و article به شباهت کاربرد از همیت زیادی برخوردارد. بنابراین با دانستن تفاوت و کاربردهای این سه تگ می توانیم از آن ها به نحو درست استفاده کنیم.
در مورد تگ سکشن در این آموزش کاملا وضیح دادیم. در مورد کاربرد های تگ div و تگ article هم در آموزش مرتبط توضیح داده شده. به همن دلیل برای درک کاربرد این سه تگ می توانید از شکل های زیر استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<article> <h1>دوره آموزش طراحی وب حرفه ای آموزش html css</h1> <section> <h2>برای یادگیری حتما نیاز به تلاش و پشت کار اh2ست</h2> <section> <h3>Lorem</h3> Lorem ipsum dolor sit amet. </section> <section> <h3>پاسخ وردپرس</h3> برای یادگیری حتما نیاز به تلاش و پشت کار اh2ست </section> <section> <h3>آموزش طراحی قالب</h3> آموزش طراحی قالب وردپرس به صورت حرفه ای و کاربردی </section> </section> <section> <h2>آموزش تگ های html به صورت کامل </h2> </section> <section> <h2>با پاسخ وردپرس همراه باشید</h2> </section> </article> |
اگر به یادگیری تخصصی HTML و CSS علاقمند هستید حتما از دوره html و css استفاده کنید. همچنین برای یادگیری طراحی سایت می توانید از خدمات آموزش طراحی قالب وردپرس و یا شرکت در دوره طراحی قالب وردپرس حرفه ای فرا بگیرید.
برای نصب نرم افزار برای کد نویسی html از لینک زیر استفاده فرمایید.
آموزش نرم افزار های مورد نیاز طراحی وب سایت
در صورت که به طراحی وب آشنایی ندارید میتوانید از آموزش زیر استفاده فرمایید .
در صورت که میخواهید به صورت حرفه ای طراحی وب را فرا بگیرید از لینک زیر استفاده فرمایید .
آموزش css html آموزش HTML5 CSS3
در یافت تمام جلسات آموزش مرحله به مرحله html از لینک زیر استفاده فرمایید.
هنوز بررسی‌ای ثبت نشده است.