در دو مقاله گذشته با مفهوم کلی وب و زبان HTML آشنا شدیم و یاد گرفتیم که HTML وظیفه ایجاد ساختار و سازمان‌دهی محتوای صفحات وب را بر عهده دارد. حالا که با کاربرد کلی HTML آشنا شده‌ایم، زمان آن رسیده است که کمی دقیق‌تر به ساختار کدهای HTML نگاه کنیم و ببینیم این کدها چگونه نوشته و در کنار یکدیگر قرار می‌گیرند. برای اینکه بتوانیم صفحات وب را به‌درستی ایجاد و در ادامه آن‌ها را با CSS و JavaScript توسعه دهیم، لازم است مفاهیمی مانند تگ (Tag)، عنصر (Element)، محتوا (Content) و ویژگی (Attribute) را به‌خوبی بشناسیم. همچنین باید بدانیم تگ‌های باز و بسته چه تفاوتی با یکدیگر دارند، عناصر چگونه می‌توانند داخل یکدیگر قرار بگیرند و ساختار کلی یک فایل HTML چگونه شکل می‌گیرد. در این مقاله این مفاهیم را از پایه و با مثال‌های ساده بررسی می‌کنیم تا بتوانید هنگام مشاهده یا نوشتن کد HTML، اجزای مختلف آن را به‌راحتی تشخیص دهید و درک درستی از نحوه ساخت صفحات وب به دست آورید.

عنصر یا Element چیست؟

یکی از مفاهیم مهم HTML، Element یا عنصر است.

برای مثال:

<p>سلام دنیا</p>

در اینجا کل ساختار زیر یک عنصر HTML محسوب می‌شود:

<p>سلام دنیا</p>

یعنی عنصر می‌تواند شامل موارد زیر باشد:

تگ باز
+
محتوا
+
تگ بسته

به عنوان مثال:

<h1>آموزش طراحی وب</h1>

یک عنصر عنوان است.

و:

<p>من در حال یادگیری HTML هستم.</p>

یک عنصر پاراگراف است.

بنابراین بهتر است تفاوت این دو اصطلاح را از همین ابتدا بدانید:

Tag: خود تگ

Element: کل ساختار عنصر

مثلاً در:

<p>سلام</p>

<p> یک تگ است، اما <p>سلام</p> یک عنصر است.

محتوا یا Content چیست؟

در بسیاری از عناصر HTML، چیزی بین تگ باز و بسته قرار می‌گیرد که به آن محتوا (Content) می‌گوییم.

برای مثال:

<h1>آموزش طراحی وب</h1>

محتوا این قسمت است:

آموزش طراحی وب

یا در:

<p>یادگیری HTML را شروع کنید.</p>

محتوا عبارت است از:

یادگیری HTML را شروع کنید.

این مفهوم ساده در ادامه کار با HTML بسیار کاربردی خواهد بود.

Attribute یا ویژگی چیست؟

حالا فرض کنید می‌خواهیم اطلاعات بیشتری درباره یک عنصر به مرورگر بدهیم.

برای این کار در HTML از Attribute یا «ویژگی» استفاده می‌کنیم.

برای مثال در یک لینک:

<a href="https://example.com">مشاهده سایت</a>

قسمت:

href="https://example.com"

یک Attribute است.

Attribute به تگ اطلاعات بیشتری اضافه می‌کند.

در این مثال، href مشخص می‌کند لینک باید به چه آدرسی اشاره کند.

ساختار Attribute

Attribute معمولاً داخل تگ باز نوشته می‌شود.

مثلاً:

<p class="text">سلام دنیا</p>

در اینجا:

class="text"

یک Attribute است.

می‌توانیم ساختار آن را این‌طور ببینیم:

attribute = "value"

یعنی:

class = "text"

در HTML همیشه Attributeها را داخل تگ باز قرار می‌دهیم.

مثلاً:

<p class="description">
    متن من
</p>

اما در این مرحله لازم نیست همه Attributeها را یاد بگیرید. در ادامه دوره هرکدام را زمانی که به آن نیاز داشته باشیم بررسی خواهیم کرد.

چند Attribute در یک تگ

یک عنصر می‌تواند چند Attribute داشته باشد.

مثلاً:

<p class="description" id="intro">
    به سایت من خوش آمدید.
</p>

در اینجا دو Attribute داریم:

class="description"
id="intro"

هر دو داخل تگ باز قرار گرفته‌اند.

ساختار کلی به این صورت است:

تگ
 ↓
<p class="description" id="intro">
 ↑          ↑             ↑
نام تگ    ویژگی اول      ویژگی دوم

مقدار هر ویژگی نیز معمولاً داخل علامت نقل‌قول قرار می‌گیرد.

عناصر تو در تو

یکی دیگر از مفاهیم مهم HTML، قرار گرفتن عناصر داخل یکدیگر است.

برای مثال:

<div>
    <h1>عنوان</h1>
    <p>این یک متن است.</p>
</div>

در این مثال، دو عنصر:

<h1>عنوان</h1>

و:

<p>این یک متن است.</p>

داخل عنصر:

<div>

قرار گرفته‌اند.

می‌توانیم این ساختار را مانند یک جعبه تصور کنیم:

<div>
    ├── <h1>عنوان</h1>
    └── <p>این یک متن است.</p>
</div>

این نوع ساختار در صفحات وب بسیار رایج است.

ترتیب صحیح بسته شدن تگ‌ها

وقتی عناصر را داخل یکدیگر قرار می‌دهیم، باید ترتیب بسته شدن آن‌ها درست باشد.

مثلاً این کد صحیح است:

<div>
    <p>سلام دنیا</p>
</div>

اما این کد اشتباه است:

<div>
    <p>سلام دنیا</div>
</p>

چرا؟

چون عنصر p داخل div قرار گرفته است، بنابراین باید ابتدا p بسته شود و بعد div.

قاعده ساده این است:

هر عنصری که آخر باز شده، باید زودتر بسته شود.

مثلاً:

<div>
    <p>
        <strong>سلام</strong>
    </p>
</div>

ترتیب بسته شدن:

<strong>
   ↓
</strong>

<p>
   ↓
</p>

<div>
   ↓
</div>

ساختار یک فایل HTML

تا اینجا درباره عناصر صحبت کردیم. حالا به ساختار یک فایل HTML می‌پردازیم. ساختار یک فایل HTML به شکل زیر است:

<!DOCTYPE html>

<html>

<head>
    <title>صفحه من</title>
</head>

<body>

    <h1>سلام!</h1>

    <p>به اولین صفحه HTML من خوش آمدید.</p>

</body>

</html>

این کد از چند بخش اصلی تشکیل شده است.

در این مرحله فقط یک آشنایی اولیه با آن‌ها داشته باشیم.

DOCTYPE

در ابتدای فایل معمولاً این خط را می‌بینیم:

<!DOCTYPE html>

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

فعلاً نیازی نیست جزئیات بیشتری درباره آن بدانید.

کافی است بدانید که در یک صفحه HTML مدرن معمولاً آن را در ابتدای فایل قرار می‌دهیم.

تگ HTML

بعد از آن معمولاً ساختار اصلی صفحه با:

<html>

شروع می‌شود.

و در پایان با:

</html>

تمام می‌شود و تمام محتوای صفحه داخل این عنصر قرار می‌گیرد.

بخش Head

در فایل HTML بخشی مانند این داریم:

<head>
    
</head>

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

مثلاً:

<title>صفحه من</title>

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

در مقالات بعدی با بخش head و مواردی که می‌توان داخل آن قرار داد بیشتر آشنا خواهیم شد.

تگ Body

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

<body>

    <h1>آموزش HTML</h1>

    <p>یادگیری طراحی وب را شروع کنید.</p>

</body>

در مثال فوق، عنوان و پاراگراف ما داخل body قرار گرفته‌اند.

بنابراین به صورت ساده:

HTML
│
├── HEAD
│
└── BODY
     │
     ├── عنوان
     ├── متن
     ├── تصویر
     └── لینک

در آینده این ساختار را با جزئیات بیشتری بررسی خواهیم کرد.

آیا HTML به حروف بزرگ و کوچک حساس است؟

در HTML مدرن بهتر است تگ‌ها را به صورت حروف کوچک بنویسیم.

مثلاً:

<h1>عنوان</h1>

بهتر از این است:

<H1>عنوان</H1>

اگرچه مرورگرها معمولاً در HTML با حروف بزرگ و کوچک انعطاف دارند، استفاده از حروف کوچک یک روش استاندارد و خواناتر است.

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

فاصله‌ها و خط‌های جدید در HTML

در کد HTML ممکن است برای خوانایی، خطوط مختلفی ایجاد کنیم.

مثلاً:

<div>
    <h1>عنوان</h1>

    <p>متن صفحه</p>
</div>

این ساختار برای انسان خواناتر است.

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

بنابراین بهتر است کد HTML را مرتب و منظم بنویسیم.

مثلاً به جای:

<div><h1>عنوان</h1><p>متن</p></div>

بهتر است بنویسیم:

<div>
    <h1>عنوان</h1>
    <p>متن</p>
</div>

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

آیا همه تگ‌ها تگ بسته دارند؟

خیر.

بعضی از عناصر HTML به شکل خاصی نوشته می‌شوند و تگ بسته جداگانه ندارند.

برای مثال:

<img src="image.jpg" alt="تصویر">

در اینجا تگ img مانند p یک تگ بسته جداگانه ندارد.

یعنی این شکل را نداریم:

<img>...</img>

این نوع عناصر را در ادامه دوره به صورت دقیق‌تر بررسی خواهیم کرد.

فعلاً فقط بدانید که همه تگ‌های HTML الزاماً به صورت تگ باز و تگ بسته نیستند.

چند اشتباه رایج در شروع یادگیری HTML

اشتباه اول: فراموش کردن تگ بسته

مثلاً:

<p>سلام دنیا

در بسیاری از موارد باید تگ بسته را نیز قرار دهیم:

<p>سلام دنیا</p>

اشتباه دوم: بسته شدن نادرست تگ‌ها

اشتباه:

<div>
    <p>متن</div>
</p>

صحیح:

<div>
    <p>متن</p>
</div>

اشتباه سوم: قرار دادن Attribute خارج از تگ

اشتباه:

<p> class="text" متن </p>

صحیح:

<p class="text">متن</p>

Attribute باید در جای مناسب، معمولاً داخل تگ باز، قرار بگیرد.

اشتباه چهارم: حفظ کردن بدون تمرین

HTML با خواندن به تنهایی یاد گرفته نمی‌شود.

بهتر است هر چیزی که یاد می‌گیرید خودتان در یک فایل HTML امتحان کنید.

حتی اگر مثال بسیار ساده باشد.

جمع‌بندی

در این مقاله با ساختار اصلی کدهای HTML آشنا شدیم.

یاد گرفتیم:

• Tag چیست.

• Element چیست.

• Content چیست.

• Attribute چیست.

• تگ باز و تگ بسته چه تفاوتی دارند.

• چگونه عناصر HTML را داخل یکدیگر قرار دهیم.

• چرا ترتیب بسته شدن تگ‌ها اهمیت دارد.

• ساختار کلی یک فایل HTML چگونه است.

• DOCTYPE چه نقشی دارد.

• head و body چه کاربردی دارند.

• چرا بهتر است کد HTML را مرتب و خوانا بنویسیم.

• همه عناصر HTML الزاماً تگ بسته جداگانه ندارند.

اکنون دیگر وقتی کدی مانند:

<p class="description">سلام دنیا</p>

می‌بینید، می‌توانید بخش‌های مختلف آن را تشخیص دهید:

<p>
→ تگ

class="description"
→ Attribute

سلام دنیا
→ Content

<p class="description">سلام دنیا</p>
→ Element

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