تگ های مفهومی در 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>