جلسه نوزدهم: تگ bdo در HTML | آموزش کامل و کاربردها
به دوره حرفه‌ای آموزش HTML در آوای وب خوش اومدی! تو این مقاله قراره یکی از خاص‌ترین و کمتر شناخته‌شده‌ترین تگ‌های HTML یعنی تگ <bdo> رو از پایه تا حرفه‌ای یاد بگیری. تگی که ممکنه خیلی‌ها بشناسنش ولی کمتر کسی بلده ازش درست استفاده کنه! اگه توی طراحی سایتت با زبان‌های مختلف مثل فارسی، عربی یا انگلیسی سروکار داری، این تگ می‌تونه بهت کمک کنه. از مثال‌های واقعی تا نکات سئو، همه‌چیز رو اینجا پوشش می‌دیم، آماده‌ای!
آنچه در این مقاله می‌خوانید :
🏷️ تگ bdo چیه و به چه درد می‌خوره؟
تگ <bdo> که مخفف Bi-Directional Override هست، برای تغییر جهت نوشتار متن در HTML استفاده می‌شه. دو نوع جهت نوشتار داریم:
- LTR (Left To Right) → چپ به راست (مثل انگلیسی)
- RTL (Right To Left) → راست به چپ (مثل فارسی و عربی)
حالا وقتی بخوای مثلاً یه عبارت انگلیسی رو توی متن فارسی بیاری یا برعکس، ممکنه مرورگر به‌درستی جهتشو تشخیص نده و چینش متن به هم بریزه. اینجاست که تگ <bdo> وارد می‌شه و بهت اجازه می‌ده به‌زور (!) جهت متن رو عوض کنی!
🧱 ساختار تگ bdo
ساختار ساده‌ای داره:
<bdo dir="rtl">متن مورد نظر</bdo>
💡 توضیح:
dir: این ویژگی تعیین‌کننده‌ی جهته. دو مقدار می‌گیره:rtl: برای نمایش متن به صورت راست‌به‌چپltr: برای نمایش متن به صورت چپ‌به‌راست
✏️ مثال‌های واقعی و کاربردی از تگ bdo
✅ مثال ۱: متن انگلیسی در متن فارسی
<p>سایت ما از تکنولوژی <bdo dir="ltr">CSS Grid</bdo> استفاده می‌کنه.</p>
✅ در این حالت، عبارت انگلیسی به‌درستی از چپ به راست نمایش داده می‌شه.
✅ مثال ۲: متن فارسی در متن انگلیسی
<p>This website supports <bdo dir="rtl">زبان فارسی</bdo> as well.</p>
👀 مرورگر بدون کمک <bdo> ممکنه متن فارسی رو بهم‌ریخته نشون بده، ولی با این تگ، همه‌چی مرتبه!
🚀 تاثیر تگ <bdo> روی سئو (SEO)
با اینکه این تگ کوچیکه، ولی توی سئو هم تاثیر داره. چطوری؟
- جلوگیری از نمایش بهم‌ریخته‌ی متن: گوگل متنی که درست نمایش داده بشه رو بهتر ایندکس می‌کنه.
- محتوای چندزبانه‌ی تمیز: برای سایت‌هایی که چند زبانه هستن، استفاده اصولی از این تگ باعث ساختار تمیزتر می‌شه.
- تجربه کاربری بهتر = زمان ماندگاری بیشتر → گوگل عاشق اینه!
🏷️ تگ bdo و دسترسی‌پذیری (Accessibility)
اگر مخاطب‌های سایتت از ابزارهای کمکی مثل صفحه‌خوان‌ها (Screen Readers) استفاده می‌کنن، استفاده از تگ <bdo> کمک می‌کنه متن‌ها به شکل صحیحی خونده بشن. مخصوصاً توی فرم‌ها، پیام‌ها، یا آموزش‌های زبان خیلی مهمه.
🧪 پروژه عملی
🎯 ایده پروژه:
یه بخش معرفی چندزبانه بساز که داخلش یک جمله فارسی و همون جمله به انگلیسی نوشته شده باشه. با استفاده از تگ <bdo> جهت هر بخش رو کنترل کن تا مطمئن شی تو همه مرورگرها درست نمایش داده می‌شه. درضمن یادت نره اگه مبتدی هستی کد هات رو تو W3C Validator می‌تونی چک کنی و ببینی درست نوشتی یا نه.
🏁 جمع‌بندی: آیا واقعاً تگ <bdo> لازمه؟
قطعاً بله، ولی نه همیشه!
این تگ همون چیزی‌یه که توی طراحی سایت‌های چندزبانه و محتوای ترکیبی فارسی-انگلیسی نجاتت می‌ده. استفاده درستش باعث می‌شه کاربرات متن رو تمیز، مرتب و بدون اعصاب‌خوردی بخونن، و گوگل هم محتوای صفحه‌ت رو بهتر درک کنه.
💬 ایده‌هات رو فریاد بزن!
نظرت راجع به تگ <bdo> چیه؟ دلت می‌خواد چه چیزی به این آموزش اضافه کنیم؟ سؤالی داری؟ تو بخش نظرات برامون بنویس، تیم حرفه‌ای آوای وب با جون و دل جوابت رو می‌ده!
شهرام نجفی
همیشه آرزو داشتم که هنگام جستجوی اطلاعات، به سراغ یک منبع جامع و به روز برم، اما اینکه چنین منابعی را بیابم همیشه چالش بوده است. برای همین ایده راه اندازی سایت آوای وب به ذهنم رسید و الان در خدمت شما هستم.
برای نوشتن دیدگاه باید وارد بشوید.