آموزش تگ های HTML و ساختار صفحه وب
💡آشنایی با HTML
در
طراحی سایت با HTML، صفحه وب بر اساس ساختاری مشخص ساخته می شود. این ساختار از تگ هایی تشکیل شده که نوع محتوا، جایگاه آن و نحوه نمایش یا پردازش آن را برای مرورگر تعیین می کنند. آشنایی با تگ های HTML به شما کمک می کند کدها را بهتر بخوانید، صفحات استانداردتری بسازید و هنگام توسعه یا ویرایش سایت با اطمینان بیشتری عمل کنید.
📘هدف این راهنما
در این راهنما با تگ های پرکاربرد HTML مانند تگ های توضیحات، link، style، html، head، body، title، script، meta، a، img و تعدادی از تگ های متنی آشنا می شوید. برای هر گروه، کاربرد، نکته های مهم و نمونه کد را مرور می کنیم تا بتوانید ارتباط میان ساختار سند، محتوای صفحه و امکاناتی مانند پیوندها و تصاویر را بهتر درک کنید.
تگ توضیحات در HTML
📝کامنت HTML چیست؟
در این بخش از
آموزش HTML، تگ توضیحات یا کامنت را بررسی می کنیم. از کامنت برای نوشتن یادداشت در کد استفاده می شود؛ این یادداشت در صفحه وب نمایش داده نمی شود و به توسعه دهنده کمک می کند وظیفه بخش های مختلف را سریع تر تشخیص دهد.
⚠️نکته درباره کامنت ها
کامنت برای توضیح کد یا یادداشت موقت مناسب است، اما نباید اطلاعات محرمانه در آن قرار دهید؛ چون هر کسی که به کد منبع صفحه دسترسی داشته باشد می تواند آن را ببیند. برای نوشتن کامنت از نشانه های آغاز و پایان زیر استفاده کنید.
<!-- توضیحات وارد شده -->
🔎کاربرد عملی
برای نمونه، می توانید پیش از بخشی پیچیده از کد توضیح دهید که آن بخش مربوط به منوی سایت، فرم تماس یا قسمت پایانی صفحه است. این کار به ویژه در پروژه های گروهی و هنگام بازبینی کدهای قدیمی مفید است. برای آشنایی بیشتر، مطلب
تگ توضیحات را نیز ببینید.
تگ Link و اتصال فایل های بیرونی
🔗نقش تگ link
تگ
link در بخش head قرار می گیرد و برای معرفی ارتباط سند HTML با یک منبع بیرونی به کار می رود. رایج ترین استفاده آن اتصال فایل CSS است. این تگ محتوای قابل مشاهده ای در صفحه ایجاد نمی کند و در HTML به صورت تکی نوشته می شود.
<head>
<link rel="stylesheet" href="styles.css">
</head>
✅ویژگی های مهم
ویژگی rel نوع ارتباط فایل مقصد با سند را مشخص می کند و مقدار stylesheet برای فایل شیوه نامه به کار می رود. ویژگی href نیز نشانی فایل را تعیین می کند. تگ link برای ساخت پیوند قابل کلیک میان دو صفحه نیست؛ برای این کار باید از تگ a استفاده کنید.
تگ Style و روش های افزودن CSS
🎨تعیین ظاهر صفحه
با CSS می توانید رنگ، فاصله، اندازه و چیدمان عناصر را مشخص کنید. برای نوشتن CSS درون خود سند، از تگ style در head استفاده می شود. برای پروژه های بزرگ تر، معمولا نگهداری استایل ها در فایل جداگانه باعث نظم بیشتر و استفاده دوباره از قواعد می شود.
- استایل درون خطی: با ویژگی style روی یک عنصر نوشته می شود و معمولا برای تغییر محدود همان عنصر مناسب است.
- استایل داخلی: قواعد CSS در تگ style داخل بخش head قرار می گیرند و می توانند چندین عنصر همان صفحه را هدف بگیرند.
- استایل بیرونی: قواعد در فایلی مانند styles.css ذخیره می شوند و با تگ link به صفحه متصل می شوند.
<p style="color:white; border:1px solid red; background-color:blue; text-align:center;">متن پاراگراف</p>
⚠️پرهیز از استایل های پراکنده
اگر برای هر عنصر استایل های متعدد و پراکنده بنویسید، تغییر ظاهر سایت در آینده دشوارتر می شود. بهتر است قواعد مشترک را در فایل CSS بیرونی نگهداری کنید و از نام گذاری روشن برای کلاس ها کمک بگیرید.
ساختار تگ های HTML: html، head و body
🏗️قالب کلی سند
تگ html عنصر ریشه سند است و بیشتر تگ های صفحه درون آن قرار می گیرند. این تگ به مرورگر نشان می دهد سند از ساختار HTML پیروی می کند. در صفحات امروزی، ویژگی زبان مانند lang="fa" نیز به تگ آغازین html افزوده می شود تا زبان اصلی محتوا مشخص باشد.
🧭اطلاعات سند
تگ head پس از تگ html قرار می گیرد و اطلاعاتی درباره سند در خود جای می دهد. عنوان صفحه، متاتگ ها، اتصال فایل CSS و برخی اسکریپت ها معمولا در این بخش نوشته می شوند. محتوای head به صورت متن معمولی در بدنه صفحه دیده نمی شود، اما می تواند برای مرورگرها و موتورهای جستجو اهمیت داشته باشد.
🖥️محتوای قابل مشاهده
تگ body پس از head قرار می گیرد و محتوای اصلی صفحه مانند متن، تصویر، پیوند، فرم و بخش های مختلف رابط کاربری را در بر می گیرد. در HTML، فونت و رنگ را می توان با CSS مدیریت کرد؛ بنابراین ظاهر صفحه بهتر است با قواعد CSS کنترل شود، نه با ویژگی های قدیمی و منسوخ HTML.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>عنوان صفحه</title>
</head>
<body>
محتوای صفحه
</body>
</html>
تگ Title و عنوان صفحه
🏷️عنوانی برای مرورگر و نتایج جستجو
متنی که میان تگ
title قرار می گیرد، عنوان سند را مشخص می کند. این عنوان معمولا در زبانه مرورگر نمایش داده می شود و ممکن است در صفحه نتایج موتور جستجو نیز به عنوان پیوند قابل کلیک دیده شود. برای هر سند HTML یک عنوان روشن و منحصربه فرد بنویسید و آن را با موضوع همان صفحه هماهنگ کنید.
📌عنوان را بیش از حد کوتاه یا بلند نکنید
برای طول title عدد ثابتی که همیشه در همه نتایج نمایش داده شود وجود ندارد؛ عرض نمایش و دستگاه کاربر نیز اثرگذار است. عنوان را توصیفی، خوانا و متناسب با محتوای صفحه بنویسید و از تکرار بی دلیل کلیدواژه ها بپرهیزید.
<head>
<title>آموزش تگ های HTML</title>
</head>
تگ Script و اجرای کدهای JavaScript
⚙️افزودن رفتار تعاملی
تگ script برای قرار دادن یا بارگذاری کدهای JavaScript استفاده می شود. با این کدها می توان رفتارهای تعاملی مانند باز و بسته شدن منو، بررسی فرم یا به روزرسانی بخشی از صفحه را پیاده سازی کرد. کد داخلی میان تگ آغازین و پایانی script قرار می گیرد و فایل بیرونی را می توان با ویژگی src معرفی کرد.
<script>
console.log("سلام");
</script>
<script src="app.js"></script>
💡نکته سازگاری
در HTML جدید معمولا نیازی به نوشتن ویژگی type="text/javascript" برای اسکریپت های معمولی نیست. همچنین ویژگی charset که در نمونه های قدیمی برای script دیده می شد، روش معمول تعیین کدگذاری کل سند نیست؛ کدگذاری صفحه را با متاتگ charset در head مشخص کنید.
Meta Tag ها و اطلاعات صفحه
📄متاتگ چه کاری انجام می دهد؟
متاتگ ها در بخش head قرار می گیرند و اطلاعاتی درباره سند در اختیار مرورگرها و سامانه های دیگر می گذارند. متاتگ کدگذاری، توضیحات صفحه و برخی دستورهای مرتبط با نمایش یا پردازش سند از نمونه های رایج هستند. متاتگ به خودی خود محتوای قابل مشاهده ای در بدنه صفحه ایجاد نمی کند.
متاتگ نویسنده
<meta name="author" content="نام نویسنده">
متاتگ زبان و کدگذاری صفحه
<meta charset="UTF-8">
متاتگ توضیحات
<meta name="description" content="توضیح کوتاه و دقیق درباره محتوای صفحه">
✅توضیحات مفید و واقعی بنویسید
توضیحات صفحه باید به کاربر نشان دهد با کلیک روی نتیجه چه محتوایی می بیند. موتورهای جستجو ممکن است در بعضی شرایط متن دیگری از صفحه را نمایش دهند؛ بنابراین نوشتن توضیح مناسب مفید است، اما نمایش عین آن در همه نتایج تضمین نمی شود. استفاده از متاتگ keywords نیز معیار اصلی رتبه بندی موتورهای جستجوی امروزی نیست.
تگ a برای ساخت پیوند
🔗پیوند به صفحه یا بخش دیگر
نام تگ a از واژه anchor گرفته شده است. این تگ برای ایجاد پیوند به صفحه دیگر، فایل، نشانی ایمیل یا بخشی از همان صفحه استفاده می شود. متن یا محتوایی که میان تگ باز و بسته قرار می گیرد، بخش قابل کلیک پیوند است.
<a href="https://example.com">متن پیوند</a>
ویژگی های مهم تگ a
- href: نشانی مقصد پیوند را مشخص می کند. این نشانی می تواند کامل، نسبی یا شناسه بخشی از همان صفحه باشد.
- target: محل باز شدن مقصد را تعیین می کند. مقدار _self مقصد را در همان زبانه باز می کند و مقدار _blank معمولا آن را در زبانه تازه نمایش می دهد.
- title: می تواند اطلاعات تکمیلی درباره پیوند ارائه دهد، اما متن پیوند باید به تنهایی تا حد ممکن مقصد را برای کاربر روشن کند.
⚠️پیوند امن در زبانه جدید
اگر از target="_blank" برای پیوند به سایت دیگر استفاده می کنید، برای کاهش دسترسی صفحه مقصد به صفحه مبدا می توانید rel="noopener" را نیز در نظر بگیرید. متن پیوند را توصیفی بنویسید و از عبارت های مبهمی مانند «اینجا کلیک کنید» تا حد امکان پرهیز کنید.
📈پیوندها و تجربه کاربر
پیوندهای داخلی به کاربر کمک می کنند بخش های مرتبط سایت را پیدا کند و ارتباط میان صفحات را بهتر بشناسد. از متن طبیعی و مرتبط استفاده کنید؛ برای نمونه درباره
سئو بیشتر بخوانید یا با خدمات
خرید بک لینک آشنا شوید.
تگ img برای نمایش تصویر
🖼️افزودن تصویر به صفحه
تگ img برای قرار دادن تصویر در صفحه به کار می رود و تگ پایانی ندارد. ویژگی src نشانی تصویر را مشخص می کند و ویژگی alt متن جایگزین را در اختیار می گذارد. متن جایگزین به دسترس پذیری کمک می کند و در صورت بارگذاری نشدن تصویر نیز می تواند مفهوم آن را منتقل کند.
<img src="images/sample.jpg" alt="توضیح کوتاه درباره تصویر">
- src: مسیر فایل تصویر را وارد کنید و مطمئن شوید نشانی به فایل درست اشاره می کند.
- alt: تصویر را به صورت کوتاه و دقیق توصیف کنید. برای تصاویر تزئینی که اطلاعاتی به محتوا اضافه نمی کنند، مقدار خالی alt="" می تواند مناسب باشد.
- ابعاد و حجم: ابعاد تصویر را متناسب با محل نمایش انتخاب کنید و فایل را بهینه سازی کنید تا بارگذاری صفحه بی دلیل کند نشود.
⚡بهینه سازی تصویر
تصویرهای بسیار حجیم می توانند سرعت بارگذاری را کاهش دهند. اندازه مناسب، فشرده سازی و انتخاب قالب متناسب با نوع تصویر به بهبود عملکرد کمک می کند. متن alt را برای توصیف تصویر بنویسید، نه برای تکرار کلیدواژه ها.
تگ Fieldset و Legend در فرم ها
🧩گروه بندی کنترل های فرم
تگ
fieldset چند کنترل مرتبط فرم را در یک گروه قرار می دهد. این ساختار به خوانایی فرم کمک می کند و می تواند برای فناوری های کمکی نیز مفید باشد. تگ legend عنوان یا توضیح گروه را مشخص می کند و درون fieldset قرار می گیرد.
<fieldset>
<legend>اطلاعات تماس</legend>
<label for="email">ایمیل</label>
<input id="email" type="email">
</fieldset>
تگ های Center، Sub، Sup، Hr و B
تگ Center و وسط چین کردن محتوا
⚠️روش قدیمی و منسوخ
تگ center در HTML قدیمی برای وسط چین کردن محتوا به کار می رفت، اما در HTML امروزی منسوخ است. برای کنترل چینش از CSS استفاده کنید؛ برای نمونه می توانید با text-align: center متن یک بخش را وسط چین کنید.
تگ های Sub و Sup
✏️نمایش اندیس و توان
تگ sub متن را پایین تر از خط پایه نمایش می دهد و برای اندیس هایی مانند فرمول شیمیایی مناسب است. تگ sup متن را بالاتر از خط پایه قرار می دهد و برای نمایش توان یا نشانه های بالانویس کاربرد دارد.
<p>فرمول آب: H<sub>2</sub>O</p>
<p>توان: 2<sup>3</sup></p>
تگ Hr
➖جداکننده موضوعی
تگ hr یک جداکننده موضوعی در محتوا ایجاد می کند و معمولا به شکل خط افقی نمایش داده می شود. این تگ تکی است و برای جدا کردن بخش هایی با موضوع متفاوت به کار می رود، نه صرفا برای افزودن خط تزئینی در هر جای صفحه.
تگ B
🔤برجسته کردن متن
تگ b متن را از نظر ظاهری پررنگ می کند، اما به تنهایی معنای تاکید مهم را به متن اضافه نمی کند. اگر می خواهید بر اهمیت یک عبارت تاکید معنایی داشته باشید، استفاده از strong را بررسی کنید. انتخاب تگ باید با هدف محتوایی آن هماهنگ باشد.
تگ های P و Br برای متن
تگ P برای پاراگراف
📃ساختاردهی متن
تگ p برای تعریف یک پاراگراف به کار می رود. مرورگرها معمولا پیش و پس از پاراگراف فاصله ایجاد می کنند و CSS می تواند ظاهر و چینش متن را تنظیم کند. برای خوانایی بهتر، هر ایده مستقل را در پاراگرافی جدا بنویسید.
<p>این یک پاراگراف نمونه است.</p>
تگ Br برای رفتن به خط بعد
↵شکستن خط در یک متن
تگ br یک شکست خط ایجاد می کند و تگ پایانی ندارد. این تگ برای مواردی مانند نشانی پستی یا شعر که شکستن خط بخشی از شکل محتواست کاربرد دارد؛ برای ساخت فاصله میان پاراگراف ها بهتر است از پاراگراف جداگانه یا CSS استفاده کنید.
<p>نام: سارا<br>شهر: تهران</p>
تگ های H1 تا H6 برای تیترها
📚ساختار سلسله مراتبی محتوا
تگ های h1 تا h6 برای تعریف تیترها و زیرتیترها هستند. h1 بالاترین سطح عنوان و h6 پایین ترین سطح را نشان می دهد. اندازه ظاهری تیترها را می توان با CSS تغییر داد، اما انتخاب سطح باید بر اساس ساختار معنایی محتوا باشد، نه فقط اندازه ای که روی صفحه دیده می شود.
💡تیترها و سئو
تیترهای روشن به کاربران کمک می کنند محتوا را سریع تر مرور کنند و موضوع بخش ها را بفهمند. ساختار منظم و توصیفی می تواند درک صفحه را برای موتورهای جستجو نیز آسان تر کند، اما استفاده از تیترها به تنهایی رتبه بهتر را تضمین نمی کند. هر تیتر را با محتوای زیر آن مرتبط نگه دارید.
<h1>عنوان اصلی صفحه</h1>
<h2>عنوان بخش</h2>
<h3>عنوان زیربخش</h3>
جدول خلاصه تگ های پرکاربرد HTML
| تگ |
کاربرد اصلی |
نکته کاربردی |
| html |
عنصر ریشه سند |
زبان محتوا را می توان با lang تعیین کرد. |
| head |
اطلاعات سند و منابع جانبی |
title، meta و link معمولا اینجا قرار می گیرند. |
| body |
محتوای اصلی صفحه |
متن، تصویر، پیوند و فرم در آن قرار می گیرند. |
| a |
ساخت پیوند |
مقصد با ویژگی href مشخص می شود. |
| img |
نمایش تصویر |
src و alt را متناسب با تصویر وارد کنید. |
| p و br |
ساخت پاراگراف و شکست خط |
برای فاصله گذاری از br استفاده نکنید. |
| h1 تا h6 |
ساخت سلسله مراتب تیترها |
سطح عنوان را بر اساس ساختار محتوا انتخاب کنید. |
| script |
افزودن JavaScript |
کد داخلی یا فایل بیرونی را معرفی می کند. |
نکته های مهم برای نوشتن HTML بهتر
۱. از تگ مناسب برای هر محتوا استفاده کنید
1️⃣معنا را در اولویت قرار دهید
برای پاراگراف از p، برای پیوند از a و برای عنوان از تگ های heading استفاده کنید. انتخاب تگ معنایی باعث می شود ساختار صفحه برای کاربران، مرورگرها و ابزارهای کمکی قابل فهم تر باشد.
۲. ویژگی های هر تگ را درست بنویسید
2️⃣دقت در ویژگی ها
ویژگی های مهمی مانند href، src، alt و lang هرکدام کار مشخصی دارند. نام ویژگی ها و مقدارشان را دقیق وارد کنید و نشانی فایل یا پیوند را پس از ویرایش آزمایش کنید تا از درست بودن آن مطمئن شوید.
۳. به دسترس پذیری توجه کنید
3️⃣صفحه را برای افراد بیشتری قابل استفاده کنید
برای تصاویر متن جایگزین مناسب بنویسید، عنوان لینک ها را روشن انتخاب کنید و ساختار تیترها را منظم نگه دارید. این کار به افرادی که از صفحه خوان یا ابزارهای کمکی استفاده می کنند کمک می کند محتوای صفحه را بهتر دنبال کنند.
۴. ساختار سند را بررسی کنید
4️⃣تگ های باز و بسته را کنترل کنید
تگ های جفت مانند p و a باید به شکل صحیح بسته شوند و تگ های تکی مانند img، br و link را مطابق HTML معتبر بنویسید. تورفتگی منظم کد باعث می شود خطاهای ساختاری آسان تر پیدا شوند.
۵. عملکرد صفحه را فراموش نکنید
5️⃣فایل های صفحه را بهینه کنید
اندازه تصاویر را متناسب با محل نمایش انتخاب کنید، فایل های غیرضروری را بارگذاری نکنید و استایل های مشترک را تا جای ممکن مرتب نگه دارید. بررسی صفحه در اندازه های گوناگون نیز به شناسایی مشکلات نمایش کمک می کند.
جمع بندی آموزش تگ های HTML
⭐از ساختار تا محتوای صفحه
در این راهنمای
آموزش تگ های HTML دیدیم که هر تگ وظیفه مشخصی دارد: html ساختار کلی سند را تعریف می کند، head اطلاعات و منابع صفحه را نگه می دارد، body محتوای اصلی را در بر می گیرد و تگ هایی مانند a، img، p و heading عناصر صفحه را شکل می دهند. برای ساخت صفحه ای قابل فهم و استاندارد، تگ مناسب را انتخاب کنید، ویژگی ها را درست بنویسید و ظاهر صفحه را با CSS مدیریت کنید. رعایت این اصول، همراه با توجه به دسترس پذیری و عملکرد، پایه ای محکم برای توسعه و
طراحی سایت فراهم می کند.
سوالات متداول تگ های HTML
HTML چیست و تگ های آن چه کاربردی دارند؟
HTML زبان نشانه گذاری برای ساختاردهی محتوای صفحات وب است. تگ ها مشخص می کنند هر قسمت صفحه عنوان، پاراگراف، تصویر، پیوند یا عنصر دیگری است و مرورگر بر اساس این ساختار محتوا را پردازش می کند.
تفاوت تگ link و تگ a چیست؟
تگ link در بخش head برای معرفی منبع بیرونی مانند فایل CSS استفاده می شود و معمولا در صفحه دیده نمی شود. تگ a پیوند قابل کلیک در محتوای صفحه می سازد و نشانی مقصد آن با ویژگی href مشخص می شود.
تگ های img، br و meta به تگ پایانی نیاز دارند؟
خیر. این تگ ها در HTML به صورت تکی استفاده می شوند و تگ پایانی جداگانه ندارند. برای img باید مسیر تصویر را با src و متن جایگزین را با alt مشخص کنید. meta اطلاعات سند را در head قرار می دهد و br برای ایجاد شکست خط به کار می رود.
آیا متاتگ keywords هنوز برای سئو ضروری است؟
متاتگ keywords در حال حاضر معیار اصلی رتبه بندی موتورهای جستجوی مهم نیست. بهتر است روی محتوای مفید، عنوان روشن، توضیحات دقیق، ساختار منطقی تیترها و تجربه کاربری مناسب تمرکز کنید.
برای وسط چین کردن متن باید از تگ center استفاده کرد؟
خیر. تگ center در HTML امروزی منسوخ است. برای وسط چین کردن متن یا عناصر، از CSS استفاده کنید؛ برای نمونه ویژگی text-align: center برای متن قابل استفاده است.