مقدمه به زبان ساده
همه‌ی ما اسم HTML رو شنیدیم؛ زبانی که پایه و اساس طراحی وب هست. توی این توضیحات، می‌خوایم یه نگاه ساده و روان به انواع عناصر HTML و کاربرد اصلیشون بندازیم. تا حالا تصور کردید که یه صفحه وب شبیه به یک کتابه؟ HTML همون دستورالعمل‌هاییه که بهمون کمک می‌کنه این کتاب رو فصل به فصل و به صورتی درست و قابل فهم بسازیم. برای مثال، هر کدوم از تگ‌های HTML نقشی شبیه به جمله‌ها و پاراگراف‌های یک کتاب دارند و باعث خوانایی بیشتر سایت می‌شند.
در ابتدا، وقتی شروع به طراحی می‌کنیم، ممکنه فکر کنیم «این همه تگ؟ کدوم رو کجا استفاده کنم؟» ولی نگران نباشید، هر تگ بسته به کاربرد خودش توی قسمت‌های مختلفی از وب‌سایت به کار میره. مثلا تگ‌های متنی مثل <h1> یا <p> و یا لیست‌هایی مثل <ul> و <ol>. هر کدوم از این تگ‌ها هدف خاصی دارند.
برای واضح‌تر شدن موضوع، بیاید یه مثال ساده بزنیم. تصور کنید می‌خواهید یه صفحه وب درست کنید که یک تیتر، یه پاراگراف، و چند مورد لیست داره. خب، برای تیتر از <h1> استفاده می‌کنیم، برای پاراگراف از <p>، و برای لیست از <ul> یا <ol> استفاده می‌کنیم.
وقتی توی HTML کد می‌زنیم، باید حواسمون به ساختارمند بودن کدهامون باشه. هدف اصلی اینه که نه تنها کامپیوتر و مرورگر بتونند کدهامون رو بخونند، بلکه بقیه توسعه‌دهندگان هم در آینده بتونند به راحتی کدهامون رو درک کنند.
حالا، بیایید یه نمونه عملی کوچیک رو با هم مرور کنیم. در اینجا قراره یه صفحه‌ی ساده HTML بسازیم که همه اینها رو شامل بشه.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>صفحه نمونه HTML</title>
</head>
<body>
<h1>این یک عنوان نمونه است</h1>
<p>این یک پاراگراف نمونه است که هدفش توضیحات بیشتر در مورد موضوع این صفحه است.</p>
<ul>
<li>مورد اول از لیست</li>
<li>مورد دوم از لیست</li>
<li>مورد سوم از لیست</li>
</ul>
</body>
</html>توضیح کد خط به خط
<!DOCTYPE html>این اعلام می کنه که فایل ما یک سند HTML5 است.
<html lang="fa">این تگ آغازین HTML است و مشخص می‌کند که زبان سند فارسی است.
<head>بخشی که حاوی متا تگ‌ها و اطلاعات غیرقابل مشاهده‌ی اصلی صفحه است.
<meta charset="UTF-8">این تگ برای تنظیم نوع کاراکترگذاری صفحه روی UTF-8 استفاده می‌شود.
<meta name="viewport" content="width=device-width, initial-scale=1.0">برای تنظیم نمایش صحیح صفحه در دستگاه‌های مختلف به کار می‌رود.
<title>صفحه نمونه HTML</title>عنوان صفحه که در تب مرورگر نمایش داده می‌شود.
</head>پایان تگ سر (head) سند.
<body>بخش اصلی سند که محتوای قابل مشاهده توسط کاربر در آن قرار می‌گیرد.
<h1>برای نمایش عنوان اصلی صفحه.
<p>برای نمایش پاراگراف‌ها.
<ul>برای نمایش لیست‌های نامرتب.
<li>برای نمایش هر مورد از لیست.
</body>پایان تگ بدنه (body) سند.
</html>پایان تگ HTML، انتهای سند HTML.