در این درس می‌خوانید
Tag چیست؟
Tag همان نشانه‌ای است که با علامت‌های < و > نوشته می‌شود، مثل <p> یا </p>. به‌تنهایی، یک تگ فقط یک نشانه است — هنوز چیزی را نمایش نمی‌دهد.
Element چیست؟
Element ترکیب یک تگ باز، محتوای داخل آن، و تگ بسته متناظر است. برای مثال:
<p>این یک پاراگراف است.</p>در این مثال، <p> تگ باز است، </p> تگ بسته است، و کل این سه‌تکه با هم — شامل متن داخلش — یک element به نام پاراگراف را می‌سازند.
Content چیست؟
Content همان چیزی است که بین تگ باز و بسته قرار می‌گیرد. در مثال بالا، عبارت «این یک پاراگراف است.» محتوای آن element است. برخی عناصر اصلاً محتوا ندارند و به‌تنهایی معنا دارند — این‌ها را در ادامه می‌بینیم.
Attribute چیست؟
Attribute اطلاعات اضافه‌ای درباره یک element است که داخل تگ باز نوشته می‌شود. برای مثال:
<a href="/learn/" class="btn">مشاهده آموزش</a>در اینجا href و class دو attribute هستند. href می‌گوید این لینک به کجا اشاره می‌کند، و class یک نام برای استایل‌دهی با CSS تعیین می‌کند. اکثر attributeها به شکل نام="مقدار" نوشته می‌شوند و مقدار همیشه باید داخل گیومه باشد.
تگ‌های خودبسته
بعضی عناصر محتوایی ندارند که بین تگ باز و بسته قرار بگیرد، پس فقط با یک تگ نوشته می‌شوند. برای مثال:
<img src="cover.jpg" alt="جلد کتاب">
<br>
<input type="text"><img> یک تصویر را نمایش می‌دهد اما محتوایی «بین» دو تگ ندارد — همه اطلاعاتش (مثل مسیر تصویر) در attributeهایش است.
تودرتو شدن عناصر (Nesting)
عناصر HTML می‌توانند داخل هم قرار بگیرند. وقتی این کار را می‌کنید، عنصر بیرونی را parent و عنصر داخلی را child می‌نامند:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>جاوااسکریپت</li>
</ul>در این مثال، <ul> والد سه عنصر <li> است. یک قانون مهم: عناصر باید به‌درستی تودرتو شوند، یعنی هر تگی که آخر باز شده، باید اول بسته شود — درست مثل داخل‌وپرانتزهای متعادل.
<!-- درست -->
<p>این <strong>مهم</strong> است.</p>
<!-- نادرست -->
<p>این <strong>مهم</p></strong> است.اشتباهات رایج
فراموش کردن تگ بسته. اگر <p> را باز کنید و </p> را ننویسید، مرورگر معمولاً خودش را با حدس‌زدن درست می‌کند، اما نتیجه همیشه قابل‌پیش‌بینی نیست.
گذاشتن مقدار attribute بدون گیومه. نوشتن class=btn به‌جای class="btn" در اکثر موارد کار می‌کند، اما استاندارد و امن این است که همیشه از گیومه استفاده کنید — به‌خصوص وقتی مقدار شامل فاصله باشد.
تودرتوی نادرست. بستن تگ‌ها به ترتیب اشتباه (مثل مثال بالا) باعث می‌شود مرورگرها ساختار متفاوتی از آنچه شما در نظر داشتید بسازند.
خلاصه
Tag نشانه‌ای با <> است، Element ترکیب تگ باز، محتوا و تگ بسته است، و Attribute اطلاعات اضافه‌ای است که داخل تگ باز نوشته می‌شود. عناصر می‌توانند تودرتو شوند، اما باید به ترتیب درست باز و بسته شوند.
حالا که با واحدهای پایه HTML آشنا شدید، وقت آن است که ببینید چرا انتخاب کدام تگ برای هر بخش از محتوا اهمیت دارد — موضوعی که در مقاله بعدی به آن می‌پردازیم.