تگ‌های مخصوص کد و نقل قول

تگ‌های کد، نقل قول و اختصار: نشانه گذاری دقیق متن! 📝

سلام به همه! توی دنیای وب، گاهی اوقات لازمه که یه متن رو به عنوان یه کد نشون بدیم، یه نقل قول رو مشخص کنیم، یا یه اختصار رو توضیح بدیم. HTML برای این کارها تگ‌های مخصوصی داره که به خواناتر شدن محتوا و همچنین برای موتورهای جستجو و صفحه‌خوان‌ها کمک زیادی می‌کنه. امروز قراره با چند تا از این تگ‌های مهم آشنا بشیم:

استفاده درست از این تگ‌ها، به محتوای شما معنا و ساختار دقیق‌تری می‌ده و باعث می‌شه حرفه‌ای‌تر به نظر برسید!

۱. تگ <abbr>: برای اختصارها! 🅰️

تگ <abbr> (مخفف Abbreviation) برای نمایش اختصارها و مخفف‌ها استفاده می‌شه. مهم‌ترین قسمت استفاده از این تگ، اضافه کردن خصوصیت title هست که معنی کامل اختصار رو مشخص می‌کنه. وقتی مرورگر این تگ رو می‌بینه، معمولاً یه خط نقطه‌چین زیرش می‌کشه تا نشون بده این یه اختصاره و اگه کاربر موس رو روش نگه داره، معنی کاملش رو توی یه کادر کوچیک (Tooltip) نمایش می‌ده.

<p>
  من در <abbr title="سازمان علمی، فرهنگی و آموزشی ملل متحد">یونسکو</abbr> کار می‌کنم.
  <!--
    - وقتی کاربر موس رو روی "یونسکو" نگه داره، متن "سازمان علمی، فرهنگی و آموزشی ملل متحد" نمایش داده می‌شه.
  -->
</p>

<p>
  قصد دارم در مورد <abbr title="Cascading Style Sheets">CSS</abbr> بیشتر یاد بگیرم.
</p>

۲. تگ <code>: برای نمایش کدها! 💻

این تگ برای نمایش قطعات کوتاه از کد برنامه‌نویسی در متن استفاده می‌شه. مرورگرها معمولاً این تگ رو با یه فونت monospace (مثل Courier New) و گاهی با یه پس‌زمینه متفاوت نشون می‌دن تا از متن معمولی متمایز بشه.

<p>
  برای تعریف یه متغیر در جاوا اسکریپت، از کلیدواژه <code>let</code> یا <code>const</code> استفاده می‌کنیم.
  مثال: <code>let count = 10;</code>
</p>

<p>
  تگ HTML برای تعریف پاراگراف <code>&lt;p&gt;</code> است.
</p>

نکته: اگر می‌خواید چند خط کد رو نمایش بدید، بهتره از تگ <pre> به همراه <code> استفاده کنید تا فاصله‌گذاری‌ها و تورفتگی‌های کد حفظ بشه.

۳. تگ <q>: برای نقل قول‌های کوتاه! 💬

تگ <q> (مخفف Quote) برای نمایش نقل قول‌های کوتاه که در دل متن قرار می‌گیرن، استفاده می‌شه. مرورگرها معمولاً نقل قول‌های داخل این تگ رو با علامت نقل قول (” “) احاطه می‌کنن.

<p>
  همانطور که در کتاب گفته شده:
  <q>هیچ چیز غیرممکن نیست مگر اینکه خودت آن را غیرممکن بدانی.</q>
  یادگیری را ادامه دهید.
</p>

۴. تگ <blockquote>: برای نقل قول‌های بلند! 📜

این تگ برای نقل قول‌های طولانی‌تر یا بلوک‌های متن که از منبع دیگه‌ای کپی شدن، به کار می‌ره. مرورگرها معمولاً بلوک‌بیت شده رو کمی تورفتگی می‌دن تا از متن اصلی متمایز بشه. استفاده از تگ cite برای ذکر منبع نقل قول خیلی توصیه می‌شه.

<blockquote cite="https://fa.wikipedia.org/wiki/HTML">
  <p>
    HTML (به انگلیسی: HyperText Markup Language) زبان توصیف ساختار محتوای یک وب‌صفحه است.
    این زبان استانداردی است که توسط کنسرسیوم وب جهان‌گستر (W3C) تعریف و برای پردازش توسط مرورگرهای وب استفاده می‌شود.
  </p>
  <!-- cite: آدرس منبع نقل قول -->
</blockquote>

چرا این تگ‌ها مهم هستن؟

• معنایی بودن (Semantics): به مرورگر و موتورهای جستجو کمک می‌کنن تا بفهمند بخش‌های مختلف متن چه نقشی دارن.
• دسترسی‌پذیری (Accessibility): صفحه‌خوان‌ها می‌تونن از این تگ‌ها برای درک بهتر ساختار محتوا استفاده کنن.
• نمایش پیش‌فرض: مرورگرها به صورت خودکار این تگ‌ها رو با استایل‌های مناسب نمایش می‌دن که کار ما رو راحت‌تر می‌کنه.

یادگیری و استفاده صحیح از این تگ‌ها، به شما کمک می‌کنه تا محتوای وب‌سایتتون رو به شکل بهتری نشانه گذاری کنید و کیفیت کلی صفحاتتون رو بالا ببرید. موفق باشید! ✨