blockquote و q: وقتی حرف کس دیگهای رو نقل میکنی
خیلی وقتها تو نوشتن محتوا لازم میشه یه جمله یا بخشی از حرف یه شخص یا منبع دیگه رو عیناً نقل کنی؛ مثلاً یه نقلقول از یه کتاب، یا یه جملهی کوتاه از یه مصاحبه. HTML5 برای این کار دو تگ مشخص داره: blockquote برای نقلقولهای بلند و مستقل، و q برای نقلقولهای کوتاه داخل متن. بیا کامل باهاشون آشنا بشیم.
تگ blockquote: نقلقول بلوکی و مستقل
<blockquote>
<p>موفقیت یعنی رفتن از شکستی به شکست دیگر، بدون از دست دادن اشتیاق.</p>
</blockquote>تگ blockquote برای نقلقولهایی استفاده میشه که بهصورت یه بلوک مستقل از بقیهی متن جدا میشن؛ یعنی معمولاً چند خط یا حتی چند پاراگراف طول میکشن. مرورگر بهصورت پیشفرض این بخش رو با یه تورفتگی (Indentation) از دو طرف نمایش میده تا از بقیهی متن مشخص و جدا باشه.
ویژگی cite برای مشخصکردن منبع
<blockquote cite="https://example.com/article">
<p>تکنولوژی باید در خدمت انسان باشد، نه برعکس.</p>
</blockquote>ویژگی cite آدرس منبع اصلی نقلقول رو مشخص میکنه. نکتهی مهم اینه که این ویژگی بهصورت پیشفرض هیچجا برای کاربر نمایش داده نمیشه؛ فقط یه اطلاعات اضافیه که مرورگرها و ابزارهای مختلف میتونن ازش استفاده کنن (مثلاً برای لینکدادن خودکار به منبع با کمک CSS یا جاوااسکریپت).
نمایش نام گوینده با تگ footer
یه روش رایج و توصیهشده برای نشوندادن اینکه نقلقول از کیه، استفاده از تگ footer داخل blockquote هست:
<blockquote cite="https://example.com/speech">
<p>تنها راه انجام کار بزرگ، عشقورزیدن به آن است.</p>
<footer>— استیو جابز</footer>
</blockquote>تو این مثال، متن اصلی نقلقول داخل p نوشته شده، و نام گوینده با footer مشخص شده. این ساختار به مرورگر و صفحهخوان کمک میکنه بفهمه کجا نقلقول تموم شده و کجا اطلاعات مربوط به منبع شروع میشه.
تگ q: نقلقول کوتاه داخل جمله
<p>او گفت: <q>فردا حتماً میآیم.</q> اما هیچوقت نیامد.</p>برخلاف blockquote که یه بلوک جدا و مستقله، تگ q برای نقلقولهای کوتاهی استفاده میشه که داخل جریان عادی یه جمله یا پاراگراف قرار میگیرن. مرورگر بهصورت خودکار دور محتوای q یه گیومه (Quotation Mark) اضافه میکنه؛ یعنی لازم نیست خودت دستی گیومه بذاری.
خروجی تگ q چیه؟
تو مثال بالا، مرورگر بهطور خودکار قبل و بعد از «فردا حتماً میآیم» یه علامت گیومه اضافه میکنه، بدون اینکه خودت چیزی تایپ کرده باشی. این یه مزیت مهمه، چون اگه یه روز بخوای سبک گیومهها رو عوض کنی (مثلاً از گیومهی انگلیسی به گیومهی فارسی «»)، کافیه با CSS این تغییر رو اعمال کنی، بدون اینکه لازم باشه تکتک متنهای سایت رو دستی ویرایش کنی.
مقایسهی blockquote و q
| ویژگی | blockquote | q |
|---|---|---|
| نوع محتوا | بلوکی (Block-level) | درونخطی (Inline) |
| طول مناسب | نقلقول بلند، چند خط یا چند پاراگراف | نقلقول کوتاه، در حد یک جمله |
| گیومهی خودکار | خیر | بله |
| نمایش پیشفرض | تورفتگی از دو طرف، جدا از متن اصلی | داخل جریان عادی متن، فقط با گیومه |
یه اشتباه رایج: استفاده از blockquote فقط برای تورفتگی ظاهری
بعضیها از blockquote استفاده میکنن فقط چون میخوان یه بخش از متن، تورفتگی داشته باشه؛ در حالی که اون متن هیچ ربطی به نقلقول از یه منبع دیگه نداره:
<!-- استفادهی نادرست -->
<blockquote>
<p>این متن فقط برای تورفتگی داخل blockquote گذاشته شده، نه چون نقلقول است.</p>
</blockquote>این کار از نظر معنایی اشتباهه. اگه فقط به تورفتگی ظاهری نیاز داری، باید از CSS (مثلاً ویژگی margin یا padding) استفاده کنی، نه از blockquote که معنای خاص «نقلقول» رو حمل میکنه.
یه مثال کامل ترکیبی
<h1>نقلقولهای الهامبخش</h1>
<p>یکی از معروفترین جملات دربارهی موفقیت این است که <q>شکست، بخشی از مسیر رسیدن به موفقیت است.</q></p>
<blockquote cite="https://example.com/quotes">
<p>من شکست نخوردهام. فقط ده هزار راهی را که جواب نمیدهد، پیدا کردهام.</p>
<footer>— توماس ادیسون</footer>
</blockquote>تو این مثال، از q برای یه جملهی کوتاه داخل متن استفاده کردیم، و از blockquote برای یه نقلقول کامل و مستقل با ذکر نام گوینده.
چند اشتباه رایج
- استفاده از blockquote صرفاً برای ایجاد تورفتگی ظاهری، بدون اینکه محتوا واقعاً یه نقلقول باشه.
- اضافهکردن گیومهی دستی دور محتوای تگ q، در حالی که مرورگر خودش این کار رو انجام میده.
- استفاده از q برای نقلقولهای خیلی طولانی که از نظر ساختاری باید داخل blockquote باشن.
- فراموشکردن ویژگی cite وقتی منبع نقلقول مشخص و در دسترسه.
بهترین روشها
- برای نقلقولهای کوتاه و درونجملهای از q استفاده کن، و اجازه بده مرورگر خودش گیومه اضافه کنه.
- برای نقلقولهای بلند و مستقل از blockquote استفاده کن و در صورت امکان، نام گوینده رو با footer مشخص کن.
- در صورت وجود منبع مشخص، همیشه ویژگی cite رو اضافه کن.
نکتهی سئو
استفادهی صحیح از blockquote همراه با ویژگی cite میتواند به موتورهای جستجو کمک کند تا منبع اصلی یک نقلقول را تشخیص دهند، که در برخی موارد به اعتبار محتوایی صفحه نیز کمک میکند.
نکتهی دسترسیپذیری
برخی صفحهخوانها هنگام رسیدن به تگ blockquote یا q، با یک تغییر لحن کوتاه به کاربر اعلام میکنند که این بخش نقلقول از منبع دیگری است؛ این موضوع کمک میکند کاربر کمبینا بین محتوای اصلی نویسنده و محتوای نقلشده تمایز قائل شود.
جمعبندی
تگ blockquote برای نقلقولهای بلند و مستقل استفاده میشود و میتواند با ویژگی cite و تگ footer همراه شود، در حالیکه تگ q برای نقلقولهای کوتاه درونجملهای به کار میرود و مرورگر بهصورت خودکار گیومه دور آن اضافه میکند. هیچکدام از این دو تگ نباید صرفاً برای اهداف ظاهری و بدون وجود یک نقلقول واقعی استفاده شوند.