برنامه نویسی

ساختار اولیه HTML چیست؟ آموزش کامل ساخت اولین صفحه HTML از صفر

با ساختار اولیه HTML آشنا شوید و یاد بگیرید چگونه اولین صفحه وب خود را به‌صورت استاندارد ایجاد کنید. آموزش کامل تگ‌های html، head، body، title، meta همراه با مث

۱۴۰۵/۰۵/۰۴۱۴ دقیقه مطالعه

متن مقاله

ساختار اولیه HTML چیست؟

اگر مقاله قبلی را مطالعه کرده باشید، می‌دانید که HTML مسئول ایجاد ساختار صفحات وب است. اما هر صفحه HTML قبل از اینکه محتوایی مانند متن، تصویر یا دکمه داشته باشد، باید یک ساختار اولیه و استاندارد داشته باشد.

این ساختار به مرورگر اعلام می‌کند که صفحه از چه نوعی است، اطلاعات مربوط به آن چیست و محتوای اصلی در کدام قسمت قرار دارد.

تقریباً تمام صفحات وب موجود در اینترنت با همین ساختار پایه شروع می‌شوند.

ساختار استاندارد یک صفحه 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>اولین صفحه HTML من.</p>
  </body>
</html>

در نگاه اول ممکن است این کد کمی پیچیده به نظر برسد، اما هر بخش وظیفه مشخصی دارد. در ادامه هر قسمت را جداگانه بررسی می‌کنیم.

DOCTYPE چیست؟

<!DOCTYPE html>

این خط به مرورگر اعلام می‌کند که فایل شما از استاندارد HTML5 استفاده می‌کند.

اگر این خط وجود نداشته باشد، ممکن است مرورگر صفحه را با استانداردهای قدیمی نمایش دهد و نتیجه مورد انتظار را مشاهده نکنید.

این خط همیشه باید اولین خط فایل HTML باشد.

تگ html چیست؟

<html lang="fa">

تگ <html> ریشه (Root) کل صفحه است و تمام کدهای HTML داخل آن قرار می‌گیرند.

ویژگی lang زبان صفحه را مشخص می‌کند.

برای صفحات فارسی:

<html lang="fa">

برای صفحات انگلیسی:

<html lang="en">

استفاده از ویژگی lang علاوه بر بهبود دسترسی‌پذیری (Accessibility)، در سئو نیز اهمیت زیادی دارد.

تگ head چیست؟

<head>
  <!-- اطلاعات صفحه -->
</head>

تمام اطلاعاتی که کاربر مستقیماً داخل صفحه مشاهده نمی‌کند، در این قسمت قرار می‌گیرد.

مهم‌ترین مواردی که داخل <head> قرار می‌گیرند عبارت‌اند از:

عنوان صفحه (Title)
اطلاعات سئو (Meta Tags)
فایل‌های CSS
فونت‌ها
آیکون سایت (Favicon)
اسکریپت‌ها و سایر تنظیمات صفحه

Meta Charset چیست؟

<meta charset="UTF-8" />

این تگ مشخص می‌کند صفحه از چه نوع کاراکترهایی استفاده می‌کند.

اگر از UTF-8 استفاده نکنید، ممکن است متن فارسی به‌صورت نامفهوم یا به‌هم‌ریخته نمایش داده شود.

تقریباً تمام پروژه‌های امروزی از UTF-8 استفاده می‌کنند.

Meta Viewport چیست؟

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0"
/>

این Meta Tag باعث می‌شود صفحه در موبایل، تبلت و دستگاه‌های مختلف به‌درستی نمایش داده شود.

بدون این تگ، صفحات در بسیاری از تلفن‌های همراه ظاهر مناسبی نخواهند داشت.

تگ title چیست؟

<title>اولین صفحه HTML</title>

تگ <title> عنوان صفحه را مشخص می‌کند؛ همان عنوانی که در تب مرورگر نمایش داده می‌شود.

همچنین موتورهای جستجو مانند گوگل از همین عنوان برای نمایش نتیجه صفحه استفاده می‌کنند.

به همین دلیل، تگ title یکی از مهم‌ترین بخش‌های سئو محسوب می‌شود.

تگ body چیست؟

<body>
  <!-- محتوای قابل مشاهده صفحه -->
</body>

تمام محتوایی که کاربر مشاهده می‌کند داخل تگ <body> قرار می‌گیرد.

برای مثال:

متن
تصویر
ویدئو
فرم
جدول
دکمه
لینک
منو

همگی داخل این بخش نوشته می‌شوند.

اولین محتوای صفحه HTML

اکنون که با ساختار اولیه HTML آشنا شدید، می‌توانید اولین محتوای خود را داخل تگ <body> قرار دهید.

<body>
  <h1>سلام دنیا!</h1>
  <p>این اولین صفحه HTML من است.</p>
</body>

مرورگر این کد را به‌صورت یک عنوان بزرگ و یک متن معمولی نمایش می‌دهد.

اشتباهات رایج هنگام ساخت اولین فایل HTML

هنگام نوشتن اولین فایل HTML معمولاً این اشتباهات رخ می‌دهد:

حذف کردن <!DOCTYPE html>
قرار دادن محتوای صفحه داخل <head>
فراموش کردن بستن تگ‌ها
ننوشتن تگ <title>
حذف Meta Viewport
استفاده نکردن از UTF-8 برای صفحات فارسی

اگر از همان ابتدا ساختار استاندارد را رعایت کنید، در پروژه‌های بزرگ نیز با مشکلات کمتری مواجه خواهید شد.

جمع‌بندی

ساختار اولیه HTML پایه و اساس تمام صفحات وب است. هر صفحه استاندارد با <!DOCTYPE html> آغاز می‌شود، سپس تگ <html> قرار می‌گیرد و دو بخش اصلی <head> و <body> داخل آن نوشته می‌شوند.

در بخش <head> اطلاعات مربوط به صفحه و تنظیمات آن قرار می‌گیرد و در بخش <body> تمام محتوایی که کاربر مشاهده می‌کند نمایش داده می‌شود.

یادگیری صحیح این ساختار، اولین قدم برای تبدیل شدن به یک توسعه‌دهنده وب است. در آموزش بعدی با مهم‌ترین تگ‌های متنی HTML مانند h1 تا h6، p و سایر عناصر پرکاربرد آشنا خواهید شد.

نظرات

در حال بارگذاری…

بازگشت به آموزش

نیاز به مشاوره تخصصی دارید؟

تیم One in آماده است تا در حوزه برنامه نویسی همراه شما باشد.

ثبت درخواست رایگان