مقاله زیر را در راستای همکاری با سایت وبلاگینا ، اختصاصاً برای آن سایت نگارش کرده ام . این مقاله بازنشر مقاله اصلی است. بدلیل بازنشر بودن این مطلب امکان ارسال نظر در مورد این مطلب را غیرفعال کرده ام. برای ارسال نظر به اصل مقاله در سایت وبلاگینا مراجعه نمایید و نظرات و سوالات خود در آنجا مطرح نمایید.

با اطمینان کامل می توان گفت که هر سایتی که تاکنون ایجاد شده است از المان های ساختاری و محتوایی برخوردار بوده است و به نحوی از آنها استفاده کرده است. از برچسب های پاراگراف (<p>) گرفته تا برچسب های تقسیم کننده (<div>) المان هایی هستند که تاکنون ساختار وب سایت های ما را شکل داده اند. گرچه ، مشکلی که در نسخه های قبلی HTML (تا قبل از نسخه ۵)  وجود داشت ، عدم پشتیبانی محتوا خارج از مفهوم سند (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  استفاده می شود. بیشترین استفاده این المان هنگامی است که نوشته شما دارای یک عنوان (heading) و زیرعنوان (sub heading) است. در نسخه های پیشین HTML تنها راه گروه بندی عناوین ، استفاده از راه های جایگزینی مانند بهره گیری از المان div بود که راه ایده آلی برای وب معنایی (Semantic Web) نبود.