نگاهی به برخی تگهای اصلی HTML5
پیشرفت و توسعه html5 متوقف نشده و همچنان ادامه دارد. اما امروزه بخشهای جدید محدودی در html5 قابل استفاده است. بخشهایی مانند <header>, <nav> & <footer> که توسط مرورگرهای جدید و قدیمی پشتیبانی میشوند. در این مقاله با نگاهی به برخی از تگهای اصلی html5، ویژگیها و کاربرد آنها را به نحوی ساده و گویا معرفی میکنیم.
تگ Header
امروزه با دید منطقیتری به عناصر html5 نگاه میشود. یکی از اولین تگهای اصلی html5 تگ Header است. آنچه امروز از عنوان header استنباط میشود این است که این قسمت از html5 تنها به بخش header در صفحات وبسایت اشاره نمیکند بلکه میتواند بخشی را شامل شود که که بعد از آن به توضیح موضوعی میپردازد.
برای مثال میتوانید با استفاده از کد زیر header را در بالای پست خود قرار دهید و در جایگاه عنوان از آن استفاده کنید.
<header> <h1>This is the Title of the Content</h1> <div> <p>By Author</a> <span>Filed in Web 2.0</span></p> </div> </header> <article> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id felis et augue sagittis euismod quis at sem. Nunc sit amet magna ac velit congue ultricies. Sed eros justo, lacinia in fringilla sollicitudin, congue id massa. Nunc dignissim bibendum nibh, sed dictum massa pharetra sit amet.</p> </article>
از آن جایی که در این مثال “عنوان” نقش مقدمه برای محتوای پست را ایفا میکند، میتوانیم آن را جز اجزای header به حساب آوریم.
تگ nav
این کلمه مخفف navigation میباشد و بیانگر بخشی از صفحه وبسایت است که صفحات و یا قسمتهای متفاوت یک صفحه را به یکدیگر پیوند میدهد. در واقع نوعی منوی ناوبری و هدایت محسوب میشود.
اگرچه این بخش بیشتر برای بیان navigation استفاده میشود، ولی تنها navigation ابتدایی را که در بالای صفحه قرار دارد را شامل نمیشود بلکه با توجه به تعریف فوق، به این نتیجه میرسیم که بخش nav میتواند در هر قسمتی از صفحه وبسایت که نقش navigator را ایفا کند، مورد استفاده قرار بگیرد. به مثال زیر توجه کنید:
<h4>Table of Content</h4> <nav> <ul> <li><a href=”#overview”>Overview</a></li> <li><a href=”#history”>History</a></li> <li><a href=”#development”>Development</a></li> <ul> </nav>
در مثال بالا از بخش nav برای دربرگیری “فهرست مطالب” استفاده شده است.
تگ Footer
بخش دیگری از html5 که امروزه در کدنویسیها فراگیر شده است بخش Footer است. عموما از footer به عنوان بخش انتهایی در صفحات وب نام برده میشود. اما طبق تعریف کنونی، footer به بخشی اطلاق میشود که در آن اطلاعاتی در رابطه با متن و محتوای موجود در صفحه وبسایت بیان میکند. این اطلاعات میتواند شامل اطلاعاتی در رابطه با نویسنده مطلب، لینکهای مرتبط با مطلب انتشار یافته در وبسایت، اطلاعات کپی رایت و سایر موارد مشابه باشد. شاید این تعریف مقداری گیج کننده باشد پس در اینجا تعریف آسانتری را بیان میکنیم.
Footer همچنان بخشی را در بر میگیرد که در پایین صفحه وبسایت قرار دارد. اما چون در تعریف فوق جایگاه مشخصی ارائه نشده، میتوانیم به این نتیجه برسیم که footer میتواند در انتهای یک بخش قرار بگیرد. به مثال زیر توجه کنید:
<div> <header> <h1>This is the Title of the Content</h1> <div> <p>By Author</a> <span>Filed in Web 2.0</span></p> </div> </header> <article> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id felis et augue sagittis euismod quis at sem. Nunc sit amet magna ac velit congue ultricies. Sed eros justo, lacinia in fringilla sollicitudin, congue id massa. Nunc dignissim bibendum nibh, sed dictum massa pharetra sit amet.</p> </article>
<footer> <div> <span>Tags:</span> <a href=”#” rel=”tag”>Command Prompt</a>, <a href=”#” rel=”tag”>Compass</a>, <a href=”#” rel=”tag”>CSS</a>, <a href=”#” rel=”tag”>Sass</a>, <a href=”#” rel=”tag”>Terminal</a> </div> <div> <div>10 likes</div> <!– let’s pretend it to be the facebook like –> </div> </footer>
</div>
در این مثال footer در پایین پست قرار گرفته و شاما پست تگ و بخش like می باشد.
تگ article <article>
یکی دیگر از تگهای اصلی html5، تگ article یا تگ مقالات میباشد که نسبت به دیگر تگ ها جدیدتر است، بهتر است بدانید این تگ در اینترنت اکسپلورر 8 و تمامی نسخه های پیش از آن، پشتیبانی نمیشود. با استفاده از این تگ میتوانید یک محتوای مستقل را تعیین کند. به عنوان مثال مطالب وبلاگ، نظرات و کامنت های کاربران، محتوای خبری و مطالب وب سایت توسط تگ article ایجاد می شوند. مستقل بودن تگ article به این معنی است که باید مفهومی جدای از سایر اجزاء سایت داشته باشد، معنای خود را حفظ کند تا بتوان آن را در هر نقطه ای از سایت به کار برد.
برخی از تگ ها مانند section، h1-h6 و img درون تگ article قرار میگیرند.
درون تگ <article> برای ایجاد footerهر پست و مطلب باید از پابرگ آن استفاده کنید. <footer>
برای ایجاد تگ های هدینگ درون یک تگ <article> بایستی از تگ های هدینگ h1-h6 استفاده کنید.
تگ <article> دو تگ باز و بسته Closing Tag و Opening Tag را دارا است.
در این نوع تگ، هیچ گونه محدودیتی برای صفحه از نظر تعداد مقاله وجود ندارد و تعداد مقالات بیشتر باعث بهبود سئو وب سایت نیز هست.
حتما بخوانید: مزایای HTML5 چیست؟
تگ time
از این تگ، برای نشان دادن تاریخ و زمان استفاده میشود. برای این کار میتوانید یک زمان از میان 24 ساعت شبانه روز یا یک تاریخ در میان تاریخ های تقویم را مشخص کنید. تگ تایم را باید به صورت باز و بسته بنویسید. تگ time در مرورگرهایی همچون Edge، firefox، cherom و safari پشتیبانی میشود.
نحوه نوشتن تگ تایم به این شکل است:
تگ dialog
این تگ قادر است یک باکس یا کادر برای گفت و گو باز کند و همچون تگ های قبلی که معرفی کردیم، باید تگ باز و تگ بسته برای آن ایجاد کنید. باز شدن یکی از ویژگی ها و شاخصه های معمولی این تگ است. اصولا تگ دیالوگ به این شکل نوشته میشود.
تگ figure
از دیگر تگ های اصلی html5، تگ figure است. این تگ در نسخه 5 HTML به وجود آمده، در نسخه های قبل تر وجود نداشته و یک تگ مستقل است. تگ figure شامل محتواهایی مانند تصاویر، جداول، لیست ها و نمودارها میشود که به این شکل نوشته میشود:
توجه کنید که استفاده از این تگ برای تمام تصاویر سایت، امری اشتباه است. در مواقعی که تصویر بخشی از محتوای صفحه باشد و بتوان آن را در هر نقطه ای از سایت استفاده کرد، بدون آنکه معنای آن تغییر کند؛ این تگ را میتوانید ایجاد کنید. تصاویری مانند لوگوی سایت و یا تصاویری که آموزش خاصی را ارائه میکنند نباید با استفاده از تگ figure نوشته و ایجاد شوند.
کلام آخر
در این مقاله نگاهی به برخی تگهای اصلی html5 و نحوه ایجاد آنها داشتیم و تگهای کاربردی همچون تگ article یا تگ مقالات، تگ دیالوگ dialog، تگ time یا تاریخ و در نهایت تگ figure که برای محتواهایی همچون عکس ها و نمودار استفاده میشود را، به طور کامل توضیح دادیم. همچنین <header>, <nav> & <footer> مانند تگهای دیگر html5 خصیصههای متنوعی ندارند اما به گونهای طراحی شدهاند که ساختار وبسایت را هم برای مرورگرها و هم برای کاربران مفهومیتر کنند.
