آموزش تگ‌های HTML

نوشته شده توسط: تیم فنی نیک آموز

تاریخ انتشار: ۲۹ مهر ۱۳۹۹

آخرین بروزرسانی: 17 تیر 1403

زمان مطالعه: ۲۰ دقیقه

مقدمه

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

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

تگ <html>

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

• متن‌ها
• ورودی‌ها
• دکمه‌ها
• برچسب‌ها
• لینک
• تصاویر
• جداول
• لیست‌ها
• فرم‌ها
• و …

بعد از آموزش تگ‌های html متوجه می‌شوید که هرکدام از این تگ‌ها، دارای یک هدف و ویژگی منحصربه‌فرد هستند. برای مثال، تگ <img> برای نمایش یک تصویر در صفحه به کار گرفته می‌شود. این در حالی است که تگ <p> برای نمایش یک پاراگراف مورداستفاده قرار می‌گیرد. در ادامه به‌صورت کامل در خصوص تگ‌های html صحبت خواهیم کرد.

اجزای تگ‌های HTML

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

مؤلفه	توضیح مختصر
علائم باز کردن (<>) و بسته‌شدن براکت‌های زاویه‌ای (/)	نشان‌دهنده محدوده تگ html
نام تگ	نمایانگر چیزی است که تگ HTML در مورد آن است.
محتوای تگ	نشان‌دهنده محتوایی است که ویژگی‌های تگ را به ارث برده است.

نحو تگ‌های HTML

در ادامه آموزش تگ‌های html اجازه دهید تا نحو تگ‌های HTML را شرح دهیم. هر تگ HTML با یک جفت براکت زاویه‌ای باز (<>) شروع خواهد شد. بین این براکت‌ها، نام تگ قرار می‌گیرد. انتهای تگ با یک جفت براکت زاویه‌ای بسته (</>) نشان داده خواهد شد. نام تگ بین آن قرار دارد. در درون این براکت‌ها، محتوای تگ قرار گرفته است. برای مثال:

<HTML_TAG>
<!-- محتوای برچسب -->
</HTML_TAG>

محتوای داخل یک تگ HTML

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

تگ <h1> می‌تواند یک عنوان بزرگ را نمایش دهد. محتوای داخل این تگ، ویژگی آن خواهد بود. هر چه در بین این تگ قرار بگیرد، عنوان بزرگ خواهد داشت.

تگ‌های ضروری HTML

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

تگ <!DOCTYPE html>

تگ<!DOCTYPE html> را می‌توان اولین تگ در هر سند html دانست. این تگ را می‌توان یک تگ ویژه دانست که براکت‌های بسته را ندارد. همچنین محتوای html نیز درون آن قرار نمی‌گیرد. اگر بخواهیم در خصوص آموزش تگ‌های html و تگ <!DOCTYPE html> صحبت کنیم باید بگوییم که این تگ تنها به مرورگرها اثبات می‌کند که سند بارگذاری شده، یک سند html است.
مثال:

<!DOCTYPE html> ...

تگ <head>

در ادامه آموزش تگ‌های html به یک تگ مهم برخورد می‌کنیم. تگ <head> در بالای هر سند html ظاهر خواهد شد. این تگ می‌تواند برخی دیگر از تگ‌های html را در خود جای دهد. این تگ‌های جای گرفته در تگ <head>، اطلاعات اضافی را در خصوص صفحات وب نشان می‌دهند.
مثال:

<head> <meta charset="UTF-8"> </head>

برچسب <title>:

برچسب <title> برای دادن عنوان به سند html استفاده می‌شود. این عنوان همچنین در برگه مرورگری که سند html در آن قرار دارد، نشان داده می‌شود.
مثال:

<title> HTML Tags </title>

برچسب <body>:

از جمله برچسب‌های مهمی که در آموزش تگ‌های html باید به آن اشاره کرد، برچسب <body> خواهد بود. این برچسب، تمام تگ‌های html را که برای ایجاد اسناد html استفاده می‌شوند را در برمی‌گیرد.
مثال:

<body> ...
</body>

سایر تگ‌های HTML

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

تگ‌های متنی HTML

بدون شک بخش قابل‌توجهی از مطالب موجود در وب‌سایت‌های مختلف، از متن تشکیل شده‌اند؛ ازاین‌رو html مجموعه‌ای از برچسب‌هایی را برای

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

تگ <p>:

برای نمایش یک پاراگراف یا گروهی از کلمات در صفحات وب به کار می‌رود.

تگ <span>:

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

تگ‌های عنوان یا هدینگ:

این تگ‌ها، عناوین مختلف یک متن را نشان می‌دهند.

تگ <strong>:

این تگ قابلیت پررنگ کردن قسمت موردنظر از متن را دارد.

تگ <em>:

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

برچسب‌های لینک HTML

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

• تگ <a> یا لنگر که برای افزودن لینک‌هایی به همان صفحات وب‌سایت یا صفحات مختلف وب‌سایت‌های دیگر استفاده می‌شود.
• تگ <link> که برای پیوند دادن یک منبع خارجی یا داخلی به سند html مورداستفاده واقع می‌شود.

تگ‌های تصویر و شی HTML

نوع دیگری از تگ‌هایی که در آموزش تگ‌های html به آن اشاره می‌کنیم، تگ‌های تصویر و شی هستند. تگ <img> در html برای نشان‌دادن تصاویر استفاده می‌شود. البته در میان آموزش تگ‌های html باید به تگ <object> نیز اشاره شود. این تگ برای ارائه هر منبع خارجی مانند تصویر، ویدئو، وب‌سایت و … استفاده می‌شود. البته امروزه تگ‌های جایگزینی مانند <img>، <video>، <audio> برای انجام این کار قرار گرفته‌اند که در آموزش تگ‌های html به آن اشاره نمی‌کنیم.

برچسب‌های لیست HTML

بعد از همه تگ‌های معرفی شده در آموزش تگ‌های html، نوبت به برچسب‌های لیست html می‌رسد. فهرست‌ها در وب‌سایت‌های مختلف، برای نمایش دادن مجموعه‌ای از داده‌ها به‌صورت مرتب و یا نامرتب استفاده می‌شوند؛ ازاین‌رو در آموزش تگ‌های html زیرمجموعه برچسب‌های لیست html با سه مدل تگ لیست برخورد می‌کنیم:

لیست نامرتب:

این لیست با تگ <ul> نشان داده می‌شود. آیتم‌های آن نیز به کمک تگ <li> پیاده می‌شوند. برای مثال:

<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>

لیست مرتب شده

این لیست با تگ <ol> نشان داده می‌شود. آیتم‌های این لیست نیز به کمک تگ <li> نما

<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>

لیست توضیحات

به کمک آموزش تگ‌های html و یادگیری تگ لیست توضیحات، می‌توانید هر توضیحی را در html پیاده کنید. این لیست با تگ <dl> پیاده‌سازی می‌شود. برای توضیحات آن نیز می‌توانید از تگ <dd> استفاده کنید. برای مثال:

<dl> 
<dt>Term 1</dt>
<dd>- Description of Term 1</dd> 
<dt>Term 2</dt> 
<dd>- Description of Term 2</dd>
</dl>

برچسب‌های جدول HTML

در این قسمت از آموزش تگ‌های html نوبت به معرفی برچسب‌های جدول در html رسیده است. به کمک تگ <table>، HTML می‌تواند از جداول پشتیبانی کند. همچنین امکان ایجاد ردیف و ستون به کمک تگ <tr> و تگ <th> وجود دارد. می‌توان محتوای داخل هر ستون را با تگ <td> نشان داد.

برچسب‌های فرم HTML

به کمک فرم‌ها می‌توانید ورودی‌های متعددی از کاربران دریافت کنید. برای درک بهتر، می‌توانید به فرم‌های ثبت نامی وب‌سایت‌های مختلف فکر کنید. در آن فرم‌ها، اطلاعاتی در خصوص نام، شماره تماس، آدرس، ایمیل و … از شما دریافت می‌کنند. اگر بخواهیم در تگ‌های html به تگ مربوط به این فرم‌ها اشاره کنیم، باید از تگ <form> یاد کرد. درون این تگ می‌توانید فیلدهای ورودی را با استفاده از تگ <input> رندر کنید.

برچسب‌های اسکریپت HTML

امروزه اکثر وب‌سایت‌ها به کمک جاوا اسکریپت توسعه پیدا کرده‌اند. به کمک برچسب‌های اسکریپت، می‌توانید به html این اجازه را دهید تا از تگ‌های <script> همان‌طور که هستند، استفاده کنید. همچنین می‌توانید به کمک همین تگ، به فایل‌های جاوا اسکریپت در یک سند html ارجاع دهید.

برچسب‌های خود بسته‌شدن:

نوع دیگری از تگ‌های html که در این قسمت از مقاله تگ‌های html قصد داریم به آن اشاره کنیم، برچسب‌های خود بسته‌شدن است. این برچسب‌ها هیچ محتوایی ندارند. تفاوت آن با تگ‌های بسته نشده این است که تگ‌های خواسته دارای یک بک اسلش (/) در نحو خود هستند.

نظرات در HTML

بخش نظرات در برنامه‌ها برای توسعه‌دهندگان حکم زیرنویس را دارد! نظرات در واقع پیام‌هایی برای توسعه‌دهندگان بوده و هیچ معنایی برای مرورگرها ندارند. می‌توانید به کمک کلیدواژه‌های <!– … –!> نظرات خود را وارد کنید. برای مثال:

<!-- این یک نظر است! -->

ویژگی‌ها در HTML

ویژگی‌های HTML خصوصیاتی هستند که اطلاعات بیشتری را در خصوص تگ‌ها ارائه می‌دهند. برای مثال، ویژگی src در تگ <img>، آدرس تصویری را که تگ <img> ارائه می‌دهد، به ما می‌گوید.

نتیجه‌گیری

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

سؤالات متداول:

در این قسمت از مقاله قصد داریم تا به پرتکرارترین و متداول‌ترین سؤالات شما در زمینه آموزش html پاسخ دهیم:

۱۰ تگ اصلی HTML چیست؟

۱۰ تگ اصلی html عبارت‌اند از: تگ <head>، برچسب <title>، برچسب <body>، تگ‌های متنی، لینک، تصویر و شی، لیست، جدول، فرم، اسکریپت.

چند تگ در HTML وجود دارد؟

بر اساس شبکه توسعه‌دهنده موزیلا (MDN) و HTML.com به ترتیب ۱۴۲ و ۱۳۲ تگ html وجود دارد.

مهم‌ترین تگ‌ها در HTML کدامند؟

از مهم‌ترین تگ‌های html می‌توان به تگ <head>، برچسب <title>، برچسب <body>، برچسب تصویر، متن، لینک و … اشاره کرد.