HTML Semantic Elements
عناصر معنایی HTML چیستند؟
عناصر معنایی، عناصری هستند که معنی و مفهوم محتوای داخل‌شان را به صورت واضح و قابل فهم برای انسان و ماشین (مثل مرورگرها و دستگاه‌های کمکی) مشخص می‌کنند. این عناصر به ساختاردهی بهتر صفحه وب کمک می‌کنند و باعث می‌شوند مرورگرها، موتورهای جستجو و فناوری‌های دسترسی‌پذیری مثل صفحه‌خوان‌ها راحت‌تر محتوا را درک کنند.
عناصر معنایی رایج در HTML5
| عنصر | توضیح | کاربرد مثال |
|---|---|---|
<header> |
تعریف بخش سربرگ صفحه یا بخش | لوگو سایت، نوار ناوبری، متن معرفی |
<nav> |
تعریف لینک‌های ناوبری | منوی اصلی یا فهرست مطالب |
<main> |
بخش اصلی محتوای صفحه | محتوای مرکزی و منحصر به فرد صفحه |
<article> |
بخش مستقل و خودکفا از محتوا | پست وبلاگ، مقاله خبری، پست انجمن |
<section> |
گروه‌بندی موضوعی محتوا | فصل‌ها، تب‌ها یا بخش‌های مختلف صفحه |
<aside> |
محتوایی مرتبط اما جانبی با محتوای اصلی | سایدبار، نقل قول، تبلیغات |
<footer> |
بخش پایانی صفحه یا بخش | اطلاعات کپی‌رایت، لینک‌های تماس |
<figure> |
محتوای مستقل مانند تصویر یا نمودار | تصاویر همراه با توضیح |
<figcaption> |
توضیح یا کپشن برای <figure> |
متن کپشن |
<mark> |
متن برجسته شده | برجسته کردن کلمات جستجو شده |
<time> |
نمایش تاریخ یا زمان | تاریخ انتشار، زمان رویداد |
چرا باید از عناصر معنایی استفاده کنیم؟
-
دسترس‌پذیری: صفحه‌خوان‌ها و ابزارهای کمکی بهتر محتوا را می‌فهمند.
-
سئو: موتورهای جستجو ساختار صفحه را بهتر درک کرده و بهتر ایندکس می‌کنند.
-
نگهداری آسان: کد خواناتر و قابل فهم‌تر است.
-
استاندارد بودن: ساختار محتوا طبق استانداردهای وب تعریف می‌شود.
نمونه ساختار صفحه با عناصر معنایی:
<!DOCTYPE html>
<html lang=“fa”>
<head>
<meta charset=“UTF-8” />
<title>مثال HTML معنایی</title>
</head>
<body>
<header>
<h1>وب‌سایت من</h1>
<nav>
<ul>
<li><a href=“#home”>خانه</a></li>
<li><a href=“#blog”>وبلاگ</a></li>
<li><a href=“#about”>درباره ما</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>عنوان پست وبلاگ</h2>
<p>محتوای جالب و خواندنی…</p>
</article>
<aside>
<h3>مطالب مرتبط</h3>
<p>لینک‌ها یا تبلیغات مرتبط با مقاله.</p>
</aside>
</main>
<footer>
<p>© ۲۰۲۵ وب‌سایت من</p>
</footer>
</body>
</html>
دیدگاهتان را بنویسید