آناتومیِ یک تگ HTML

واحدِ بناییِ HTML: عنصر (element)

هر صفحه‌ی HTML از قطعه‌های کوچکی به نامِ «عنصر» (element) ساخته می‌شود. عنصرها همان آجرهای صفحه‌اند: یک عنصر برای عنوان، یک عنصر برای پاراگراف، یک عنصر برای تصویر و... .

هر عنصر معمولاً با یک «تگِ باز» (opening tag) شروع می‌شود و با یک «تگِ بسته» (closing tag) تمام می‌شود. این نمونه‌ی زنده را ببین:

<p>سلام</p>

این یک عنصرِ پاراگراف است. در ادامه دقیقاً می‌شکافیم که <p> و </p> یعنی چه.

کالبدشکافیِ تگِ باز

بیا کاراکترهای <p> را یکی‌یکی و به ترتیب نگاه کنیم:

1. علامتِ کوچک‌تر < — یعنی «یک تگ این‌جا شروع می‌شود».
2. نامِ تگ p — می‌گوید این چه نوع عنصری است (این‌جا: پاراگراف).
3. علامتِ بزرگ‌تر > — یعنی «تگ این‌جا تمام شد».

پس <p> در یک جمله یعنی: «یک پاراگراف این‌جا باز شد.»

نکته‌ی قراردادی: نامِ تگ را همیشه با حروفِ کوچکِ انگلیسی می‌نویسیم — <p> نه <P>. این قراردادِ مدرنِ نوشتنِ HTML است.

تگِ بسته: فقط یک اسلش فرق دارد

تگِ بسته دقیقاً مثلِ تگِ باز است، فقط یک اسلش / پیش از نامِ تگ دارد:

</p>

یعنی «این پاراگراف این‌جا بسته شد». همین / تنها تفاوتِ تگِ بسته با تگِ باز است.

فراموش‌کردنِ تگِ بسته، رایج‌ترین خطای تازه‌کارهاست. هر تگِ بازی که محتوا دارد، یک جفتِ بسته‌ی متناظر می‌خواهد. عادت کن همان لحظه که <p> می‌نویسی، </p> را هم بنویسی و بعد محتوا را وسطشان بگذاری.

عنصر در برابر تگ (یک تفاوتِ ظریف)

خیلی‌ها این دو واژه را قاطی می‌کنند، اما فرقشان ساده است:

• تگ (tag) یعنی همان نشانه‌گذاری: <p> یا </p>.
• عنصر (element) یعنی کلِ بسته: تگِ باز + محتوا + تگِ بسته، با هم.

پس در <p>سلام</p>، ما یک عنصرِ p داریم که از دو تگ (<p> و </p>) و یک محتوا (سلام) تشکیل شده.

محتوای میانی (content)

هر چیزی که بینِ تگِ باز و تگِ بسته بیاید، محتوای آن عنصر است. محتوا می‌تواند:

• متنِ ساده باشد:

<h1>عنوانِ صفحه</h1>

• یا حتی عنصرهای دیگر باشد (که به آن تودرتویی می‌گوییم و کمی پایین‌تر می‌بینیم).

خصوصیت‌ها (attributes): اطلاعاتِ اضافه‌ی یک عنصر

گاهی یک عنصر به اطلاعاتِ اضافی نیاز دارد. مثلاً یک لینک باید بداند که به کجا اشاره می‌کند. این اطلاعاتِ اضافی را با «خصوصیت» (attribute) می‌دهیم. خصوصیت‌ها داخلِ تگِ باز و بعد از نامِ تگ نوشته می‌شوند، با قالبِ name="value".

این مثالِ طلایی را خوب نگاه کن:

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

این یک عنصرِ لینک (a) است. داخلِ تگِ بازش یک خصوصیت دارد:

• href نامِ خصوصیت است (یعنی «مقصدِ لینک»).
• "https://example.com" مقدارِ آن خصوصیت است.

چند قاعده‌ی مهم درباره‌ی خصوصیت‌ها:

• مقدار را همیشه داخلِ گیومه (") بگذار: href="...".
• بینِ نام و مقدار یک = بدونِ فاصله بگذار: href="..." نه href = "...".
• چند خصوصیت را با یک فاصله از هم جدا کن:

<img src="cat.png" alt="یک گربه">

این <img> دو خصوصیت دارد: src (آدرسِ فایلِ تصویر) و alt (متنِ جایگزین برای وقتی تصویر دیده نمی‌شود).

بعضی خصوصیت‌ها بولی (boolean) هستند و اصلاً مقدار نمی‌خواهند — صرفِ بودنشان کافی است (مثلِ required در فیلدهای فرم). این‌ها را در ماژولِ فرم‌ها می‌بینیم.

تگ‌های خودبسته / void (بدونِ تگِ بسته)

بعضی عنصرها اصلاً محتوای میانی ندارند، چون چیزی برای دربرگرفتن ندارند — پس تگِ بسته هم ندارند. به این‌ها تگِ void (یا خودبسته) می‌گویند. مهم‌ترین‌هایشان:

• <br> — شکستنِ خط (رفتن به خطِ بعد).
• <hr> — یک خطِ جداکننده‌ی افقی.
• <img src="..." alt="..."> — یک تصویر.
• و چندتای دیگر مثلِ <input>، <meta> و <link>.

در HTML5 نوشتنِ <br> کاملاً کافی است؛ لازم نیست <br/> بنویسی. آن اسلشِ پایانی اختیاری و در HTML بی‌اثر است (در نمونه‌های قدیمی‌تر آن را می‌بینی، ولی برای تو لازم نیست).

تودرتویی (nesting): عنصرها داخلِ هم لانه می‌کنند

عنصرها می‌توانند داخلِ هم قرار بگیرند، درست مثلِ جعبه‌های تودرتو. اما یک قانونِ مهم دارند که شبیهِ پرانتزهاست: هر عنصری که آخر باز شد، باید اول بسته شود.

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

<p>یک <strong>کلمه‌ی</strong> مهم</p>

این‌جا strong کاملاً داخلِ p باز و بسته شده.

نادرست (تگ‌ها در هم گره خورده‌اند):

<p>یک <strong>کلمه</p></strong>

این‌جا p پیش از strong بسته شده و ترتیب به‌هم خورده. مرورگر سعی می‌کند چنین خطایی را خودش جبران کند، اما هرگز به این جبران تکیه نکن — نتیجه‌اش غیرقابلِ‌پیش‌بینی می‌شود. همیشه تگ‌ها را درست تو در تو ببند.

تورفتگی (indentation): برای چشمِ انسان، نه برای مرورگر

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

نکته‌ی مهم: تورفتگی هیچ اثری روی رندرِ نهایی ندارد — مرورگر فاصله‌ها و خطوطِ اضافی را نادیده می‌گیرد. تورفتگی فقط کد را برای انسان خوانا می‌کند و خطاها را زودتر آشکار می‌سازد. این نمونه‌ی تمیز را ببین:

<ul>
  <li>مورد اول</li>
  <li>مورد دوم</li>
</ul>

هر <li> با دو فاصله از <ul> تورفته شده تا روشن باشد که آن دو مورد، داخلِ فهرست‌اند.

همه‌ی مفاهیم، کنارِ هم

این قطعه‌ی کوچک، تمامِ چیزهایی را که این درس گفت کنارِ هم دارد — کامنت‌های فارسی هر جزء را نام‌گذاری کرده‌اند:

<!-- یک عنصرِ دارای محتوا: تگِ باز + متن + تگِ بسته -->
<h1>درباره‌ی من</h1>

<!-- یک عنصرِ دارای خصوصیت: href مقصدِ لینک را می‌دهد -->
<a href="https://example.com">سایتِ من</a>

<!-- یک تگِ void: بدونِ تگِ بسته، با خصوصیتِ alt -->
<img src="me.png" alt="عکسِ من">

<!-- یک تودرتوییِ درست: strong داخلِ p باز و بسته شده -->
<p>این یک نکته‌ی <strong>مهم</strong> است.</p>

حالا که آناتومیِ یک تگ را می‌شناسی، در درسِ بعد اولین صفحه‌ی واقعی‌ات را با یک سرتیتر و یک پاراگراف می‌نویسی و نتیجه را در پیش‌نمایشِ زنده می‌بینی.