به نام خدا

یک عنصر HTML هرچیزیه که بین تگ آغازین و تگ پایانی قرار میگیره:

تگ آغازین * محتوای عنصر تگ پایانی *
<p> این یک عنصر پاراگرافه </p>
<a href=”default.htm”> این یک لینکه </a>
<br> این یه عنصر جالبه که پایین تر بهش می پردازیم تگ پایانی هم نداره

* تگ آغازین در زبان انگلیسی opening tag و تگ پایانی closing tag گفته می شود.

قواعد عناصر HTML یا HTML Element Syntax

در مورد Syntax یا قواعد قبلا توضیح کوتاهی دادم. در زیر چندتا از این قوانین رو مرور می کنیم:

  • یک عنصر HTML با تگ آغازین شروع میشه.
  • یک عنصر HTML با تگ پایانی تموم میشه.
  • محتوای عنصر همه ی چیزهاییه که بین تگ آغازین و پایانی قرار میگیره.
  • بعضی از عناصر HTML محتوای خالی دارن. یعنی بین تگهاشون هیچی نیست.
  • عناصری که محتوای خالی دارن تو همون تگ آغازین بسته میشن
  • بیشتر عناصر HTML صفت یا attributes می پذیرند

* شما در آموزش های بعدی با صفات آشنا میشید.

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

بیشتر عناصر HTML تو در تو هستند. یعنی میتونن شامل عناصر دیگه باشن. مثلا شما می تونید توی عنصر پاراگراف یه عنصر عکس رو وارد کنید:

همون طور که می بینید تگ پایانی پاراگراف <p/> بعد از عنصر تصویر قرار گرفته. یعنی به اصطلاح عنصر پاراگراف مادرِ عنصر تصویره.

نمونه ای از سند HTML

نمونه بالا شامل سه تا عنصر HTML هست. (قبل از اینکه ادامه صفحه رو بخونید این عناصرو پیدا کنید و نام ببرید. همینجور تمرینی!)

توضیح نمونه HTML

عنصر <p>

این عنصر یک پاراگراف رو توی سند HTML توصیف میکنه که با تگ <p> باز میشه و با تگ <p/> هم بسته میشه. محتوای عنصر هم اینه: این نخستین پاراگراف من است.

عنصر <body>

عنصر <body> بدنه‌ی سند HTML رو توصیف میکنه. این عنصر با تگ <body> شروع میشه و با تگ <body/> به پایان میرسه. همونطور که می بینید این عنصر مادر عنصر پاراگرافه. (همون قضیه تو در تو بودن)

عنصر <html>

این عنصر کل سند HTML رو مشخص میکنه که به نوعی مادر همه عناصریه که ما توی صفحه HTML می بینیم.

تگ پایانی رو فراموش نکنید!

بعضی از عنصرهای HTML رو اگه یادتون بره که با تگ پایانی ببندید شاید درست نشون داده بشن مثل:

نمونه بالا توی بیشتر مرورگرها درست کار میکنه چون تگ پایانی پاراگراف اختیاریه.

اما به هیچ وجه روی این حساب نکنید. بیشتر عنصرها اگه بسته نشن باعث بروز خطاها یا نتایج عجیب و غریبی میشن. نتایجی که واقعا سردردآور هستن (دیدم که میگما!)

عناصر HTML خالی

به عناصری که هیچ محتوایی ندارن میگن عنصر خالی (empty element).

تگ <br> یک عنصر خالیه که تگ پایانی هم نداره. کارش هم خیلی ساده و مفیده: تگ <br> باعث شکستن خط میشه. یعنی در واقع کار دکمه اینتر موقع تایپ کردن رو انجام میده.

راهنمایی HTMLـی: تگ‌ها به بزرگ و کوچک بودن حروف حساس نیستند (Case Insensitive) . تگ <P> با <p> هیچ فرقی نداره و بیشتر سایت ها هم از حروف بزرگ استفاده میکنن اما کنسرسیوم جهانی وب (W3C) توصیه میکنه که از حروف کوچک استفاده کنید.

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