عناصر HTML
اسکلت پایهٔ سند را از قبل میشناسید. این جلسه روی بلوکهای سازنده داخل صفحه تمرکز میکند: عناصر HTML. هر تیتر، پاراگراف و بیشتر بخشهای دیگر صفحه عنصر هستند.
عنصر HTML چیست؟
عنصر HTML یک واحد کامل نشانهگذاری است. برای بیشتر عناصری که محتوا را در بر میگیرند سه بخش دارد:
- تگ شروع (باز) — مثلاً
<p> - محتوا — متن یا عناصر تودرتو در داخل
- تگ پایان (بسته) — مثلاً
</p>
با هم،<p>سلام</p>یک عنصر پاراگراف است.
پاسخ مستقیم
عنصر HTML معمولاً یعنی تگ شروع، محتوای اختیاری، و تگ پایانی که با هم جور باشند. مرورگر با این جفت میفهمد عنصر از کجا شروع و کجا تمام میشود. بعضی عناصر خالی محتوا را در بر نمیگیرند و بنابراین تگ پایان جدا ندارند.
عنصر با تگ شروع، محتوا، تگ پایان
html<p>این یک عنصر پاراگراف است.</p>
<h1>این یک عنصر تیتر است.</h1>خواندن مثال
<p>یک عنصر پاراگراف را باز میکند- متن بین تگها محتواست
</p>پاراگراف را میبندد- تیتر به همان شکل با
<h1>و</h1>کار میکند
عناصر تودرتو
عناصر میتوانند داخل عناصر دیگر بنشینند؛ به این میگویند تودرتویی. عنصر داخلی باید کاملاً باز و بسته شود قبل از اینکه عنصر بیرونی بسته شود.
عناصر تودرتو
html<p>این پاراگراف شامل یک واژهٔ <strong>مهم</strong> است.</p>اینجا عنصر strong داخل عنصر p تودرتو شده است. تودرتویی میگذارد معنا را داخل تکههای بزرگتر محتوا علامت بزنید. درخت را تمیز نگه دارید: تگها را همپوشان نکنید مثل باز کردن p، باز کردن strong، سپس بستن p قبل از strong.
عناصر خالی (void)
بعضی عناصر محتوا را در بر نمیگیرند. اغلب به آنها خالی یا void میگویند. یک مثال رایج مبتدی شکست خط است:
عنصر خالی br
html<p>خط یک.<br>خط دو.</p>تگ <br> یک شکست خط میسازد. تگ بستهٔ جدا و متن داخلی ندارد. بعداً با عناصر خالی دیگر مثل تصویر آشنا میشوید. فعلاً به یاد بسپارید: هر عنصری شبیه ساندویچ شروع-محتوا-پایان نیست.
تگ در برابر عنصر
گاهی «تگ» و «عنصر» را یکی میگویند. تگ همان نشانهگذاری داخل براکت زاویهای است. عنصر واحد کاملی است که مرورگر میفهمد — اغلب تگ شروع + محتوا + تگ پایان. وقتی میگوییم «عنصر p» معمولاً کل واحد پاراگراف را منظور داریم.
خودتان امتحان کنید
- فایل HTML پایهٔ خود را باز کنید
- یک پاراگراف با متن تودرتوی
strongاضافه کنید - پاراگراف دومی بگذارید که بین دو خط کوتاه از
<br>استفاده کند - ذخیره کنید و مرورگر را تازه کنید
- تأیید کنید متن پررنگ و شکست خط درست دیده میشود
اشتباهات رایج
- فراموش کردن تگ بسته برای عناصری که به آن نیاز دارند
- همپوشانی تگها بهجای تودرتویی تمیز
- رفتار با هر تگ طوری که انگار باید محتوا و تگ پایان داشته باشد (عناصر خالی فرق دارند)
- نام بستهٔ اشتباه، مثل جفت کردن
</p>با<h1> - گذاشتن محتوای قابلدیدن بیرون از
body
خلاصه
- بیشتر عناصر HTML از تگ شروع، محتوا و تگ پایان استفاده میکنند
- عناصر تودرتو باید به ترتیب درست بسته شوند
- عناصر خالی مثل
brمحتوا را در بر نمیگیرند - تگ نشانگر داخل براکت است؛ عنصر واحد کامل است
- تودرتویی و یک شکست خط ساده را در صفحه تمرین کنید
- attributeها که اطلاعات اضافه به تگ میدهند در جلسهٔ بعد میآیند
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کردهاید
📝 دستورالعملها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- میتوانید آزمون را هر چند بار که میخواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده میشود