عناصر HTML
✅ تعریف
یک عنصر HTML از سه بخش تشکیل شده است:
<tagname>محتوا</tagname>
به‌طور کامل، یک عنصر HTML از تگ آغازین، محتوا و تگ پایانی تشکیل می‌شود.
✅ مثال‌هایی از عناصر HTML:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
| تگ شروع | محتوای عنصر | تگ پایان |
|---|---|---|
<h1> | My First Heading | </h1> |
<p> | My first paragraph. | </p> |
<br> | (هیچ محتوایی ندارد) | (ندارد) |
🔔 نکته: برخی از عناصر مانند <br> محتوایی ندارند و تگ پایانی هم ندارند. این عناصر را عناصر خالی (Empty Elements) می‌نامیم.
🔁 عناصر تو در تو در HTML
تمام اسناد HTML از عناصر تو در تو (Nested) تشکیل شده‌اند؛ یعنی یک عنصر می‌تواند شامل عناصر دیگر باشد.
✅ مثال:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
🔍 توضیح:
-
<html>ریشه سند HTML است و همه چیز داخل آن قرار می‌گیرد. -
<body>محتوای قابل نمایش در مرورگر را دربر می‌گیرد. -
عناصر
<h1>و<p>داخل<body>قرار دارند.
توضیح مثال
🧩 عنصر <html>
عنصر <html> عنصر ریشه است و کل سند HTML را تعریف می‌کند.
-
تگ شروع:
<html> -
تگ پایان:
</html>
🧩 عنصر <body>
درون عنصر <html>، یک عنصر دیگر به نام <body> قرار دارد:
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
عنصر <body>، بدنه‌ی سند را تعریف می‌کند؛ یعنی همه محتوایی که در مرورگر نمایش داده می‌شود.
-
تگ شروع:
<body> -
تگ پایان:
</body>
🧩 عناصر داخل <body>
درون عنصر <body> دو عنصر دیگر وجود دارد:
<h1>My First Heading</h1>
<p>My first paragraph.</p>🧩 عنصر <h1>
عنصر <h1>، یک سرفصل (Heading) را تعریف می‌کند.
-
تگ شروع:
<h1> -
محتوای عنصر: My First Heading
-
تگ پایان:
</h1>
🧩 عنصر <p>
عنصر <p>، یک پاراگراف (Paragraph) را تعریف می‌کند.
-
تگ شروع:
<p> -
محتوای عنصر: My first paragraph.
-
تگ پایان:
</p>
⚠️ هرگز تگ پایانی را حذف نکنید!
در برخی مرورگرها، اگر تگ پایانی مثل </p> را ننویسید، ممکن است همچنان صفحه درست نمایش داده شود:
<html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>اما این کار اشتباه است. حذف تگ پایان می‌تواند باعث بروز خطاهای غیرمنتظره در صفحه شود. ✅ همیشه تگ‌های پایان را بنویسید.
🕳️ Empty HTML Elements — عناصر خالی
عناصری که محتوایی ندارند، Empty Elements نامیده می‌شوند.
مثال:
<p>This is a <br> paragraph with a line break.</p>
در این مثال، تگ <br> یک شکست خط (line break) ایجاد می‌کند ولی محتوایی ندارد و تگ پایانی هم ندارد.
🔠 HTML به حروف بزرگ و کوچک حساس نیست
تگ‌های HTML به حروف بزرگ و کوچک حساس نیستند؛ یعنی:
<P> و <p>هر دو یکسان در نظر گرفته می‌شوند. اما:
🟩 توصیهcodoloper: استفاده از حروف کوچک برای تگ‌ها.
📌 در XHTML (نسخه سخت‌گیرانه‌تر HTML) تگ‌ها باید کاملاً با حروف کوچک نوشته شوند.