هر صفحه وبی که باز می‌کنیم، از زبان HTML برای ساختاردهی و نمایش محتوا استفاده کرده است. HTML با استفاده از تگ‌ها به ما امکان می‌دهد که عناصر موجود در صفحه وب را در قالبی منظم به نمایش درآوریم. در این مقاله، به بررسی لیست تگ های HTML و کاربردهای آن‌ها می‌پردازیم تا قدمی مؤثر در مسیر یادگیری این زبان پایه‌ای برداریم. با ما همراه باشید.
مقدمه
در دنیای دیجیتال امروز، صفحات وب یکی از مهم‌ترین ابزارهای ارتباطی و اطلاعاتی به شمار می‌آیند. هر صفحه وب که مشاهده می‌کنیم، از پایه و اساس به کمک زبانی به نام HTML ساخته شده است. اچ تی ام ال به عنوان زبان اصلی برای ساختاردهی و نمایش محتوای وب به کار می‌رود و به توسعه‌دهندگان اجازه می‌دهد تا عناصر مختلف را به صورت سازمان‌یافته و قابل نمایش در مرورگرها ایجاد کنند. آشنایی با تگ‌های HTML برای هر فردی که قصد یادگیری توسعه وب یا بهبود درک خود از نحوه کارکرد صفحات وب را دارد، یک ضرورت است.
HTML چیست؟
اچ تی ام ال (HyperText Markup Language) زبان نشانه‌گذاری استانداردی است که برای ایجاد ساختار و نمایش محتوا در صفحات وب به کار می‌رود. این زبان از تگ‌ها یا برچسب‌ها استفاده می‌کند که به مرورگر می‌گویند چگونه هر بخش از محتوا (مثل عنوان‌ها، پاراگراف‌ها، تصاویر و لینک‌ها) نمایش داده شود. ساختار اچ تی ام ال شامل تگ‌های اصلی مانند <head> ،<html> و <body> است که به مرورگرها کمک می‌کنند تا صفحه را به شکلی سازماندهی شده و قابل درک برای کاربران نمایش دهند.
تگ‌های HTML می‌توانند ویژگی‌هایی (attributes) داشته باشند که اطلاعات اضافی برای نمایش بهتر محتوا فراهم می‌کنند. این ویژگی‌ها به طراحی دقیق‌تر و قابل‌کنترل‌تر صفحه کمک می‌کنند. HTML به تنهایی برای نمایش ساده صفحات وب مناسب است، اما برای استایل‌دهی بهتر از زبان CSS و برای افزودن تعامل از زبان جاوااسکریپت نیز در کنار HTML استفاده می‌شود. با استفاده از این ۳ زبان در کنار یگدیگر می‌توان قالب‌های آماده HTML طراحی نمود و در بیزینس و معرفی خدمات خود استفاده کرد.
لیست تگ های HTML
به کمک تگ‌ها، می‌توانیم ساختاری را مشخص کنیم که هر بخش از محتوا موجود در صفحه وب چه نقشی داشته باشد. این ساختار به مرورگرها کمک می‌کند تا بفهمند هر عنصر چه معنایی دارد و چگونه باید آن را به کاربر نمایش دهند. مرورگرها این کدها را تجزیه و تحلیل کرده و در نهایت به صورت محتوای گرافیکی قابل فهم برای کاربر به نمایش می‌گذارد. اگر بخواهیم از پایه‌ترین لیست تگ های HTML شروع کنیم ابتدا باید به سراغ تگ‌های ساختاری برویم. در ادامه تمامی تگ‌های مهم HTML را توضیح خواهیم داد.
تگ های ساختاری
تگ‌های ساختاری HTML، اساس و چارچوب اصلی هر صفحه وب را تشکیل می‌دهند و به مرورگرها کمک می‌کنند که بخش‌های مختلف صفحه را شناسایی و به‌درستی نمایش دهند. به طور کلی ساختار پایه هر صفحه وب به صورت زیر می‌باشد:
<!DOCTYPE html>
<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>
<h1>عنوان اصلی</h1>
<p>اینجا یک پاراگراف قرار دارد.</p>
</body>
</html>
اگر بخواهیم این ساختار را تشریح کنیم، توضیحات هر تگ به صورت زیر خواهد بود.
تگ <DOCTYPE html!>
تگ <DOCTYPE html!> در ابتدای هر سند HTML قرار می‌گیرد و به مرورگر اعلام می‌کند که نسخه HTML به کار رفته در این سند، HTML5 است. این اعلان باعث می‌شود مرورگر، صفحه را در حالت استاندارد (Standard Mode) نمایش دهد و تفسیر کند. در گذشته، مرورگرها از حالت‌های مختلفی برای تفسیر کد استفاده می‌کردند که ممکن بود باعث ناسازگاری‌ها و مشکلاتی در نمایش صفحات شود.
با تعریف <DOCTYPE html!> در ابتدای سند، مرورگر به‌طور واضح متوجه می‌شود که کد بر اساس استاندارد HTML5 نوشته شده است و آن را مطابق با این استاندارد تفسیر می‌کند. به طور خلاصه، <DOCTYPE html!> از سری لیست تگ های HTML تضمین می‌کند که صفحه به‌درستی و بدون ناسازگاری در مرورگرهای مختلف نمایش داده شود.
تگ <html>
این تگ، ریشه یا عنصر اصلی هر سند HTML است و تمام کدهای صفحه باید درون آن قرار بگیرند. این تگ نشان می‌دهد که سند HTML شروع می‌شود. تگ <html> معمولاً شامل دو بخش اصلی یعنی <head> و <body> است.
تگ <head>
تگ <head> در HTML برای قرار دادن اطلاعات متا، فایل‌های پیوست شده و تنظیمات مربوط به صفحه استفاده می‌شود. این بخش در صفحه وب قابل مشاهده نیست و هدف اصلی آن، فراهم کردن اطلاعاتی است که مرورگرها و موتورهای جستجو به آن نیاز دارند، اما به کاربران نمایش داده نمی‌شود.
درون تگ <head> برخی تگ‌های دیگر نیز قرار می‌گیرد. مانند:
- <meta>: تگ‌های <meta> اطلاعات متا مانند charset (کدگذاری کاراکترها) و توضیحات صفحه را فراهم می‌کنند. این اطلاعات برای موتورهای جستجو و مرورگرها اهمیت دارند.
- <title>: تگ <title> عنوان صفحه وب را تعیین می‌کند که در نوار عنوان مرورگر یا تب نمایش داده می‌شود. این عنوان برای SEO (بهینه‌سازی موتور جستجو) نیز مهم است.
- <link>: اگر می‌خواهید لینک به فایل‌های CSS خارجی بدهید، باید از تگ <link> برای پیوند دادن این فایل‌ها در تگ <head> استفاده کنید.
- <script>: اگر می‌خواهید فایل‌های جاوااسکریپت به صفحه وب اضافه کنید، می‌توانید آن‌ها را در تگ <head> لینک کنید، هرچند معمولاً بهتر است که فایل‌های جاوااسکریپت را در پایین صفحه (قبل از بسته شدن تگ <body/>) قرار دهید.
نمونه کد تگ <head> به صورت زیر می‌تواند باشد:
<head>
<meta charset="UTF-8">
<meta name="description" content="این یک توضیح کوتاه برای صفحه است">
<title>عنوان صفحه</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
تگ <body>
تگ <body> در HTML بخشی است که محتوای اصلی یک صفحه وب را شامل می‌شود و هر آنچه که کاربر در مرورگر می‌بیند، در این بخش قرار می‌گیرد. درون تگ <body> می‌توان انواع مختلف عناصر HTML مانند متون، تصاویر، ویدیوها، لینک‌ها، فرم‌ها، جداول و موارد دیگر را قرار داد. دیگر تگ‌ها در داخل این تگ قرار می‌گیرند.
تگ های متنی و عنوان ها
هر صفحه وبی از متون و عناوین مطالب ساخته شده است. در HTML، تگ‌های عنوان و تگ‌های متنی ابزارهایی برای نمایش انواع مختلف محتوا و متن‌ها هستند که مرورگرها آن‌ها را برای کاربران به نمایش درمی‌آورند. هرکدام از این تگ‌ها کاربردهای خاصی دارند و به ایجاد ساختار و خوانایی بیشتر صفحه کمک می‌کنند. در ادامه لیست تگ های HTML تگ‌های مرتبط متنی را معرفی خواهیم کرد.
تگ‌های عنوان: <h1> تا <h6>
تگ‌های عنوان برای نمایش عناوین و سرفصل‌ها به کار می‌روند. این تگ‌ها به بهینه‌سازی سئو و سازماندهی محتوا نیز کمک می‌کنند، زیرا موتورهای جستجو از این ساختار برای فهمیدن سلسله‌مراتب محتوا استفاده می‌کنند. هرچه شماره تگ کوچکتر باشد، اهمیت و اندازه آن بیشتر است:
- <h1>: عنوان اصلی و بزرگ‌ترین عنوان صفحه که معمولاً یک‌بار استفاده می‌شود.
- <h2>: عنوان سطح دوم، برای زیرعنوان‌های مهم.
- <h3> تا <h6>: عنوان‌های کوچکتر که هرکدام با اندازه کوچکتر نمایش داده می‌شوند و برای جزئیات و بخش‌های کم‌اهمیت‌تر کاربرد دارند.
تگ های متنی
این تگ‌ها ابزارهای اصلی برای سازماندهی و استایل‌دهی متن در HTML هستند و در کنار هم، ساختاری خوانا و مرتب به صفحه وب می‌دهند.
- تگ <p>: برای نمایش پاراگراف‌های متن استفاده می‌شود. متن‌های طولانی معمولاً درون تگ <p> قرار می‌گیرند و این تگ به‌طور پیش‌فرض فضای مناسبی بین پاراگراف‌ها ایجاد می‌کند. مثال:
<p>این یک پاراگراف نمونه است.</p>
- تگ <span>: برای گروه‌بندی و استایل‌دهی بخش‌های کوچکی از متن داخل سایر تگ‌ها به کار می‌رود، اما خودش تاثیری بر ساختار متن ندارد. معمولاً برای تغییر رنگ، اندازه یا استایل خاصی از متن در CSS استفاده می‌شود. مثال:
<p>این متن شامل <span style="color: red;">متنی قرمز</span> است.</p>
- تگ <br>: یک تگ خط‌شکن (Line Break) است که باعث می‌شود متن از خط بعدی شروع شود. این تگ تنها یک خط‌شکن ایجاد می‌کند و معمولاً در جایی که نیازی به پاراگراف کامل نیست به کار می‌رود. مثال:
<p>این متن در یک خط است.<br>و این بخش در خط بعدی.</p>
- تگ <hr>: تگ افقی یا Horizontal Rule که یک خط افقی در صفحه ایجاد می‌کند. از این تگ برای جدا کردن بخش‌های مختلف یک محتوا یا تاکید بر تغییر موضوع استفاده می‌شود. مثال:
<p>این یک بخش از متن است.</p> <hr> <p>این بخش، پس از یک خط افقی نمایش داده می‌شود.</p>
تگ های تصویر و چندرسانه‌ای
در HTML، تگ‌های تصویر و چندرسانه‌ای به ما کمک می‌کنند تا محتوای تصویری و ویدیویی را به صفحات وب اضافه کنیم. این تگ‌ها نقش مهمی در جذاب‌تر و تعاملی‌تر کردن صفحات وب ایفا می‌کنند و امکان نمایش تصاویر، ویدیوها و فایل‌های صوتی را فراهم می‌کنند. در ادامه از مقاله لیست تگ های HTML، تگ‌های اصلی چندرسانه‌ای را معرفی می‌کنیم.
تگ <img>
تگ <img> برای نمایش تصاویر در صفحات وب استفاده می‌شود. این تگ خودبسته (self-closing) است، به این معنی که نیازی به تگ بسته (<img/>) ندارد. ویژگی‌های مهم این تگ شامل:
- src: مسیر یا آدرس تصویر را مشخص می‌کند (URL یا مسیر محلی).
- alt: توضیح متنی برای تصویر فراهم می‌کند. این توضیح در صورتی که تصویر بارگذاری نشود یا برای کمک به دسترسی‌پذیری استفاده می‌شود.
- width و height: ابعاد تصویر را تعیین می‌کنند.
مثال برای تگ تصویر:
<img src="picture/image.jpg" alt="توضیح تصویر" width="300" height="200">
تگ <video>
تگ <video> برای اضافه کردن ویدیو به صفحه استفاده می‌شود. این تگ معمولاً دارای یک تگ بسته و گزینه‌های کنترلی مانند پخش، توقف و تنظیم صداست. ویژگی‌های مهم این تگ شامل:
- src: مسیر فایل ویدیو را مشخص می‌کند.
- controls: کنترل‌های پخش ویدیو را فعال می‌کند.
- autoplay: پخش خودکار ویدیو هنگام بارگذاری صفحه.
- loop: ویدیو را پس از اتمام، به‌صورت خودکار از ابتدا پخش می‌کند.
- muted: ویدیو را به صورت بی‌صدا پخش می‌کند.
مثال برای تگ ویدیو:
<video src="New Folder/video.mp4" controls width="640" height="360">
مرورگر شما از پخش ویدیو پشتیبانی نمی‌کند.
</video>
تگ <audio>
تگ <audio> برای افزودن فایل‌های صوتی به کار می‌رود و دارای ویژگی‌های مشابه تگ <video> است. مثال:
<audio src="Songs/audio.mp3" controls>
مرورگر شما از پخش صوتی پشتیبانی نمی‌کند.
</audio>
تگ های جدول
تگ‌های جدول در HTML برای نمایش داده‌ها به صورت سازمان‌یافته و در قالب ردیف‌ها و ستون‌ها استفاده می‌شوند. با استفاده از تگ‌های جدول، می‌توانیم اطلاعاتی مثل داده‌های آماری، فهرست‌ها، و هر نوع داده‌ای که به فرمت جدول نیاز دارد را به راحتی در صفحه وب نمایش دهیم. تگ‌های جدول شامل موارد زیر هستند:
تگ های اصلی جدول
- تگ <table>: این تگ، کل جدول را تعریف می‌کند و تمامی عناصر جدول باید درون این تگ قرار گیرند.
- تگ <tr>: این تگ (مخفف Table Row) برای ایجاد یک ردیف در جدول استفاده می‌شود. هر جدول می‌تواند چندین ردیف داشته باشد.
- تگ <th>: این تگ (مخفف Table Header) برای ایجاد یک سلول سربرگ (header) در جدول به کار می‌رود. متن داخل <th> به طور پیش‌فرض به صورت بولد و در مرکز سلول قرار می‌گیرد. این تگ برای عنوان ستون‌ها و ردیف‌ها استفاده می‌شود.
- تگ <td>: این تگ (مخفف Table Data) برای تعریف یک سلول داده‌ای در جدول استفاده می‌شود. سلول‌های داده به صورت پیش‌فرض به چپ تراز می‌شوند و شامل اطلاعات اصلی جدول هستند.
تگ های اضافی جدول
- تگ <caption>: این تگ برای افزودن یک عنوان به جدول استفاده می‌شود و به طور پیش‌فرض در بالای جدول نمایش داده می‌شود.
- تگ <thead> ،<tbody> و <tfoot>: این تگ‌ها به منظور ساختاردهی بیشتر به جدول به کار می‌روند.
- تگ <thead>: برای تعریف بخش سرآیند جدول (header).
- تگ <tbody>: برای بخش اصلی داده‌ها.
- تگ <tfoot>: برای بخش پانوشت یا انتهای جدول.
مثال برای تگ‌های جدول:
<table border="1">
<caption>لیست کارکنان</caption>
<thead>
<tr>
<th>نام</th>
<th>سن</th>
<th>شغل</th>
</tr>
</thead>
<tbody>
<tr>
<td>علی</td>
<td>۲۵</td>
<td>مهندس</td>
</tr>
<tr>
<td>فاطمه</td>
<td>۳۰</td>
<td>پزشک</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">اطلاعات نهایی</td>
</tr>
</tfoot>
</table>
تگ های فهرست
در میان لیست تگ های HTML، تگ‌های فهرست برای نمایش آیتم‌ها به صورت فهرست‌شده و سازمان‌یافته به کار می‌روند. این تگ‌ها به ما امکان می‌دهند تا داده‌ها یا موارد مختلف را به صورت شماره‌گذاری‌شده، غیر شماره‌گذاری‌شده، یا به شکل فهرست تعریفی نمایش دهیم. انواع اصلی فهرست‌ها شامل فهرست‌های مرتب (Ordered List)، فهرست‌های نامرتب (Unordered List)، و فهرست‌های تعریفی (Description List) هستند.
تگ <ol>
فهرست مرتب با استفاده از تگ <ol> ایجاد می‌شود و برای نمایش آیتم‌ها به صورت شماره‌گذاری‌شده (۱، ۲، ۳ و …) کاربرد دارد. هر آیتم درون یک تگ <li> قرار می‌گیرد که مخفف List Item یا آیتم فهرست است. همچنین تگ <ol> دارای یک ویژگی مهم است.
- type: نوع شماره‌گذاری را تعیین می‌کند و می‌تواند شامل ۱ (عدد)، A (حروف بزرگ)، a (حروف کوچک)، I (اعداد رومی بزرگ)، یا i (اعداد رومی کوچک) باشد.
مثال برای تگ فهرست مرتب:
<ol type="1">
<li>آیتم اول</li>
<li>آیتم دوم</li>
<li>آیتم سوم</li>
</ol>
تگ <ul>
فهرست نامرتب با استفاده از تگ <ul> ایجاد می‌شود و برای نمایش آیتم‌ها به صورت غیر شماره‌گذاری‌شده به کار می‌رود. در این نوع فهرست، از نشانه‌های مختلف (مثل دایره، مربع، یا دیسک) برای هر آیتم استفاده می‌شود. همچنین تگ <ul> دارای یک ویژگی مهم است.
- type: نوع نشانه را تعیین می‌کند که می‌تواند شامل disc (دایره پیش‌فرض)، circle (دایره توخالی)، و square (مربع) باشد.
مثال برای تگ فهرست نامرتب:
<ul type="circle">
<li>آیتم اول</li>
<li>آیتم دوم</li>
<li>آیتم سوم</li>
</ul>
تگ <dl>
فهرست تعریفی با استفاده از تگ‌های <dl> ،<dt> و <dd> ایجاد می‌شود و برای نمایش فهرست‌هایی به کار می‌رود که هر آیتم شامل یک عنوان و توضیح مرتبط با آن است. این فهرست برای نمایش اصطلاحات و تعاریف یا توضیحات کاربرد دارد.
- <dl>: تگ Description List کل فهرست تعریفی را مشخص می‌کند.
- <dt>: تگ Definition Term عنوان یا عبارت تعریف‌شده را مشخص می‌کند.
- <dd>: تگ Definition Description توضیح یا شرح مرتبط با عنوان را مشخص می‌کند.
مثال برای تگ فهرست تعریفی:
<dl>
<dt>HTML</dt>
<dd>یک زبان نشانه‌گذاری برای ایجاد ساختار صفحات وب است.</dd>
<dt>CSS</dt>
<dd>زبانی برای استایل‌دهی و طراحی صفحات وب است.</dd>
<dt>JavaScript</dt>
<dd>زبانی برنامه‌نویسی برای افزودن تعامل به صفحات وب است.</dd>
</dl>
تگ های لینک و ناوبری
در HTML، تگ‌های لینک و ناوبری برای ایجاد پیوند بین صفحات وب، بخش‌های مختلف یک صفحه، یا حتی منابع خارجی به کار می‌روند. این تگ‌ها، تجربه کاربر را در مرور صفحات وب بهبود می‌بخشند و امکان دسترسی سریع و آسان به محتواهای مختلف را فراهم می‌کنند. در ادامه لیست تگ های HTML این تگ‌ها را معرفی خواهیم کرد.
تگ <a>
تگ <a> (مخفف Anchor Tag)، برای ایجاد لینک استفاده می‌شود. این تگ می‌تواند کاربر را به صفحه‌ای دیگر، یک بخش خاص از همان صفحه، فایل‌های دانلودی، ایمیل‌ها، و غیره هدایت کند.
ویژگی‌های اصلی این تگ شامل موارد زیر هستند:
- href: آدرس مقصد لینک را تعیین می‌کند. این آدرس می‌تواند یک URL کامل، مسیر نسبی، یا لینک به یک بخش از همان صفحه باشد.
- target: نحوه باز شدن لینک را تعیین می‌کند؛ مقدار _blank لینک را در یک تب جدید باز می‌کند.
- title: متنی که هنگام قرارگیری موس روی لینک نمایش داده می‌شود.
مثال برای تگ لینک:
<a href="https://www.example.com" target="_blank">بازدید از وب‌سایت</a>
تگ <nav> برای بخش‌هایی از صفحه که شامل لینک‌های ناوبری هستند به کار می‌رود و به مرورگرها و موتورهای جستجو کمک می‌کند تا این بخش‌ها را به عنوان منوی ناوبری شناسایی کنند. تگ <nav> معمولاً لینک‌های اصلی سایت را که کاربر را به صفحات مختلف هدایت می‌کند، در بر می‌گیرد.
تگ‌های لینک و ناوبری اغلب به صورت ترکیبی در منوها، هدرها، و فوترها استفاده می‌شوند تا کاربران بتوانند به راحتی در بخش‌های مختلف سایت حرکت کنند. استفاده از این تگ‌ها در یک ساختار ناوبری منظم، دسترسی و تجربه کاربری را در سایت بهبود می‌بخشد. مثال:
<nav>
<ul>
<li><a href="#home">خانه</a></li>
<li><a href="#about">درباره ما</a></li>
<li><a href="#services">خدمات</a></li>
<li><a href="#contact">تماس با ما</a></li>
</ul>
</nav>
تگ های فرم و ورود داده‌ها
تگ‌های فرم در HTML برای ایجاد فرم‌های ورود داده‌ها به کار می‌روند و به کاربران این امکان را می‌دهند تا اطلاعاتی مانند نام، ایمیل، رمز عبور و سایر داده‌ها را وارد کنند و آن‌ها را به سرور ارسال کنند. فرم‌ها با استفاده از تگ‌های مختلف برای انواع ورودی‌ها ساخته می‌شوند که هر کدام به شکلی خاص از داده‌ها اختصاص دارند.
تگ <form>
تگ <form> یکی از اصلی‌ترین تگ‌ها در لیست تگ های HTML برای ایجاد فرم است. این تگ شامل سایر تگ‌های ورودی و گزینه‌های مختلف فرم است. برخی از ویژگی‌های مهم این تگ عبارتند از:
- action: آدرس URL که داده‌ها به آن ارسال می‌شوند.
- method: نحوه ارسال داده‌ها را مشخص می‌کند و معمولاً از روش‌های GET یا POST استفاده می‌شود. روش POST امن‌تر است و برای ارسال اطلاعات حساس مانند رمز عبور استفاده می‌شود.
مثال:
<form action="/submit_form" method="post">
<!-- سایر تگ‌ها -->
</form>
تگ <input>
تگ <input> برای ایجاد انواع مختلف ورودی‌ها به کار می‌رود و با ویژگی type نوع ورودی را تعیین می‌کند. تگ <input> انواع رایجی دارد که در ادامه به هرکدام همراه با مثال اشاره می‌کنیم:
- text: برای ورودی‌های متنی ساده. مثال:
<label for="name">نام:</label> <input type="text" id="name" name="name">
- email: برای دریافت آدرس ایمیل. مرورگرها به صورت خودکار ایمیل را اعتبارسنجی می‌کنند. مثال:
<label for="email">ایمیل:</label> <input type="email" id="email" name="email">
- password: برای ورودی‌های رمز عبور که به صورت مخفی نمایش داده می‌شوند. مثال:
<label for="password">رمز عبور:</label> <input type="password" id="password" name="password">
- number: برای ورودی اعداد. ویژگی‌های min و max می‌توانند محدوده مجاز را تعیین کنند. مثال:
<label for="age">سن:</label> <input type="number" id="age" name="age" min="1" max="100">
- date: برای انتخاب تاریخ. مثال:
<label for="birthday">تاریخ تولد:</label> <input type="date" id="birthday" name="birthday">
- checkbox: برای گزینه‌های چندگانه که هر کدام به صورت تیک‌خورده یا نخورده هستند. مثال:
<label><input type="checkbox" name="interests" value="sports">ورزش</label> <label><input type="checkbox" name="interests" value="music">موسیقی</label>
- radio: برای گزینه‌های چندگانه که فقط یک گزینه می‌تواند انتخاب شود. مثال:
<label><input type="radio" name="gender" value="male">مرد</label> <label><input type="radio" name="gender" value="female">زن</label>
- submit: برای ارسال فرم. مثال:
<input type="submit" value="ارسال">
تگ <textarea>
تگ <textarea> برای ورودی‌های متنی چندخطی استفاده می‌شود، مانند بخش توضیحات یا نظرات. این تگ دارای ویژگی‌هایی برای تنظیم اندازه و تعداد سطرها و ستون‌ها است. مثال:
<label for="comments">توضیحات:</label> <textarea id="comments" name="comments" rows="4" cols="50"></textarea>
تگ <select>
تگ <select> برای ایجاد منوهای کرکره‌ای (dropdown) به کار می‌رود و شامل تگ‌های <option> برای هر گزینه است. مثال:
<label for="country">کشور:</label>
<select id="country" name="country">
<option value="iran">ایران</option>
<option value="usa">آمریکا</option>
<option value="uk">انگلستان</option>
</select>
تگ <button> برای ایجاد دکمه‌ها در فرم استفاده می‌شود و می‌تواند علاوه بر ارسال فرم، برای انواع عملکردها و با استفاده از جاوااسکریپت به کار رود. مثال:
<button type="submit">ارسال فرم</button>
<button type="button" onclick="alert('سلام!')">کلیک کن</button>
تگ های مدرن HTML5
تگ‌های سمانتیک (Semantic) در HTML5 به تگ‌هایی گفته می‌شود که مفهوم و معنای خاصی را به مرورگر و موتورهای جستجو ارائه می‌دهند. این تگ‌ها به جای صرفاً تعریف ظاهر صفحه، به ساختار و محتوای صفحه وب معنا می‌بخشند، و فهم محتوای صفحات را برای موتورهای جستجو و کاربران تسهیل می‌کنند.
تگ‌های سمانتیک در لیست تگ های HTML شامل مواردی مانند <header> ،<footer> ،<section> ،<article> ،<aside> و <main> هستند. استفاده از این تگ‌ها در صفحه وب مزایایی دارد که عبارتند از:
- بهبود سئو: موتورهای جستجو بهتر می‌توانند ساختار صفحه و بخش‌های مختلف آن را درک کنند و از این طریق رتبه‌بندی سایت را بهبود دهند.
- دسترسی‌پذیری بهتر: این تگ‌ها کمک می‌کنند که ابزارهای کمکی مانند صفحه‌خوان‌ها بتوانند بهتر محتوای صفحه را برای کاربران دارای ناتوانی‌های بصری توضیح دهند.
- سازماندهی و خوانایی بهتر: کد HTML سمانتیک‌تر، خواندن و نگهداری کد را برای توسعه‌دهندگان آسان‌تر می‌کند.
استفاده از تگ‌های سمانتیک HTML5 به کد صفحات وب ساختار و معنا می‌بخشد و تجربه کاربری، دسترسی‌پذیری، و سئوی سایت را به طور کلی بهبود می‌دهد.
نتیجه گیری
آشنایی با لیست تگ های HTML برای هر فردی که قصد ورود به دنیای طراحی و توسعه وب را دارد، یک ضرورت است. این زبان ساده اما کاربردی به ما اجازه می‌دهد تا صفحات جذاب، خوانا و سازگار با موتورهای جستجو بسازیم. امیدواریم که این مقاله توانسته باشد راهنمای مفیدی برای یادگیری و استفاده از تگ‌های HTML ارائه دهد و انگیزه‌ای برای یادگیری بیشتر در این حوزه فراهم کند.
