اچتیامال/فهرست برچسبها
| مقدمه | بندها | قلم | پیوند | تصاویر | رسانهها |
| فریم | جدولبندی | یادداشتها | تقسیمبندی (div) | فهرستبندی | رویدادها |
| سربرگ (هدر) | پابرگ (فوتر) | پیوند ناوبری | سبکها | فهرست تگها | سرمتنها |
| عنصرها |
مقدمه
[ویرایش]در HTML، برچسبها (تگها) پایهٔ اصلی ایجاد ساختار صفحات وب هستند. هر تگ هدف خاصی دارد، مانند تعریف یک تیتر، پاراگراف، جدول، تصویر یا فرم. در این بخش، فهرستی کامل از برچسبهای پرکاربرد HTML به همراه توضیحات، دستهبندیها و نمونههای استفاده ارائه میشود.
ساختار کلی تگها
[ویرایش]هر تگ HTML معمولاً از دو بخش آغاز و پایان تشکیل شده است:
<tagname>محتوا</tagname>
برخی از تگها خودبسته هستند، مانند <br> یا <img>.
فهرست تگها بر اساس نوع
[ویرایش]۱. ساختار پایه
[ویرایش]برچسبهای اصلی برای تعیین ساختار کلی صفحه:
| تگ | توضیح | مثال |
|---|---|---|
<!DOCTYPE> |
مشخصکنندهٔ نوع سند HTML | <!DOCTYPE html>
|
<html> |
ریشهٔ صفحه HTML |
<html lang="fa">...</html>
|
<head> |
بخش تنظیمات، متا، لینکها |
<head><title>عنوان</title></head>
|
<body> |
محتوای قابلمشاهده صفحه | <body>...
|
۲. برچسبهای متنی
[ویرایش]برای ساختاردهی به متن و محتوا استفاده میشوند:
| تگ | توضیح | مثال |
|---|---|---|
<h1> تا <h6> |
تیترها از بزرگ تا کوچک | <h1>تیتر اصلی</h1>
|
<p> |
پاراگراف | <p>یک متن</p>
|
<strong> |
متن مهم (بولد با معنا) | <strong>مهم!</strong>
|
<em> |
تأکید (کج با معنا) | <em>تأکید</em>
|
<br> |
خط جدید (بدون پایان) | متن اول<br>متن دوم
|
۳. برچسبهای فهرستسازی
[ویرایش]| تگ | توضیح | مثال |
|---|---|---|
<ul> |
فهرست نامرتب | <ul><li>آیتم</li></ul>
|
<ol> |
فهرست مرتب | <ol><li>اول</li></ol>
|
<li> |
آیتم فهرست | داخل ul یا ol
|
۴. برچسبهای پیوند و رسانه
[ویرایش]| تگ | توضیح | مثال |
|---|---|---|
<a> |
پیوند (لینک) | <a href="page.html">کلیک کنید</a>
|
<img> |
تصویر | <img src="image.jpg" alt="توضیح">
|
<audio> |
صدای جاسازیشده | <audio controls src="sound.mp3">
|
<video> |
ویدئو جاسازیشده | <video controls src="movie.mp4">
|
۵. فرمها و ورودیها
[ویرایش]| تگ | توضیح | مثال |
|---|---|---|
<form> |
فرم HTML | <form action="/submit">...</form>
|
<input> |
ورودی متنی، رمز و ... | <input type="text">
|
<textarea> |
ورودی چندخطی | <textarea>...
|
<button> |
دکمه کلیک | <button>ارسال</button>
|
۶. جدولها
[ویرایش]| تگ | توضیح | مثال |
|---|---|---|
<table> |
جدول | <table>...</table>
|
<tr> |
ردیف جدول | <tr>...</tr>
|
<td> |
خانه جدول (ستون معمولی) | <td>مقدار</td>
|
<th> |
خانه تیتر جدول | <th>ستون</th>
|
۷. عناصر معنایی و ساختاری (Semantic Tags)
[ویرایش]برای بهبود سئو و معنابخشی به ساختار صفحه.
| تگ | توضیح | کاربرد در سئو |
|---|---|---|
<header> |
سربرگ صفحه یا بخش | برای عنوان و منوها |
<footer> |
پایین صفحه یا بخش | برای اطلاعات تماس، کپیرایت |
<section> |
بخش معنایی از محتوا | مانند بخش اخبار، محصولات و ... |
<article> |
محتوای مستقل مثل پست وبلاگ | مناسب برای ساختاردهی محتواهای تکی |
<nav> |
ناوبری و لینکهای اصلی سایت | کمک به سئو و دسترسیپذیری |
نکات مهم
[ویرایش]- استفاده از تگهای معنایی باعث فهم بهتر محتوای شما توسط موتورهای جستجو میشود.
- برخی از تگها مانند
<b>و<i>تنها ظاهری هستند، بهتر است به جای آنها از<strong>و<em>برای معنا استفاده شود. - از تگهای منسوخشده مانند
<font>،<:center>و ... استفاده نکنید.
جمعبندی
[ویرایش]تگهای HTML ابزارهایی هستند که به کمک آنها میتوان ساختار صفحات وب را تعریف کرد. با شناخت درست از هر تگ و کاربرد آن میتوان صفحات قابلفهم، قابلدسترس و سئوپسند ساخت.
مطالعهٔ بیشتر: