معرفی المان‌های ساختاری در html5

[masoume 5751]

قسمت اول :

 

با اطمینان کامل می‌توان گفت که هر سایتی که تاکنون ایجاد شده است از المان‌های ساختاری و محتوایی برخوردار بوده و به نحوی از آنها استفاده کرده است. از برچسب های پاراگراف (

) گرفته تا برچسب های تقسیم کننده (

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

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

 

 

یاد اوری:

یک المان

در HTML شامل

(۱)

Tag باز شونده ،

(۲)

محتوای مابین Tag باز شونده و بسته شونده و

(۳)

نهایتاً Tag بسته شونده است.

عنوان مثال

Blog

یک المان گوییم .

 

 

 

ساختار در

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) نبود.

[masoume 5751]

قسمت دوم:

 

المان Footer

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

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

المان Nav

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

المان Article

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

المان Aside

آخرین المان ساختاری که قصد بررسی آن را در این مقاله داریم، المان aside است. هدف این برچسب دربرگرفتن محتوایی است که نزدیک به محتوای فعلی است.