نقل قول و استناد در زبان HTML

HTML quotation elements

2 819

با سلام و عرض ادب خدمت شما همراهان گرامی روکسو، در این قسمت قصد داریم در رابطه با مبحث نقل قول و استناد در زبان HTML صحبت کنیم.

نقل قول و استناد

به مثال زیر توجه کنید:

مشاهده ی خروجی در JSBin

گروه WWF یکی از گروه های فعال محیط زیستی است که با کمک مردم دنیا سعی در حفظ طبیعت این کره ی خاکی را دارد و متن بالا قسمتی از توضیح وب سایت خودشان در این مورد است. از آن جایی که ما عیناً نوشته ی وب سایت آن ها را برداشته و کپی کرده ایم باید آن را به صورت نقل قول بیاوریم تا مشخص شود که متعلق به ما نیست. اگر به خروجی این کد دقت کنید متوجه می شوید که قسمت نقل قول شده کمی جلوتر از قسمت های دیگر است و این استایل پیش فرض HTML در مورد نقل قول ها است.

بیایید تگ های آن را بررسی کنیم!

تگ <q>

تگ <q> مخفف quotation یا نقل قول است و وظیفه اش مشخص کردن نقل قول های مختصر و کوتاه است. اگر از این تگ استفاده کنید معمولا مرورگرها محتوایش را بین دو علامت Quotation (“) قرار می دهند. مثال:

مشاهده ی خروجی در JSBin

معمولا نقل قول هایی که از این قبیل هستند بسیار کوتاهند (در حد یک جمله یا کمتر) اما اگر بخواهیم قسمت طولانی تری را نقل کنیم چطور؟

تگ <blockquote>

تگ <blockquote> در زبان HTML وظیفه ی استناد و نقل قول قسمت کاملی از متن را دارد و مرورگرها معمولا آن را indent (جلوتر قراردادن نسبت به بقیه ی متن) می کنند. مثال:

مشاهده ی خروجی در JSBin

همانطور که می بینید در این نوع از نقل قول ها، متن طولانی تر است و تقریبا یک پاراگراف را شامل می شود.

نکته: شما می توانید با استفاده از CSS ظاهر انواع نقل قول ها را تغییر دهید بنابراین نگران ظاهر آن ها نباشد. دلیل اصلی استفاده از این تگ ها، مبحث semantic (کدنویسی معنایی) است که برای موتورهای جستجو اهمیت دارد.

تگ <abbr>

تگ <abbr> مخفف abbreviation و به معنی کلمات مخفف است. به طور مثال کلماتی که شکل اختصاری آن ها به کار می رود و یا سرواژه ها در این دسته قرار می گیرند. شما می توانید با استفاده از این تگ اعلام کنید که فلان کلمه ی متن یک سرواژه است یا مخفف عبارت خاصی است:

مشاهده ی خروجی در JSBin

نکته: همانطور که در کد بالا مشاهده می کنید ما به این تگ attribute ای به نام title داده ایم تا اگر کاربر معنی مخفف را ندانست، موس خود را روی آن نگه دارد و معنی برایش نمایش داده شود.

سوال: چرا متن را به صورت عادی ننویسیم؟ آیا لازم است از این تگ استفاده کنیم؟

پاسخ: از نظر فنی خیر اما با استفاده از این تگ به موتورهای جستجو کمک می کنید تا آنها بهتر متن سایتتان را درک کنند و سایت اصولی تری خواهید داشت. همچنین در صورت استفاده از این تگ، اگر کاربری از سیستم های ترجمه (مانند افزونه google translate و …) استفاده کند، می تواند ترجمه ی بهتری دریافت کند.

تگ <address>

تگ <address> در زبان HTML اطلاعات تماس نویسنده ی صفحه و یا صاحب وب سایت را به کاربر ارائه می کند. محتوای این نوع تگ ها معمولا به صورت مورب (italic) به نمایش در می آیند. همچنین اکثر مرورگرها قبل و بعد از آن، یک line break (اینتر) اضافه می کنند:

مشاهده ی خروجی در JSBin

در خروجی، نحوه ی نمایش اطلاعات را مشاهده می کنید که italic هستند.

تگ <cite>

تگ <cite> در هنگام نقل قول معمولا عنوان یک اثر را مشخص می کند. به طور مثال:

مشاهده ی خروجی در JSBin

در مثال بالا نقاشی معروف ادوارد مانچ به نام “The Scream” را آورده ایم و از آنجا که The Scream نام اثر است آن را در cite قرار داده ایم.

تگ <bdo>

تگ <bdo> مخفف bi-directional override (به معنی «باطل کردن دو طرفه») می باشد. دلیل استفاده از آن باطل کردن یا نادیده گرفتن text direction فعلی است. text direction یعنی نوشته ی ما از راست به چپ نوشته می شود (مانند فارسی) یا از چپ به راست (مانند انگلیسی) و با استفاده از این تگ می توانید در وسط یک جمله این جهت را عوض کنید:

مشاهده ی خروجی در JSBin

اگر به خروجی کد بالا بروید می بینید که جمله ی This line will be written from right to left کاملا برعکس شده است.

امیدوارم از این قسمت لذت برده باشید. در این درس نگاهی به تگ های مربوط به نقل قول در html انداختیم و برخی تگ های ضروری جهت ویرایش و توضیح متون را بررسی کردیم. در درس های بعدی مجموعه آموزش html باشید.

ترتیبی که روکسو برای یادگیری مطالب سری صفر تا صد HTML به شما توصیه می‌کند:
2 نظر
  1. a_bahoush

    سلام
    مثالها ظاهرا غیر دو تای اول باقی در خروجی JSBin تغییر کرده است نیاز به اصلاح دارد

    1. امیر زوارمی

      سلام دوست عزیز،
      بله متاسفانه به خاطر باگ عجیبی بود که توی JSBIN هست. اما هیچ مشکلی نیست شما میتونین کد ها رو از همینجا کپی کنید و در تب جدید JSBIN رو باز کنید و اونجا paste کنید تا خروجی رو ببینید. متاسفانه JSBIN اجازه ی ویرایش کد های ذخیره شده رو نمیده.

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

mezitli escort
mezitli escort