طراحی قالب وردپرس

نگاهی به برخی تگهای اصلی HTML5

Header ، Footer ، Nav

پیشرفت و توسعه html5  متوقف نشده و همچنان ادامه دارد. اما امروزه بخشهای جدید محدودی در html5 قابل استفاده است، بخشهایی مانند <header>, <nav> & <footer>  که توسط مرورگرهای جدید و قدیمی پشتیبانی می شوند. در این مقاله به بررسی و موارد استفاده این بخشها در html5 می پردازیم.

کدنویسی HTML5

تگ  Header

امروزه با دید منطقی تری به عناصر html5 نگاه می شود. آنچه امروز از عنوان 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 می باشد.

نتیجه گیری:
<header>, <nav> & <footer> مانند عناصر دیگر html5 خصیصه های متنوعی ندارند اما به گونه ای طراحی شده اند که ساختار وبسایت را هم برای مرورگر ها و هم برای کاربران مفهومی تر کنند.

خواندن مطالب زیر را نیز به شما پیشنهاد میکنیم:

دیدگاهها و نظرات کاربران عزیز

سوال یا نظری دارید؟ بنویسید و ارسال کنید.