این متن هنوز کامل نیست و در حال بروزرسانی است. نسخه‌ی نهایی پس از تکمیل در دسترس قرار خواهد گرفت.

ساختار معنایی سند HTML

در توسعه وب مدرن، ساختار معنایی (Semantic Structure) به عنوان یکی از اصلی‌ترین عناصر معماری صفحه وب نقش محوری در تعیین کیفیت محتوا، دسترسی‌پذیری (Accessibility)، بهینه‌سازی موتورهای جستجو (SEO) و عملکرد مرورگرها ایفا می‌کند. این فصل به بررسی جامع و تخصصی مجموعه‌ای از عناصر معنایی HTML5 می‌پردازد که به طور خاص برای سازمان‌دهی محتوا، ناوبری داخلی و ایجاد سلسله‌مراتب منطقی طراحی شده‌اند.

3.1 چارچوب اصلی صفحه وب: ساختار هرمی معنایی

عناصر <header> - <nav> - <main> - <footer> - <address> به عنوان استخوان‌های اصلی یک صفحه وب چارچوب معنایی را ایجاد می‌کنند که به مرورگرها، موتورهای جستجو و ابزارهای دسترسی (مانند Screen Readers) کمک می‌نماید تا ساختار صفحه را به درستی تفسیر کنند.

3.1.1 <header>: سربرگ صفحه

این عنصر شامل محتوای مربوط به بخش بالایی صفحه است، معمولاً شامل:

لوگو
عنوان سایت
منوی اصلی (در صورت وجود)
اطلاعات تماس
ورود / ثبت نام

نکته مهم یک صفحه می‌تواند چند <header> داشته باشد (مثلاً یکی در <article> و دیگری در <section>).
از استفاده از <header> در قسمت‌های غیربالایی (مثل داخل <main>) خودداری کنید مگر اینکه محتوای مرتبط با عنوان بخش باشد.

<header>
<h1>وبسایت آموزشی</h1>
 <nav>
  <a href="/">صفحه اصلی</a>
  <a href="/courses">دوره‌ها</a>
 </nav>
</header>

3.1.2 <nav>: ناویگیشن اصلی

این عنصر فقط برای منوهای ناوبری (Link های اصلی) استفاده می‌شود.
بهتر است از role="navigation" یا aria-label برای توصیف هدف منو استفاده شود.
منوهای داخلی (مثل منوی جستجو یا لیست پیوندهای مرتبط) ممکن است غیر از <nav> باشند اما اگر منوی اصلی باشد باید در <nav> قرار گیرد.

<nav aria-label="منوی اصلی">
 <ul>
  <li><a href="/about">درباره ما</a></li>
  <li><a href="/contact">تماس با ما</a></li>
 </ul>
</nav>

استفاده از aria-label یا title در <nav> به ابزارهای دسترسی کمک می‌کند تا کاربران نابینا بتوانند به راحتی منو را تشخیص دهند.

3.1.3 <main>: محتوای اصلی صفحه

این عنصر تنها یک بار در هر صفحه باید وجود داشته باشد.
تمام محتوای منحصر به فرد صفحه (مثلاً مقاله، پروژه، محصول) در این بخش قرار می‌گیرد.
استفاده از <main> در بخش‌هایی مانند نوار کناری یا پاورقی خودداری کنید.
موتورهای جستجو به <main> به عنوان نقطه تمرکز محتوای اصلی نگاه می‌کنند.

<main>
 <article>
  <h1>آموزش React برای مبتدیان</h1>
  <p>در این مقاله، مفاهیم اولیه React را معرفی می‌کنیم...</p>
 </article>
</main>

3.1.4 <footer>: پاورقی صفحه

این عنصر شامل اطلاعات جانبی است، مانند

حق نشر
اطلاعات تماس
لینک های مرتبط
مخفی کردن اطلاعات

یک صفحه می‌تواند چند <footer> داشته باشد (مثلاً یکی برای <article> و دیگری برای <main>). از استفاده از role="contentinfo" برای <footer> استفاده کنید تا به Screen Readers کمک شود.

3.1.5 <address>: اطلاعات تماس

این عنصر فقط برای اطلاعات تماس و اطلاعات شخصی / سازمانی استفاده می‌شود.
این عنصر نه تنها برای ایمیل یا آدرس فیزیکی بلکه برای اطلاعات مرتبط با نویسنده محتوا (مثلاً در مقالات) نیز کاربرد دارد.
محتوای داخل <address> می‌تواند شامل <a> - <p> - <time> و غیره باشد.

<address>
 <p>نویسنده: محمد احمدی</p>
 <p><a href="mailto:mohammad@example.com">mohammad@example.com</a></p>
 <time datetime="2023-04-05">۵ اردیبهشت ۱۴۰۲</time>
</address>

3.2 بخش‌بندی محتوای داخلی: سازمان‌دهی محتوا با انتخاب صحیح عنصر

در بخش‌های داخلی <main> انتخاب صحیح بین <section> - <article> - <aside> - <div> به ساختار معنایی و دسترسی‌پذیری کمک می‌کند.

3.2.1 <section>: بخش معنایی از محتوا

برای تقسیم محتوای صفحه به بخش‌های منطقی استفاده می‌شود.
هر <section> باید دارای عنوان (h1-h6) باشد.
بخش "مقدمه" - "روش‌های آموزشی" - "نتایج" در یک مقاله.

<section>
 <h2>روش‌های آموزشی</h2>
 <p>در این بخش به روش‌های تدریس مدرن پرداخته می‌شود.</p>
</section>

استفاده از <section> بدون عنوان، نقض استاندارد معنایی است و می‌تواند منجر به مشکلات دسترسی شود.

3.2.2 <article>: محتوای مستقل و قابل انتشار

برای مطالبی که مستقل از سایر محتوا هستند استفاده می‌شود.
مثال: مقاله، پست وبلاگ، خبر، نظر کاربر، گزارش.
این عنصر می‌تواند خودش دارای <section> - <aside> - <header> باشد.

<article>
 <header>
  <h1>چرا React را انتخاب کنیم؟</h1>
  <p>نویسنده: سارا محمدی | ۲۰ فروردین ۱۴۰۴</p>
 </header>
 <section>
  <p>React به دلیل معماری مولفه‌ای و عملکرد بالا، یکی از محبوب‌ترین فریم‌ورک‌ها است...</p>
 </section>
</article>

تگ <article> برخلاف <section> برای محتوایی به‌کار می‌رود که بتواند به‌صورت مستقل منتشر شود (مثلاً در RSS)، در حالی که <section> صرفاً بخشی از یک محتوای بزرگ‌تر است.

3.2.3 <aside>: محتوای جانبی یا مکمل

برای محتوای مکمل یا جانبی استفاده می‌شود که به صورت مستقل نیست.
مثال: جعبه معرفی، لیست پیوندهای مرتبط، توضیحات اضافی، تبلیغات.
استفاده از <aside> برای محتوای مرتبط با محتوای اصلی (مثلاً یک تعریف در یک مقاله) مناسب است اما نباید به جای <section> یا <article> استفاده شود.

<aside>
 <h3>نکات کلیدی</h3>
 <ul>
  <li>React مبتنی بر مولفه‌های قابل بازاستفاده است.</li>
  <li>استفاده از JSX امکان نوشتن HTML در JS را فراهم می‌کند.</li>
 </ul>
</aside>

3.2.4 <div>: عنصر بدون معنا - استفاده فقط وقتی ضروری است

تگ <div> عنصری بدون معنا است و فقط برای ساختار ساختاری یا استایل‌دهی استفاده می‌شود.
اگر یک عنصر قابل توصیف با <section> - <article> - <aside> - <nav> است نباید از <div> استفاده شود.
زمانی که نیاز به گروه‌بندی عناصر بدون معنا (مثلاً برای استایل‌دهی یا JavaScript) وجود دارد.

<div class="card">
 <h3>عنوان کارت</h3>
 <p>محتوای کارت</p>
</div>

استفاده بی‌رویه از <div> به عنوان جایگزین عناصر معنایی به «ساختار غیرمعنایی» Non-Semantic Markup منجر می‌شود و می‌تواند باعث کاهش دسترسی‌پذیری و سئو شود.

3.3 ساختاردهی تیترها و سرفصل‌ها: سلسله‌مراتب معنایی

استفاده از تیترهای <h1> تا <h6> به صورت منطقی، نه تنها به ساختار محتوا کمک می‌کند بلکه تأثیر عمیقی بر دسترسی‌پذیری، سئو و خوانایی محتوا دارد.

3.3.1 سلسله‌مراتب تیترها: اصول طرح معنایی

<h1> فقط یک بار در صفحه استفاده می‌شود و عنوان اصلی صفحه را نشان می‌دهد.
<h2> برای بخش‌های اصلی محتوا (مثلاً "معرفی فریم‌ورک" - "مزایای استفاده") استفاده می‌شود.
<h3> برای زیربخش‌های <h2> - <h4> برای زیرزیربخش‌ها و غیره.
عدم پرش سلسله‌مراتب (مثلاً از <h1> به <h3>) مجاز نیست، زیرا باعث می‌شود ساختار معنایی از بین برود.

<h1>آموزش فریم‌ورک React</h1>

<h2>مقدمه</h2>
<p>در این مقاله...</p>
    
<h2>مزایای استفاده از React</h2>
<h3>موثریت در عملکرد</h3>
<h3>قابلیت بازاستفاده</h3>
    
<h2>مراحل آموزش</h2>
<h3>نصب و راه‌اندازی</h3>
<h3>ساخت مولفه‌های اولیه</h3>

موتورهای جستجو از سلسله‌مراتب تیترها برای درک ساختار محتوا و تعیین اولویت موضوعات استفاده می‌کنند. پرش سلسله‌مراتب می‌تواند باعث سوءفهم شود.

3.3.2 تأثیر بر دسترسی‌پذیری

Screen Readers به ترتیب تیترها حرکت می‌کنند.
اگر سلسله‌مراتب نادرست باشد، کاربران نابینا قادر به درک محتوا نخواهند بود.
استفاده از aria-level برای تنظیم سطح تیتر (در موارد خاص) می‌تواند کمک کند، اما بهتر است از سلسله‌مراتب طبیعی استفاده شود.

3.4 ناوبری درون‌صفحه‌ای با شناسه‌ها: مدیریت مسیرهای داخلی

یکی از قوی‌ترین امکانات HTML برای ناوبری داخلی، استفاده از شناسه‌ها (IDs) و لینک‌های محلی href="#id" است.

3.4.1 مکانیزم کار: href="#id" و id

برای ایجاد لینک‌های داخلی به بخش‌های مختلف صفحه، از id در عنصر هدف و href="#id" در لینک استفاده می‌شود.
شناسه‌ها باید منحصر به فرد (unique) باشند و از کاراکترهای خاص (مانند فاصله یا نقطه) خودداری شود.

<!-- لینک به بخش "مزایا" -->
<nav>
 <ul>
  <li><a href="#advantages">مزایا</a></li>
  <li><a href="#disadvantages">معایب</a></li>
 </ul>
</nav>
    
<!-- بخش هدف -->
<section id="advantages">
 <h2>مزایای استفاده از React</h2>
 <p>React به دلیل...</p>
</section>

استفاده از id به صورت مکانیکی (بدون جستجوی DOM) موجب می‌شود که مرورگر به سرعت به موقعیت مورد نظر برسد.

3.4.2 بهبود دسترسی‌پذیری و تجربه کاربری

از aria-current="page" برای نشان دادن بخش فعال استفاده کنید:
```
<li><a href="#advantages" aria-current="page">مزایا</a></li>
```
استفاده از focus() در JavaScript برای جلوه‌ای بهتر بعد از اسکرول (مثلاً با scrollIntoView()):
```
document.getElementById('advantages').scrollIntoView({ behavior: 'smooth' });
```

یک صفحه وب موفق تنها با زیبایی ظاهری نیست؛ بلکه با ساختار معنایی منطقی، سلسله‌مراتب واضح و مدیریت هوشمندانه محتوا ساخته می‌شود. این فصل پایه‌ای برای ساخت صفحات وب دسترسی‌پذیر، سئو-دوست و متناسب با استانداردهای جهانی است.

بعدی قبلی