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

تگ های عبارتی 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>

خروجی

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

تگ <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>

خروجی

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

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

مثال

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

خروجی

۵- تگ تعریف

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

مثال

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

خروجی

۶- متن نقل قول

محتوای عنصر < 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>

خروجی