لیست جامع تگ های اچ تی ام ال html و کاربردهای هر کدام (قسمت1)
برای شناخت تگ های اچ تی ام ال html بهتر است ابتدا با مفهوم تگ یا tag آشنا شوید. در ادامه قصد داریم شما را با تگ های اچ تی ام ال 5 و کاربرد هرکدام آشنا کنیم. حتما جز فراگیران حوزه طراحی سایت هستید یا به دانستن اطلاعات در زمینه طراحی وب علاقه‌مند هستید.
برای یادگیری بهتر و تسلط بر تگ های html آنها را در محیط وبسایت زیر وارد کنید و دکمه Run را بزنید تا نتیجه را تست کنید. پس ابتدا روی دکمه زیر بزنید و صفحه را باز کنید سپس ادامه پست را بخوانید.
تگ html چیست؟
تگ در زبان فارسی به معنی "برچسب" است. تگ اچ تی ام ال html یک عنصر از زبان نشانه گذاری ابر متن (HTML) است که نقش مهمی را ایفا می‌کند؛ مشخص می‌کند که چگونه محتوای یک سند اچ تی ام ال در صفحه وب نمایش داده شود.
تگ <html> در html5 برای نشان دادن شروع و پایان سند html استفاده می‌شود. این تگ در ابتدای صفحه قرار می‌گیرد و تمام محتوا و عناصر html درون آن قرار می‌گیرند.
هر سند html با تگ <html> آغاز و با تگ </html> پایان می‌یابد و دارای دو بخش اصلی است:
- <head>
- <body>
تگ <head> چیست ؟
در این بخش، اطلاعات مربوط به سند اچ تی ام ال مانند عنوان صفحه، استایل‌ها، اسکریپت‌ها، و متا داده‌ها قرار می‌گیرد. این بخش به صورت مستقیم بر روی صفحه، نمایش داده نمی‌شود و برای تنظیمات و مشخصات سند استفاده می‌شود.
تگ <body> چیست؟
در این بخش، محتوا و عناصر قابل مشاهده توسط کاربر قرار می‌گیرند. این شامل متن، تصاویر، لینک‌ها، جداول، فرم‌ها و سایر عناصر قابل نمایش است که در صفحه وب قابل مشاهده خواهند بود.
تگهای html دارای یک تگ باز به شکل <html> و یک تگ بسته به شکل <html/>هستند که هر دو هم نام بوده و عموما به صورت دوتایی استفاده می‌شوند و ساختار جدیدی به نام عناصر (elements) را ایجاد می‌کنند. یک تگ به صورت زیر نمایش داده می‌شود:
<نام_تگ>محتوا<نام_تگ/>
برخی از عناصر برای نمایش نیازی به تگ بسته ندارند (مانند تگ <img> برای تصاویر) ولی برخی از عناصر به هر دو تگ باز و بسته احتیاج دارند (مانند تگ <p>برای پاراگراف).
تگهای html می‌توانند از ویژگی‌ها یا اتریبیوت‌هایی استفاده کنند که اطلاعات بیشتری در مورد تگ را ارائه می‌دهند. هر ویژگی از یک نام و یک مقدار تشکیل شده است که در داخل تگ باز (تگ آغاز) قرار می‌گیرد و با یک علامت مساوی (=) از هم جدا می شود. مقدار ویژگی معمولاً در داخل علامت نقل قول (" یا ') قرار می‌گیرد. برای مثال، تگ <img> یک تصویر را نشان می‌دهد و از ویژگی src برای مشخص کردن آدرس تصویر استفاده می‌کند.
لیست تگهای اچ تی ام ال 5 و کاربرد هر کدام با مثال
در زبان اچ تی ام ال 5 تگ های بسیاری وجود دارد که هرکدام دارای معنا و مفهوم خاصی است. در این قسمت دو دسته از تگهای اچ تی ام ال را توضیح می دهیم:
- تگهای پایه
- تگهای قالب بندی
در لیست زیر تگهای مهم HTML5 در دسته های گفته شده را مشاهده می‌کنید. کاربردهای آنها به همراه مثال‌هایی برای کدام آورده شده است. روی هر تگ که مورد نظرتان است کلیک کنید یا به ترتیب نگاه کنید.
| تگهای پایه یا ساختاری: | تگهای قالب بندی | |
تگهای پایه یا ساختاری:
<!DOCTYPE>
<!DOCTYPE> یک تگ نیست، فقط یک راهنماست که نوع سند اچ تی ام ال را مشخص می‌کند.
<!DOCTYPE html>
<html lang="en">
<head>
<title>عنوان صفحه وب سایت</title>
</head>
<body>
<h1>این یک هدینگ است.</h1>
<p>این یک پاراگراف است.</p>
</body>
</html>
<html>
سند HTML را تعریف می‌کند و برای شروع و پایان یک سند HTML استفاده می‌شود.
مثال:
<!DOCTYPE html>
<html lang="en">
<head>
<title>عنوان صفحه وب سایت</title>
</head>
<body>
<h1>این یک هدینگ است.</h1>
<p>این یک پاراگراف است.</p>
</body>
</html>
<head>
یکی از مهمترین تگهای اچ تی ام ال است که قبل از نوشتن بدنه باید نوشته شود و اطلاعات مربوط به یک سند را تعریف می‌کند.
<!DOCTYPE html>
<html lang="en">
<head>
<title>عنوان صفحه وب سایت</title>
</head>
<body>
<h1>این یک هدینگ است.</h1>
<p>این یک پاراگراف است.</p>
</body>
</html>
<title>
برای نمایش عنوان صفحه وب در مرورگرها و نتایج موتورهای جستجوگر استفاده می‌شود.
مثال:
<!DOCTYPE html>
<html lang="en">
<head>
<title>عنوان صفحه وب سایت</title>
</head>
<body>
<h1>این یک هدینگ است.</h1>
<p>این یک پاراگراف است.</p>
</body>
</html>
<body>
بدنه سند یا محتوای اصلی صفحه وب سایت را ایجاد می‌کند.
مثال:
<!DOCTYPE html>
<html lang="en">
<head>
<title> عنوان صفحه وب سایت</title>
</head>
<body>
<h1>این یک هدینگ است</h1>
<p>این یک پاراگراف است.</p>
</body>
</html>
<h1> - <h2>
برای تعریف عنوان ها یا سر تیترها در یک سند اچ تی ام ال استفاده می شود.
مثال:
<!DOCTYPE html>
<html lang="en">
<head>
<title>عنوان صفحه وب سایت</title>
</head>
<body dir="rtl">
<h1>.این یک هدینگ اصلی است</h1>
<h2>این یک هدینگ فرعی است.</h2>
<h3>.این یک هدینگ فرعی است</h3>
<h4>.این یک هدینگ فرعی است</h4>
<h5>این یک هدینگ فرعی است.</h5>
<h6>این یک هدینگ فرعی است.</h6>
</body>
</html>
<p>
یک پاراگراف را تعریف می‌کند.
<br>
برای ایجاد شکستگی در خط و پاراگراف یا رفتن به سطر جدید در صفحه وب استفاده می‌شود.
مثال:
<!DOCTYPE html>
<html lang="en">
<head>
<title>عنوان صفحه وب سایت</title>
</head>
<body dir="rtl">
<p>
<br>
آموزش
<br>
اچ تی ام ال
<br>
5
</p>
</body>
</html>
<hr>
با استفاده از این تگ می‌توان یک خط افقی برای جدا کردن بخش‌ها از یکدیگر ایجاد کرد.
مثال:
<!DOCTYPE html>
<html lang="en">
<body dir=”rtl”>
<h2>html</h2>
<p> اچ تی ام ال 5 یک زبان نشان گذاری ابرمتن است.</p>
<hr>
<h2>css</h2>
<p>زبانی برای استایل دهی به صفحات وب است. </p>
<hr>
<h2>Java Script</h2>
<p>زبانی سطح بالا برای ایجاد صفحات وب پویا است.</p>
</body>
</html>
<!--><-->
برای کامنت گذاری در سند اچ تی ام ال استفاده می‌شود.
مثال:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body dir="rtl">
<!-->این یک کامنت در مورد تگ پاراگراف است. کامنت ها در مرورگر نمایش داده نمی شوند.<-->
<p>این یک تگ پاراگراف است</p>
</body>
</html>
در ادامه تگ های اچ تی ام ال HTML که برای قالب بندی صفحه به کار می‌روند، می‌آموزید.
تگ های قالب بندی:
<abbr>
مخفف‌ها یا کلمات اختصاری را در صفحه وب تعریف می‌کند.
مثال:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p><abbr title=”World Health Organization”>WHO</abbr>was founded in 1948</p>
</body>
</html>
<address>
اطلاعات تماس نویسنده یا صاحب سند اچ تی ام ال را تعریف می‌کند.
مثال:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>The address element</h1>
<address>
Written by shahriar<br>
Email:Example@gmail.com<br>
my site:Example.com<br>
my location:iran<br>
</address>
</body>
</html>
<b>
برای bold یا توپر کردن متن استفاده می شود.(بدون هیچ ارزش محتوایی)
مثال:
<!DOCTYPE html>
<html>
<body dir="rtl">
<p>مرکز شهر خراسان رضوی - <b>مشهد</b>است.</p>
</body>
</html>
<bdi>
بخشی از متن را انتخاب می کند و برای آن جهت تعریف می‌کند.
مثال:
<!DOCTYPE html>
<html>
<body dir="rtl">
<p>سلام من یک سایت آموزشی هستم.</p>
<p>سلام من یک <bdi>سایت آموزشی</bdi> هستم</p>
</body>
</html>
<bdo>
متن را برعکس می کند.
مثال:
<!DOCTYPE html>
<html>
<body>
<p>
<bdo dir="rtl">tehran</bdo>
</p>
<p>
<bdo dir="ltr">تهران</bdo>
</p>
</body>
</html>
<blockquote>
نقل قول‌هایی که از یک منبع خارجی نقل شده است را تعریف می‌کند.
مثال:
<!DOCTYPE html>
<html>
<body dir=”rtl”>
<p>در اینجا نقل قولی از شهریار آورده شده است:</p>
<blockquote cite="http://www.exampel.com">
از کوری چشم فلک امشب قمر اینجاست
آری قمر امشب به خدا تا سحر اینجاست
</blockquote>
</body>
</html>
<cite>
نام یک اثر خلاقانه (مانند یک کتاب، یک شعر، یک آهنگ، یک فیلم، یک نقاشی، یک مجسمه و غیره) را تعریف می‌کند. متن موجود در تگ <cite> معمولا به صورت ایتالیک ارائه می‌شود.
مثال:
<!DOCTYPE html>
<html>
<body>
<img src="img_the_scream.jpg" width="220" height="277" alt="The Scream">
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
</body>
</html>
<code>
کدها یا دستورات اچ تی ام را در صفحه وب قرار می‌دهد. محتوای داخل این تگ با فونت monospace پیش فرض مرورگر نمایش داده می‌شود.
<!DOCTYPE html>
<html>
<body>
<p>The HTML <code>button</code> tag defines a clickable button.</p>
<p>The CSS <code>background-color</code> property defines the background color of an element.</p>
</body>
</html>
<del>
متنی را از یک سند html حذف می کند(روی آن خط می‌کشد.)
<!DOCTYPE html>
<html>
<body dir="rtl">
<p> رنگ دلخواه من قرمز است نه<del>آبی</del></p>
</body>
</html>
<dfn>
اصطلاحی که قرار است در محتوا تعریف شود را مشخص می‌کند.
مثال:
<!DOCTYPE html>
<html>
<body>
<p><dfn>HTML</dfn> is the standard markup language for creating web pages.</p>
</body>
</html>
<em>
از این تگ می‌توان برای تاکید بر متن یا کلمه استفاده کرد. محتوای داخل این تگ معمولا به صورت مورب نمایش داده می‌شود. (دارای ارزش محتوایی است.)
مثال:
<!DOCTYPE html>
<html>
<body dir="rtl">
<p>لطفا<em>تمامی</em>فیلدها را پر کنید.</p>
</body>
</html>
<i>
برای کج/ ایتالیک کردن متن استفاده می‌شود.
مثال:
<!DOCTYPE html>
<html>
<body dir="rtl">
<i>سلام این یک سایت آموزشی است.</i>
</body>
</html>
<ins>
زیر محتوا خط می‌کشد. (دارای ارزش محتوایی است.)
مثال:
<!DOCTYPE html>
<html>
<body dir="rtl">
<p>رنگ این متن <ins>قرمز</ins>شود.</p>
</body>
</html>
<kbd>
برای تعریف ورودی های صفحه کلید یا Keyboard Input در صفحه وب استفاده می‌شود.
مثال:
<!DOCTYPE html>
<html>
<body dir="rtl">
<p>برای حذف یک مورد <kbd>Delete</kbd>را فشار دهید.</p>
</body>
</html>
<mark>
بخشی از متن را هایلایت می‌کند.
مثال:
<!DOCTYPE html>
<html>
<body dir="rtl">
<p بخش‌های <mark>مهم</mark>قوانین استفاده از وب سایت را به دقت مشاهده کنید.</p>
</body>
</html>
<meter>
برای نمایش و ارائه اطلاعات عددی به صورت گیج اندازه‌گیری استفاده می‌شود.
مثال:
<!DOCTYPE html>
<html>
<body>
<p>A: <meter min="0" max="100" low="20" high="90" value="95"></meter></p>
<p>B: <meter min="0" max="100" low="20" high="90" value="50"></meter></p>
<p>C: <meter min="0" max="100" low="20" high="90" value="19"></meter></p>
</body>
</html>
<pre>
برای نمایش متن سفارشی یا مثلا یک متن با حفظ فرمت‌ها و تنظیمات قالب استفاده می‌شود.
مثال:
<!DOCTYPE html>
<html>
<body dir="rtl">
<pre>
این یک نمونه متن فرمت‌دار است.
فضاها حفظ می‌شوند.
تب‌ها نیز حفظ می‌شوند.
این یک سطر جدید است.
</pre>
</body>
</html>
<progress>
برای نمایش میزان درصد پیشرفت کار (پروژه و…) استفاده می‌شود.
مثال:
<!DOCTYPE html>
<html>
<body>
میزان پیشرفت پروژه:
<progress id="file" value="32" max="100"> 32% </progress>
</body>
</html>
<q>
نقل قول کوتاهی را ایجاد می‌کند.
مثال:
<!DOCTYPE html>
<html>
<body dir="rtl">
<p>شعار روز جهانی محیط زیست 2022:
<q>تنها یک زمین</q>
است.</p>
</body>
</html>
<s>
بر روی یک متن خط می کشد.(به معنی اینکه آن متن دیگر صحیح نیست.)
مثال:
<!DOCTYPE html>
<html>
<body dir="rtl">
<p>این یک سایت<s>آشپزی</s>آموزشی می باشد.</p>
</body>
</html>
<samp>
خروجی یک برنامه کامپیوتری را در صفحه نمایش می‌دهد.
مثال:
<!DOCTYPE html>
<html>
<body dir=”rtl”>
<p>Message from my computer:</p>
<p><samp>File not found.<br>Press F1 to continue</samp></p>
</body>
</html>
<small>
اندازه متن را کمی کوچکتر نمایش می‌دهد.
مثال:
<!DOCTYPE html>
<html>
<body>
<p>This is some normal text.</p>
<p><small>This is some smaller text.</small></p>
</body>
</html>
<strong>
یک متن را برجسته یا توپر می‌کند. (متن دارای ارزش محتوایی است.)
مثال:
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><strong>This text is important!</strong></p>
</body>
</html>
<sub>
متن زیر نویس را تعریف می‌کند(مثل اندیس) و معمولا با فونت کوچکتر نمایش داده می‌شود. متن زیرنویس را می‌توان برای فرمول‌های شیمیایی مانند H2O استفاده کرد.
مثال:
<!DOCTYPE html>
<html>
<body dir="rtl">
<p>این یک سایت<sub>آموزشی</sub> است.</p>
</body>
</html>
<sup>
متن بالا نویس را تعریف می کند (مثل توان) و معمولا با فونت کوچکتر نمایش داده می‌شود.
مثال:
<!DOCTYPE html>
<html>
<body dir="rtl">
<p>این یک سایت<sup>آموزشی</sup> است.</p>
</body>
</html>
<template>
در هنگام بارگذاری صفحه محتوا را مخفی می‌کند.
مثال:
<!DOCTYPE html>
<html>
<body>
<p>Click the button below to display the hidden content from the template element.</p>
<button onclick="showContent()">Show hidden content</button>
<template>
<h2>Flower</h2>
<img src="img_white_flower.jpg" width="214" height="204">
</template>
<script>
function showContent() {
let temp = document.getElementsByTagName("template")[0];
let clon = temp.content.cloneNode(true);
document.body.appendChild(clon);
}
</script>
</body>
</html>
<time>
یک زمان (یا تاریخ) خاص را تعریف می‌کند.
مثال:
<!DOCTYPE html>
<html>
<body dir="rtl">
<p>این یک سایت آموزشی است که در <time datetime="1402-11-10">jan 2023</time> طراحی شده است.</p>
</body>
</html>
<u>
برای خط کشیدن زیر یک متن استفاده می‌شود.
مثال:
<!DOCTYPE html>
<html>
<body dir="rtl">
<p>این یک سایت <u>آموزشی</u>است.</p>
</body>
</html>
<var>
برای تعریف یک متغیر در برنامه نویسی یا در یک عبارت ریاضی استفاده می‌شود. محتوای داخل این تگ معمولا به صورت مورب نمایش داده می‌شود.
مثال:
<!DOCTYPE html>
<html>
<body dir="rtl">
<body>
<p>سلام دوستان، من برای عملیات ریاضی اول یک متغیر به نام <var>sum</var> تعریف کردم بعدش یه متغیر دیگه به نام <var>mean</var></p>
</body>
</html>
<wbr>
محلی مناسب را تعیین می‌کند که از آنجا به بعد خط شکسته شده و به سطر بعدی برود.
مثال:
<!DOCTYPE html>
<html>
<body>
<p>To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object.</p>
</body>
</html>
در قسمت بعد به دیگر تگها با دسته بندی زیر می‌پردازیم:
- تگهای مربوط به ساخت فرم
- تگهای مربوط به ساخت عکس
- تگ های مربوط به ساخت صدا/ویدئو
- تگهای مربوط به لینک‌سازی
- تگهای مربوط به لیست
- تگهای مربوط به ساخت جدول
- تگهای مربوط به ساخت استایل‌ها و سیمانتک‌ها
- تگهای مربوط به برنامه نویسی
پیام بگذارید.