درک بخش HTML5 SECTION
هنگامی که HTML5 چند سال پیش بر روی صحنه قرار می گیرد، تعدادی از عناصر بخش بندی جدید را به Langauge اضافه می کند، از جمله عنصر SECTION. بسیاری از عناصر جدید که HTML5 معرفی می کنند، استفاده های واضحی دارند. برای مثال، این عنصر برای تعریف مقالات و بخش های اصلی یک صفحه وب استفاده می شود، این عنصر برای تعریف محتوا مرتبط است که برای بقیه صفحه ها حیاتی نیست، و هدر، نوک و پاورقی بسیار توضیح دهنده هستند. با این حال، عنصر SECTION جدید اضافه شده کمی کمتر روشن است.
بسیاری از مردم بر این باورند که عناصر HTML بخش و واقعا یک عنصر عنصر کانتینر عمومی هستند که برای محتویات محتوا در یک صفحه وب استفاده می شوند. با این حال، واقعیت این است که این دو عنصر، در حالی که هر دو عناصر کانتینری هستند، جز موارد عمومی هستند. دلایل خاصی برای استفاده از عنصر SECTION و عنصر DIV وجود دارد - و این مقاله این اختلافات را توضیح می دهد.
بخش ها و Divs
عنصر SECTION به عنوان بخش معنایی یک صفحه وب یا سایت تعریف می شود که نوع خاص دیگری از آن نیست (مثل مقاله یا کنار). من تمایل به استفاده از این عنصر زمانی که من مشخص بخش جداگانه از صفحه - بخش است که می تواند عمده فروشی نقل مکان کرد و استفاده می شود در سایر صفحات و یا بخش های سایت. اگر بخواهید یک قطعه مجزا از محتوا یا یک بخش از محتوا باشد.
در مقابل، شما از عنصر DIV برای قسمت هایی از صفحه که میخواهید تقسیم کنید استفاده کنید، اما برای اهداف غیر از معنایی . من یک محدوده محتوا را در قسمت تقسیم می کنم اگر من این کار را انجام می دهم صرفا به منظور استفاده از CSS برای استفاده از قلاب خودم. ممکن است بخش متمایزی از محتوا براساس معانی شناخته نشود، اما چیزی است که من برای دستیابی به طرح مورد نظر برای صفحه خود می نویسم.
همه چیز درباره معنایی است
این یک مفهوم سخت برای درک است، اما تنها تفاوت بین عنصر DIV و عنصر SECTION معناشناسی است. به عبارت دیگر، این معنی بخش کد است که تقسیم می کنید.
هر محتوایی که در داخل یک عنصر DIV قرار دارد هیچ معنی ذاتی ندارد. بهتر است برای چیزهایی مانند:
- سبک CSS و قلاب برای سبک CSS
- ظروف چیدمان
- قلابهای جاوا اسکریپت
- تقسیم بندی های HTML برای خواندن آن آسان تر است
عنصر DIV تنها عنصری بود که ما برای اضافه کردن قلاب ها به سبک اسناد ما ایجاد کردیم و ستون ها و طرح های فانتزی ایجاد کردیم. به همین علت، ما با HTML با عناصر DIV غلبه کردیم - چه چیزی طراحان وب می توانند "divitis" بدانند. حتی ویرایشگرهای WYSIWYG که از عنصر DIV استفاده می کردند، وجود داشت. من در واقع در سراسر HTML اجرا می شود که از عنصر DIV به جای پاراگراف استفاده می کند!
با استفاده از HTML5، می توانیم از عناصر بخش بندی برای ایجاد اسناد توصیفی اسناد بیشتر استفاده کنیم (با استفاده از آنها برای ناوبری و برای ارقام توصیفی و غیره) و همچنین سبک ها را بر روی آن عناصر تعریف کنیم.
درباره عنصر SPAN چیست؟
عنصر دیگری که اکثر مردم فکر می کنند زمانی که از عنصر DIV فکر می کنند، عنصر است. این عنصر، مانند DIV، یک عنصر معنایی نیست. این یک عنصر درون خطی است که شما می توانید برای اضافه کردن قلاب برای سبک ها و اسکریپت ها در اطراف بلوک های درون خطی از محتوا (معمولا متن) استفاده کنید. به این معنا، دقیقا مانند عنصر DIV است، فقط درون خطی، نه یک عنصر بلوک . در بعضی موارد، ممکن است ساده تر از DIV به عنوان یک عنصر SPAN بلوک فکر کنید و از آن به همان شیوه استفاده کنید که SPAN فقط برای کل بلوک های محتوای HTML باشد.
هیچ عنصر درون خطی در HTML5 قابل مقایسه نیست.
برای نسخه های قدیمی اینترنت اکسپلورر
حتی اگر از نسخه های به طور چشمگیری نسخه های IE (مانند IE 8 و پایین تر) پشتیبانی می کنید که به طور قابل اعتماد HTML5 را تشخیص نمی دهند، نباید ترس از استفاده از برچسب های صحیح HTML صحیح داشته باشید. معانی شناختی به شما و تیم شما کمک خواهد کرد که صفحه را در آینده مدیریت کنید (زیرا شما می دانید که این بخش مقاله است اگر از عنصر ARTICLE احاطه شده باشد). به علاوه، مرورگرهایی که این تگ ها را شناسایی می کنند، از آنها بهتر حمایت خواهند کرد.
شما هنوز هم می توانید عناصر بخش بندی معنایی HTML5 را با اینترنت اکسپلورر استفاده کنید، شما فقط باید اسکریپت را اضافه کنید و احتمالا چند عنصر عناصر DIV اطراف خود را برای به رسمیت شناختن تگ ها به عنوان HTML.
با استفاده از عناصر DIV و SECTION
اگر از آنها به درستی استفاده می کنید، می توانید از دو عنصر DIV و SECTION با یک سند معتبر HTML5 استفاده کنید. همانطور که در این مقاله در اینجا دیده اید، از عنصر SECTION برای تعریف بخش های معنایی از محتویات محتوا استفاده می کنید و از عنصر DIV به عنوان قلاب برای CSS و جاوا اسکریپت و همچنین تعریف طرح که معنی معنایی ندارد استفاده می کنید.
مقاله اصلی جنیفر کریینین. ویرایش شده توسط Jeremy Girard در تاریخ 3/15/17