آموزش تگ های عبارتی HTML به زبان ساده

رتبه: 5 ار 4 رای SSSSS
HTML Phrase tag
نویسنده: میلاد حیدری زمان مطالعه 3 دقیقه
Banner Image

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

  • <abbr>: تگ اختصار یا کوتاه سازی
  • <acronym>: تگ مخفف سازی (در ۵HTML پشتیبانی نمی شود.)
  • <mark>: تگ علامت گذاری
  • <strong>: تگ  اهمیت بخشیدن به متن
  • <em>: تگ تأکید
  • <dfn>: تگ تعریف
  • <blockquote>: تگ نقل قول
  • <q>: تگ نقل قول کوتاه
  • <code>: تگ کد
  • <kbd>: تگ صفحه کلید
  • <address>: تگ آدرس

۱- تگ اختصارسازی متن

از تگ <abbr> برای اختصار سازی یک عبارت طولانی استفاده می شود، متن کوتاه شده را بین تگ <abbr> و <abbr/> قرار دهید.

مثال

<p>An <abbr title = “Hypertext Markup language”>HTML </abbr>language is used to create web pages. </p>

خروجی

HTML Phrase tag

۲- تگ علامت گذاری

تگ <mark> برای برجسته و متمایز کردن قسمت خاصی از متن استفاده می شود. محتوای نوشته شده بین تگ <mark> و <mark/> با پس زمینه رنگ زرد در مرورگر نشان داده می شود.

مثال

<p>This tag will <mark>highlight</mark> the text.</p>

خروجی

نمایش خروجی تگ علامت گذاری

۳- متن مهم

از تگ <strong> برای اهمیت بخشیدن به متن مهم استفاده می شود. متن نوشته شده بین <strong> و < strong/> به عنوان متن مهم در نظر گرفته می شود و به صورت توپر نمایش داده می شود.

مثال

<p>In HTML it is recommended to use <strong>lower-case</strong> , while writing a code. </p>

خروجی

نمایش خروجی تگ <strong>

۴- متن تأکید شده

از تگ <em> برای تأکیدکردن روی متن استفاده می شود. متن بین تگ <em> و <em/> به صورت مورب نمایش داده می شود.

مثال

<p>HTML is an <em>easy </em>to learn language.</p>

خروجی

نمایش خروجی از تگ <em>

۵- تگ تعریف

تگ <dfn> و </dfn> این امکان می دهد را به شما می دهد تا کلمه کلیدی محتوا را مشخص کنید.

مثال

<p><dfn>HTML </dfn> is a markup language. </p>

خروجی

نمایش خروجی باتگ <dfn> و </dfn>

۶- متن نقل قول

محتوای عنصر < blockquote> نقل قول از منبع دیگری را نشان می دهد. URL (یا آدرس) منبع را می توان با استفاده از صفت cite و نام ارائه دهنده متن منبع را با عنصر <cite> ….. </cite> نشان داد.

مثال

<h2>Example of blockquote element</h2>
<blockquote cite=”https://www.keepinspiring.me/famous-quotes/”><p>“The first step toward success is taken when you refuse to be a captive of the environment in which you first find yourself.”</p></blockquote>
<cite>-Mark Caine</cite>

خروجی

نمایش خروجی متن نقل قول

۷- نقل قول های کوتاه

برای تعریف نقل قول کوتاه از عنصر <q> استفاده می کنیم. محتوای تگ <q> در داخل دابل کوتیشین قرار می گیرد.

مثال

<p>Great Motivational quote</p>
<p>Steve Jobs said: <q>If You Are Working On Something That You Really Care About, You Don’t Have To Be Pushed. The Vision Pulls You.</q>”</p>

خروجی

نمایش خروجی نقل قول های کوتاه

۸- تگ های کد

برای نمایش بخشی از کد کامپیوتری از عنصر <code> استفاده می شود. محتوای این تگ با قلم مونواسپید نمایش داده می شود.

مثال

<p>First Java program</p>

      <p><code>class Simple{ public static void main(String args[]){

       System.out.println(“Hello Java”); }} </code>   </p>

خروجی

نمایش خروجی تگ های کد

۹- تگ صفحه کلید

در HTML تگ صفحه کلید یا همان <kbd> نشان می دهد که متن با استفاده از صفحه کلید توسط کاربر وارد شده است.

مثال

<p>Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + t<kbd></kbd> to restore page on chrome.</p>

خروجی

نمایش خروجی تگ صفحه کلید

۱۰- تگ آدرس

تگ<address> اطلاعات تماس نویسنده ی محتوا را تعیین می کند. محتوای بین تگ <address> و </address> به صورت مورب نمایش داده می شود.

مثال

<address> You can ask your queries by contact us on <a href=””>example123@newdomain.com </a>

   <br> You can also visit at: <br>58 S. Garfield Street. Villa Rica, GA ۳۰۱۸۷٫

  </address>

خروجی

نمایش خروجی تگ آدرس

profile name
میلاد حیدری

بخندید کتاب بخونید و خوب باشید تا جامعه مون به آرامش برسه. لطفا ! هر سوالی دارید در بخش نظرات مطرح کنید. ما یا سایر هموطنان عزیز پاسخ خواهیم داد. برای کمک به سایت ما و گسترش آموزش در بین هموطنان، در سایتها، وبلاگ ها و شبکه های اجتماعی لینک سایت ما را درج کنید.

مطالب پیشنهادی برای شما

محصولات مرتبط

مشاهده همه

دیدگاهتان را بنویسید

1 2 3 4 5

4 نظر درباره «آموزش تگ های عبارتی HTML به زبان ساده»

  • amin
    amin آیا این دیدگاه مفید بود ؟

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

    پاسخ
    • Radin

      در تگ های blockquote معمولاً مرورگر محتوای درون تگ را به صورت تورفته نمایش می دهند و کوتیشن وجود ندارد. در این مثال علامت سوال ها ابتدا و انتهای خود متن قرار دارند. برای نقل قول کوتاه یا درون خطی از تگ q استفاده می شود که معمولا با کوتیشن نشان داده می شوند.

  • arashe
    arashe آیا این دیدگاه مفید بود ؟

    در قسمت ۹ همان تگ صفحه کلید در خروجی First Java Program را نوشته در کد ولی در خروجی چاب میکند

    پاسخ
  • فرزاد
    فرزاد آیا این دیدگاه مفید بود ؟

    تو قسمت تگ صفحه کلید t داخل تگ kbd نیست.

    پاسخ
مشاهده همه نظرات
سبد خرید
سبد خرید شما خالی است
× جهت نصب روی دکمه زیر در گوشی کلیک نمائید
آی او اس
سپس در مرحله بعد برروی دکمه "Add To Home Screen" کلیک نمائید