لیست تمام مهم ترین و کاربردی ترین تگ های html


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

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

تگ های Heading

به برچسب های <h1>,<h2>,<h3>,<h4>,<h5>,<h6> تیتر یا عنوان صفحه نیز می‌گویند.

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

عنوان نوشته

که خروجی آن بصورت زیر است.

خروجی1

 

در اینجا عنوان مقاله در تگ <h1> مشخص شده است.

برچسب <p>

همانظور که میدانید یک صفحه دارای یک یا چند پاراگراف است.

که این پاراگراف را با تگ باز <p>وبسته <p/>در html استفاده میکنیم.

متن خود را داخل <p>و این تگ را داخل html وارد میکنیم.

تگ p

 

خروجی:

خروجی2

 

برچسب <b>

b یا bold که از این تگ  برای  توپر کردن یا درشت کردن متن بکار میرود.

در مثال بالا عبارت رشدانا را به صورت درشت نمایش می دهیم.

برچسب b

خروجی:

خروجی 3

بر چسب <br>

br یا break بمعنای جدا کردن است.

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

برچسب br

خروجی:

توجه :  از این برچسب فقط برای ساخت سطر جدید استفاده کنید . برای ساخت پاراگراف جدید از آن استفاده نکنید.

بر چسب <i>

i یا italic باعث میشود نوشته به صورت مایل  نمایش داده شود.

برچسب i

خروجی:

خروجی 4

برچسب <strong>

این برچسب، متن درون خود را به صورت متفاوت از سایر قسمت‌های متن و برجسته‌تر نمایش می‌دهد. عملکرد تگ strong و تگ b تقریبا شبیه به هم است، اما توصیه می‌شود که از strong به جای b استفاده کنیم.

 

پیشنهاد ویژه: آموزش برنامه نویسی

 

برچسب <em>

از تگ em برای متمایز کردن عباراتی که اهمیت بیشتری دارند و قصد داریم بر روی آن‌ها تاکید کنیم، استفاده می‌شود. جلوه ظاهری این برچسب مشابه تگ i است، اما کاربرد متفاوتی دارند. هدف تگ i صرفا جنبه نمایشی است، در حالی که تگ em جنبه معنایی نیز دارد.

برچسب <mark>

برای آن که متن را از پس زمینه درخشان متمایز کنیم، از تگ mark استفاده می‌شود. این برچسب، معمولا به منظور نشانه‌گذاری عبارتی خاص یا متنی مهم به کار می‌رود.

برچسب <del>

نام این تگ از کلمه delete گرفته شده و با هدف متمایز کردن متنی که از سند HTML حذف شده، استفاده می‌شود. البته در اینجا منظور از حذف، پاک کردن متن نیست بلکه صرفا جنبه ظاهری داشته و کاربرد آن پنهان کردن بخشی از جمله یا پاراگراف می‌باشد.

برچسب <ins>

نام تگ ins از کلمه insert گرفته شده و دقیقا در نقطه مقابل تگ del قرار دارد. برای آن که متنی که به HTML اضافه کرده‌ایم را متمایز کنیم، از ins استفاده می‌کنیم.

برچسب <sub>

نام این تگ برگرفته از کلمه Subscript است و به جهت نمایش متن به صورت زیرنویس برای یک عبارت دیگر استفاده می‌شود. معمولا مرورگرها متنی که در این تگ قرار می‌گیرد را در سطح پایین‌تری از کاراکترهای دیگر نمایش می‌دهند.

برچسب <sup>

از این تگ به منظور نمایش متن به صورت بالانویس برای سایر عبارات استفاده می‌شود. مرورگرها متون درون این تگ را بالاتر از سایر کاراکترها نشان می‌دهند.

برچسب <hr>

از تگ hr به منظور ایجاد خط افقی استفاده می‌شود. البته ویژگی‌های ظاهری آن به وسیله استایل CSS نیز قابل تغییر است.

برچسب <pre>

از این تگ برای به وجود آوردن متن‌های از پیش فرمت‌بندی شده استفاده می‌شود.

تگ <code>

تگ code برای درج کدهای برنامه نویسی به شکل خطی به کار می‌رود. مرورگرها به صورت پیش فرض متن داخل این تگ را به صورت فونت فشرده نشان می‌دهند.

تگ <marquee>

از این تگ به منظور متحرک سازی متن در صفحات HTML استفاده می‌شود. با استفاده از تگ marquee می‌توانید سرعت، رنگ و سایر ویژگی‌های متن را تنظیم کنید و از این طریق آن را به حرکت درآورید.

تگ <blink>

عملکرد این تگ نیز مانند marquee است، با این تفاوت که blink صرفا جهت ایجاد متن و لینک‌های چشمک‌زن استفاده می‌شود، در حالی که تگ marquee علاوه بر متن، بر روی تصویر نیز تاثیر دارد.

برچسب <q>

از این تگ به منظور نمایش نقل قول که در مرورگرها با علامت کوتیشن (“) نمایان می‌شود، استفاده می‌کنند.

برچسب <blockquote>

تگ blockquote به عنوان یک بلاک برای نمایش کوتیشن‌ها است. این برچسب، یک حاشیه و فاصله از کنار مرورگر ایجاد می‌کند.

برچسب <abbr>

با استفاده از این تگ می‌توانیم علامت اختصاری یا همان مخفف کلمات را ایجاد کنیم. تگ abbr اطلاعات مفیدی را در اختیار مرورگرها و موتورهای جستجو قرار می‌دهد. خوب است بدانید که تگ acronym نیز کاربردی مشابه abbr دارد، اما در html5 غیرقابل پشتیبانی است.

 

پیشنهاد ویژه: آموزش برنامه نویسی html

 

برچسب <address>

تگ address سبب نمایش اطلاعات تماس یک سند می‌شود. عباراتی که داخل این تگ قرار می‎گیرند، معمولا به حالت ایتالیک نمایش داده می‌شوند.

برچسب <cite>

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

برچسب <bdo>

با استفاده از این تگ، جهت متن و جملات تعریف می‌شود. اکثر اوقات زمانی که قرار باشد در یک متن فارسی از جملات انگلیسی استفاده کنیم، این برچسب کاربرد دارد.

برچسب <u>

u یا underline بمعنای زیرخط دار است یعنی متن به صورت زیر خط دار نمایش داده می شود.

برچسب u

خروجی:

خروجی 5

برچسب <big>

این تگ باعث میشه متن بزرگتر از سایر متون نمایش داده  شود.

تگ big

 خروجی:

خروجی6

برچسب <small>

این تگ باعث میشه متن کوچکتر از سایر متون نمایش داده شود.

برچسب تگ small

خروجی:

خروجی7

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

جمع بندی

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

مدیر سایت

دوره آموزشی پیشنهادی

آموزش کدنویسی HTML5 و CSS3

HTML5 & CSS3 Markup

اولین گام برای ورود به دنیای برنامه نویسی

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

نشانی ایمیل شما منتشر نخواهد شد.




مشاوره بگیرید 09301302890 9:00 تا 16:00

×
roshdana aparat roshdana instagram roshdana twitter roshdana telegram roshdana linkedin