عناصر HTML

عناصر HTML (HTML Elements) بخش‌های اصلی هر صفحه وب هستند! در این راهنما، با ساختار آن‌ها، نحوه‌ی استفاده، و نکات کلیدی برای نوشتن کد HTML بهینه آشنا می‌شویم. 🔥

📌 فهرست مطالب

عنصر HTML چیست؟
ساختار عناصر HTML
عناصر تودرتو (Nested Elements)
عناصر بدون محتوای HTML
عدم حساسیت به حروف بزرگ و کوچک
تمرین کوتاه

🔹 عنصر HTML چیست؟

عنصر HTML مجموعه‌ای از یک تگ بازکننده (Start Tag)، محتوا (Content) و تگ بسته‌شونده (End Tag) است. مثلا:

<h1>این یک عنوان است</h1>
<p>این یک پاراگراف است</p>

نتیجه‌ی اجرای این کد در مرورگر:
👑 این یک عنوان است
✍ این یک پاراگراف است

📢 نکته: برخی عناصر، مثل <br>، پایان ندارند و به آن‌ها عناصر خالی (Empty Elements) می‌گوییم.

🔹 ساختار عناصر HTML

هر عنصر HTML دارای سه بخش اصلی است:

تگ باز	محتوا	تگ بسته
<h1>	My First Heading	</h1>
<p>	My first paragraph.	</p>
<br>	ندارد	ندارد

🚀 مثال کامل از عناصر HTML:

<!DOCTYPE html>
<html>
  <body>
    <h1>سلام دنیا!</h1>
    <p>این اولین صفحه HTML من است.</p> <script data-optimized="1" src="https://fahmidani.com/wp-content/litespeed/js/3b674914fd690b2d22c6fbf6445f080b.js?ver=0bc68"></script></body>
</html>

🔹 عناصر تودرتو (Nested Elements)

عناصر HTML می‌توانند داخل هم قرار بگیرند. مثلا در کد زیر، <h1> و <p> داخل <body> هستند:

<html>
  <body>
    <h1>عنوان اصلی</h1>
    <p>این یک پاراگراف است.</p> <script data-optimized="1" src="https://fahmidani.com/wp-content/litespeed/js/3b674914fd690b2d22c6fbf6445f080b.js?ver=0bc68"></script></body>
</html>

🔍 تحلیل کد:

<html> : ریشه‌ی اصلی سند HTML
<body> : بدنه‌ی صفحه که شامل محتوای قابل مشاهده است
<h1> : عنوان صفحه
<p> : پاراگرافی از متن

🔹 عناصر بدون محتوای HTML

برخی از تگ‌های HTML محتوا ندارند و نیازی به تگ بسته‌شونده ندارند. مثل:

<p>این یک متن است.<br>این خط دوم است.</p>

🔹 تگ <br> خط جدید ایجاد می‌کند.
🔹 عناصر خالی مثل <img> نیز وجود دارند:

<img decoding="async" src="image.jpg" alt="تصویر نمونه" title="عناصر HTML 1">

🔹 عدم حساسیت به حروف بزرگ و کوچک

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

<P>این یک پاراگراف است.</P>

🔹 اما استاندارد W3C توصیه می‌کند که همیشه از حروف کوچک استفاده کنیم. در XHTML، استفاده از حروف بزرگ خطا محسوب می‌شود.

🎯 تمرین کوتاه

❓ درست یا غلط؟ تگ <br> باید حتما یک تگ بسته‌شونده داشته باشد.
✅ پاسخ: ❌ غلط! <br> یک عنصر خالی است و نیازی به </br> ندارد.

🔥 حالا نوبت شماست! یک صفحه‌ی HTML ساده ایجاد کنید که شامل یک عنوان، یک پاراگراف، و یک خط جدید (<br>) باشد. 🚀