معرفی المان های ساختاری در HTML5 - قسمت اول

با اطمینان کامل می‌توان گفت که هر سایتی که تاکنون ایجاد شده است از المان‌های ساختاری و محتوایی برخوردار بوده و به نحوی از آنها استفاده کرده است. از برچسب های پاراگراف (<p>) گرفته تا برچسب های تقسیم کننده (<div>)، المان‌هایی هستند که تاکنون ساختار وب‌سایت‌های ما را شکل داده‌اند. گرچه مشکلی که در نسخه‌های قبلی HTML (تا قبل از نسخه 5) وجود داشت، عدم پشتیبانی محتوا خارج از مفهوم سند (Document) بود.

خوشبختانه HTML5 لیست بلند بالایی از المان های جدید را معرفی کرده است که می‌توانند برای حل این مشکل مورد استفاده قرار گیرند و محتوای وب سایت‌ها را به سمت معناگراتر (Semantic) شدن پیش ببرند.

ساختار در HTML5

المان‌های جدید ساختاری در HTML5 به ما امکانات فراوانی برای توصیف بخش‌های مختلف صفحات وب را می‌دهند و را ه‌های زیادی را پیش پای ما می‌گذارند. تا به امروز استفاده از المان‌های div و span به صورت ترکیبی برای ایجاد ساختار صفحه مناسب‌ترین گزینه پیش رو بود، اما طراحی ساختار سایت‌ها با این راه دیگر کافیست! ما اکنون به المان‌هایی مانند section، header، hgroup، footer، nav، article و aside دسترسی داریم که می‌توانند برای ایجاد ساختار، مورد استفاده قرار گیرند. هرکدام از این المان‌های جدید با هدف خاصی معرفی شده‌اند و به ما در تفکیک بخش‌های صفحات وب سایت‌های مدرن کمک خواهند کرد. در زیر لیستی از المان‌های جدید ساختاری معرفی شده در HTML5به اختصار معرفی می‌شود:

المان Section

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

المان Header

از این المان همان‌گونه که از نام آن پیداست برای نگهداری آرم یا نام شرکت استفاده می‌شود. هرچند که تاکنون با قسمت هدر یک وب سایت مانند سایر قسمت‌ها برخورد می‌شد و از div برای نشانه گذاری آن استفاده می‌گردید، اکنون با معرفی المان جدید header کلیه اجزای هدر یک سایت مانند آرم وب سایت یا شرکت، منوهای راهبری سایت (چناچه به حالت معمول در بالای صفحات سایت در نظر گرفته شده بودند)، عناوین صفحات و یا هر آنچه که به طور معمول برای هدر در نظرگرفته می‌شود ، در آن قرار می‌گیرد. عناوین نوشته‌ها که اصولا بخش‌هایی از متن را از یکدیگر به صورت ظاهری تفکیک می کند باید توسط این برچسب نشانه گذاری شوند.

المان Hgroup

از این المان برای تنظیم چندین المان Heading (H1 تا h6) استفاده می شود. بیشترین استفاده این المان هنگامی است که نوشته شما دارای یک عنوان (heading) و زیرعنوان (sub heading) است. در نسخه های پیشین HTML تنها راه گروه بندی عناوین، استفاده از راه های جایگزینی مانند بهره گیری از المان div بود که راه ایده آلی برای وب معنایی (Semantic Web) نبود.

به نقل از وبلاگینا