عناصر متنی خطی و معنابخش

5.1 عناصر پایهٔ درون‌خطی متن: ساختارهای بنیادی

5.1.1 <span>: عنصر غیرمعنایی برای گروه‌بندی متن

• این عنصر بدون معنا (non-semantic) است و فقط برای گروه‌بندی متن درون خطی (inline) یا استایل‌دهی** /**JavaScript استفاده می‌شود.
• اگر یک عنصر قابل توصیف با <strong> - <em> - <mark> - <abbr> است نباید از <span> استفاده شود زیرا باعث کاهش ساختار معنایی می‌شود.

<p>در این متن، <span class="highlight">کلمه کلیدی</span> به صورت خاص برجسته شده است.</p>

5.1.2 <br>: شکست خط (Line Break)

• این عنصر به صورت خودکار یک خط جدید را ایجاد می‌کند.
• استفاده از <br> برای فاصله‌گذاری بین پاراگراف یا بخش‌ها خودداری کنید این کار باعث می‌شود ساختار محتوا به هم بخورد.
• فقط در مواردی که شکست خط ضروری است مانند آدرس‌ها، شعر، فرمول‌های ریاضی یا متون تلفظی.

<p>آدرس:</p>
<address>
خیابان شهید دستگردی<br>
کوچه نوبخت، پلاک ۱۵<br>
تهران، ایران
</address>

5.2 تأکید معنایی و جلوهٔ بصری متن: تمایز بین معنا و ظاهر

5.2.1 عناصر معنایی: تأکید معنایی (Semantic Emphasis)

<p>در این متن، <strong>اهمیت ساختار معنایی</strong> به طور واضح برجسته شده است.</p>
<p>این <em>جمله</em> به صورت لحنی برجسته شده است.</p>
<p>کلمه <mark>HTML5</mark> در این متن توسط موتور جستجو پیدا شده است.</p>

5.2.2 عناصر نمایشی: تأکید بصری (Presentational Elements)

<p>نام کتاب: <i>Web Accessibility in Action</i></p>
<p>نام فرد: <b>سارا محمدی</b></p>
<p>متن <u>این کلمه</u> به صورت بصری برجسته شده است.</p>
<p><small>تمام حقوق محفوظ است © ۱۴۰۴</small></p>
    
<p>قیمت قبلی: <del>۲۰۰,۰۰۰ تومان</del></p>
<p>قیمت فعلی: <ins>۱۵۰,۰۰۰ تومان</ins></p>

<del datetime="2023-04-01" title="حذف شده در ۱ آوریل 1402">
 نسخه قدیمی
</del>
<ins datetime="2023-04-05" title="افزوده شده در ۵ آوریل 1402">
 نسخه جدید
</ins>

5.3 ارجاع‌دهی، اختصارات، تاریخ و داده: ارتباط با منابع و زمان

5.3.1 <a>: لینک (Hyperlink)

• پایه‌ای برای انتقال بین صفحات بخش‌ها یا منابع خارجی.
• ویژگی href تعیین مسیر هدف را مشخص می‌کند.
• ویژگی rel (مثلاً noopener, noreferrer) برای امنیت اضافی ضروری است.
• ویژگی target="_blank" باید همراه با rel="noopener" استفاده شود.

<a href="https://example.com" rel="noopener noreferrer" target="_blank">
 مراجعه به سایت مرجع
</a>

5.3.2 <cite>: ارجاع به منبع (Citation)

• برای نمایش عنوان محتوا، کتاب، مقاله، فیلم یا منبع ادبی استفاده می‌شود.
• معمولاً با فونت ایتالیک نمایش داده می‌شود.
• این عنصر نه برای نقل‌قول بلکه برای نمایش منبع ارجاع است.

<p>در مقاله‌ای از <cite>محمود رضایی</cite> آمده است...</p>

5.3.3 <abbr>: اختصار (Abbreviation)

• برای نمایش کلمات اختصاری (مثلاً HTML، CSS، CPU).
• ویژگی title باید شامل شرح کامل اختصار باشد.

<p>ما از <abbr title="HyperText Markup Language">HTML</abbr> استفاده می‌کنیم.</p>

5.3.4 <data>: داده تحت‌ساختار (Machine-readable Data)

• برای ارائه داده‌های ماشین‌خوان (مثلاً عدد، تاریخ، مقدار) به همراه نمایش بصری.
• ویژگی value مقدار ماشینی را مشخص می‌کند.

<p>قیمت محصول: <data value="150000">۱۵۰,۰۰۰ تومان</data></p>
<p>تاریخ انتشار: <data value="2025-04-05">۵ آوریل ۱۴۰۴</data></p>

5.3.5 <time>: تاریخ و زمان (Time)

• برای نمایش تاریخ و زمان به صورت ماشین‌خوان.
• ویژگی datetime مقدار ISO 8601 را مشخص می‌کند.
• می‌تواند در قالب YYYY-MM-DD, YYYY-MM-DDTHH:MM, HH:MM و غیره باشد.

<time datetime="2025-04-05T14:30:00+03:30">
 ۱۴:۳۰، ۵ آوریل ۱۴۰۴
</time>

5.4 نمایش متون چندزبانه و تغییر جهت نوشتار: سازگاری با جهانی‌سازی

5.4.1 <bdi>: متن مستقل از جهت (Bi-directional Isolation)

• این عنصر برای نمایش متن‌های چندزبانه یا اعداد داخل متن‌های فارسی / عربی استفاده می‌شود.
• از تداخل جهت نوشتار RTL و LTR جلوگیری می‌کند.

<p>نام کاربر: <bdi>user_123</bdi></p>
<p>امتیاز: <bdi>95</bdi></p>

5.4.2 <bdo dir="...">: تغییر جهت نوشتار (Bidirectional Override)

• این عنصر برای تغییر جهت نوشتار به‌صورت دستی و مستقل از متن والد استفاده می‌شود.
• ویژگی dir می‌تواند ltr (چپ به راست) یا rtl (راست به چپ) باشد.

<p>نام فرد: <bdo dir="rtl">John Doe</bdo></p>

بعدی

قبلی