HTML چیست؟ آموزش کامل و جامع HTML
فهرست مطالب
HTML چیست؟
HTML یا HyperText Markup Language زبان نشانه‌گذاری استاندارد برای ساخت صفحات وب است. این زبان به ما امکان می‌دهد تا ساختار محتوا را در صفحات وب مشخص کنیم.
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<title>عنوان صفحه</title>
</head>
<body>
<h1>سلام دنیا!</h1>
<p>این یک پاراگراف است.</p>
</body>
</html>تاریخچه HTML
HTML در سال ۱۹۹۱ توسط تیم برنرز-لی در CERN ایجاد شد. از آن زمان تاکنون، نسخه‌های مختلفی از HTML منتشر شده است که آخرین نسخه آن HTML5 می‌باشد.
ساختار پایه HTML
هر سند HTML از عناصر مختلفی تشکیل شده است. ساختار پایه یک سند HTML شامل موارد زیر است:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>عنوان سند</title>
</head>
<body>
<!-- محتوای اصلی سند -->
</body>
</html>المان‌های HTML
المان‌های بلوکی
المان‌های بلوکی مانند <div>، <p>، <h1> تا <h6> همیشه از خط جدید شروع می‌شوند و عرض کل فضای موجود را اشغال می‌کنند.
المان‌های درون‌خطی
المان‌های درون‌خطی مانند <span>، <a>، <strong> در همان خط جاری قرار می‌گیرند و فقط به اندازه محتوای خود فضا اشغال می‌کنند.
HTML معنایی چیست؟
HTML معنایی به استفاده از تگ‌های HTML با معنای مشخص و هدفمند اشاره دارد. این تگ‌ها به موتورهای جستجو و تکنولوژی‌های کمکی کمک می‌کنند تا محتوای سایت را بهتر درک کنند.
<header>
<nav>منوی اصلی سایت</nav>
</header>
<main>
<article>
<header>
<h1>عنوان مقاله</h1>
</header>
<section>
<h2>بخش اول</h2>
<p>متن بخش اول</p>
</section>
</article>
<aside>محتوای جانبی</aside>
</main>
<footer>پاورقی سایت</footer>ویژگی‌های HTML
ویژگی‌ها اطلاعات اضافی درباره المان‌های HTML را مشخص می‌کنند. این ویژگی‌ها همیشه در تگ شروع المان قرار می‌گیرند.
<img src="image.jpg" alt="توضیح تصویر" width="300" height="200">
<a href="https://example.com" target="_blank" rel="noopener">لینک</a>
<input type="text" id="username" name="username" required>فرم‌ها در HTML
فرم‌ها برای جمع‌آوری اطلاعات از کاربران استفاده می‌شوند. HTML انواع مختلفی از المان‌های فرم را ارائه می‌دهد.
<form action="/submit" method="post">
<label for="name">نام:</label>
<input type="text" id="name" name="name" required>
<label for="email">ایمیل:</label>
<input type="email" id="email" name="email" required>
<label for="message">پیام:</label>
<textarea id="message" name="message"></textarea>
<button type="submit">ارسال</button>
</form>رسانه در HTML
HTML5 امکانات گسترده‌ای برای پشتیبانی از رسانه‌ها مانند تصاویر، ویدیوها و صدا فراهم می‌کند.
<!-- تصویر -->
<img src="image.jpg" alt="توضیح تصویر">
<!-- ویدیو -->
<video controls width="500">
<source src="video.mp4" type="video/mp4">
مرورگر شما از ویدیو پشتیبانی نمی‌کند.
</video>
<!-- صوت -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
مرورگر شما از پخش صوت پشتیبانی نمی‌کند.
</audio>جداول در HTML
جداول در HTML برای نمایش داده‌های دو بعدی استفاده می‌شوند. ساختار جدول از تگ‌های مختلفی تشکیل شده است.
<table border="1">
<thead>
<tr>
<th>نام</th>
<th>سن</th>
<th>شغل</th>
</tr>
</thead>
<tbody>
<tr>
<td>علی</td>
<td>28</td>
<td>برنامه‌نویس</td>
</tr>
<tr>
<td>مریم</td>
<td>32</td>
<td>طراح</td>
</tr>
</tbody>
</table>بهترین شیوه‌های کدنویسی HTML
رعایت اصول و بهترین شیوه‌های کدنویسی HTML به بهبود کیفیت و نگهداری کد کمک می‌کند:
۱. تورفتگی مناسب
استفاده از تورفتگی مناسب برای خوانایی بهتر کد ضروری است.
۲. استفاده از تگ‌های معنایی
به جای استفاده از div و span، از تگ‌های معنایی مناسب استفاده کنید.
۳. اعتبارسنجی کد
همیشه کد HTML خود را با ابزارهای اعتبارسنجی W3C بررسی کنید.
بهینه‌سازی HTML برای SEO
بهینه‌سازی HTML برای موتورهای جستجو شامل موارد زیر است:
<head>
<title>عنوان صفحه | نام سایت</title>
<meta name="description" content="توضیحات صفحه برای موتورهای جستجو">
<meta name="keywords" content="کلمات کلیدی، جدا شده، با کاما">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://example.com/page">
</head>ابزارهای مفید برای کار با HTML
برای توسعه بهتر با HTML، ابزارهای مفید زیر را در نظر بگیرید:
ویرایشگرهای کد
– Visual Studio Code
– Sublime Text
– Atom
ابزارهای اعتبارسنجی
– W3C Markup Validation Service
– HTML5 Validator
افزونه‌های مرورگر
– Web Developer
– HTML Validator