تگ های مفهومی در HTML

تگ های معنایی ساختار پیشنهادی صفحات وب را درست می کنند.

این تگ ها را در لیست زیر مشاهده می کنید :

• header
• nav
• section
• article
• aside
• footer

در عکس زیر مشاهده می کنید که هر تگ کدام بخش سایت را تشکیل می دهد :

این ساختار پیشنهادی هست و شما می توانید از برخی تگ های معنایی استفاده نکنید.

تگ های معنایی فقط این تگ ها نیستند بلکه تگ های دیگری وجود دارد که برای کارهای دیگری از آنها استفاده می شود.

در ادامه مطالب کاربرد هر یک از این تگ ها را مشاهده می کنید.

تگ header یک بخش در قسمت بالایی سایت ایجاد می کند.

اغلب اطلاعاتی که در header قرار می گیرد دارای چند عنوان , لوگو , اطلاعات نویسنده و .... می باشد.

شما می توانید چند تگ header را در یک صفحه نمایش دهید.

نکته: شما نمی توانید تگ header را داخل تگ های footer و address استفاده کنید.

مثالی از تگ header :

<header>
   <h1>heading is here</h1>
   <p>Posted by ehsan eslami</p>
   <p>information and description is here</p>
</header>

برای ایجاد چند پیوند ناوبری باید از تگ nav استفاده کنید.

نکته: تمام پیوند های یک سند نباید داخل تگ nav باشند.

در بخش زیر مثالی از تگ nav را مشاهده می کنید :

<nav>
   <a href="/html/">HTML</a> |
   <a href="/css/">CSS</a> |
   <a href="/js/">js</a> |
   <a href="/python/">php</a>
</nav>

عنصر section یک بخش را در سند HTML تعریف می کند.

اغلب این بخش شامل اطلاعات تماس , معرفی , اخبار و ... می باشد.

مثالی از تگ section :

<section>
   <h3>Lorem ipsum dolor sit amet</h3>
   <p>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
   ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</section>

تگ article یک بخش را در صفحات وب تعریف می کند که اغلب شامل موارد زیر است :

1. پست های وبلاگ و انجمن

2. نظرات کاربران

3. مقالات و روزنامه ها

مثالی از تگ article :

<article>
   <h2>reference/html/html-by-alphabet</h2>
   <p>The HTML page has placed all the relevant tags along with explanations and examples for you, based on the alphabet.</p>
</article>

عنصر aside یک بخش را تعریف می کند که مانند یک نوار کناری می باشد.

مثالی از تگ aside :

<aside>
   <h4>the Maldives</h4>
   <p>The Maldives are known as “the tropical paradise” for reasons such as its beauty. Each island has pure white sandy beaches.</p>
</aside>

عنصر footer یک بخش در پایین سایت درست می کند که اغلب شامل موارد زیر است :

اطلاعات نویسنده

شماره تماس

نقشه سایت

لینک ها

شما می توانید چندین عنصر footer را در یک سند داشته باشید.

البته باید عنصر footer با دیگر عنصرها ارتباط غیر مستقیم داشته باشد.

مثالی از تگ footer :

<footer>
   <p>
       Designer and developer:Ehsan Eslami<br>
       <a href="info@pnldev.com">info@pnldev.com</a>
   </p>
</footer>