عناصر معنایی (Semantic Elements)
عناصر معنایی یا Semantic Elements در HTML به عناصری گفته می شود که معنا و نقش مشخصی در صفحه دارند. این عناصر به مرورگر و توسعه دهنده کمک می کنند تا ساختار صفحه را بهتر درک کنند.
عناصر معنایی در HTML
به جای استفاده از <div> و <span> برای همه بخش ها، عناصر معنایی مانند <article>، <header> و <footer> معنا را شفاف تر منتقل می کنند.
- <article>
- <section>
- <aside>
- <header>
- <footer>
- <nav>
- <figure> و <figcaption>
- <main>
مثال عنصر <section>
عنصر <section> یک بخش موضوعی از محتوا را مشخص می کند.
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization.</p>
</section>مثال عنصر <article>
عنصر <article> برای محتوای مستقل و قابل انتشار به کار می رود.
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a browser released in 2008.</p>
</article>مثال عنصر <header>
عنصر <header> برای معرفی محتوا یا قرار دادن لینک های ناوبری استفاده می شود.
<header>
<h1>Site Title</h1>
<nav>
<a href="#">Home</a> |
<a href="#">About</a>
</nav>
</header>مثال عنصر <footer>
عنصر <footer> معمولاً شامل اطلاعات نویسنده، کپی رایت یا لینک های مرتبط است.
<footer>
<p>Author: John Doe</p>
<p><a href="mailto:john@example.com">john@example.com</a></p>
</footer>مزایای استفاده از عناصر معنایی
استفاده از عناصر معنایی خوانایی کد را بالا می برد، به SEO کمک می کند و برای ابزارهای دسترس پذیری مثل صفحه خوان ها اهمیت دارد.
برای ادامه یادگیری می توانید به بخش عناصر کد کامپیوتر و سینتکس HTML5 مراجعه کنید.