دات نت نیوک
آشنایی با عناصر یا المان ها در HTML

اسناد HTML به وسیله عناصر آن و یا به عبارتی دیگر به وسیله المان های HTML نوشته می شوند (HTML Elements).


المان های HTML

المان های HTML از نوشتن یک تگ آغازین و یک تگ پایانی و محتوای بین آن دو تگ تشکیل می شود.

<نام تگ/>متن داخل تگ های باز و بسته<نام تگ>

یک المان HTML شامل تمام کدها از ابتدای تگ آغازین، متن داخل بین دو تگ و تگ پایانی است.

<p>نخستین استفاده من از تگ پاراگراف</p>
تگ آغازین محتوای داخل تگ
تگ پایانی
<h1> نخستین عنوان من از نوع عنوان با درجه اهمیت یک </h1>
<p> نخستین عنوان من از نوع عنوان با درجه اهمیت یک </p>
<br>


Note برخی از المان های HTML تگ پایانی ندارند.

المان های تو در تو در HTML

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

در واقع اسناد HTML از تعداد زیادی المان های تو در تو تشکیل شده اند

در مثال زیر از چهار عنصر (المان) HTML استفاده شده است:

مثال

<!DOCTYPE html>
<html>

<body>
  <h1>نخستین عبارت من از نوع عنوان</h1>
  <p>نخستین متن من از نوع پاراگراف.</p>
</body>

</html>

خودتان آزمایش کنید »

توضیح مثال HTML بالا

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

المان HTML با تگ باز <html> آغاز شده و در پایان سند با تگ بسته <html/> به پایان می رسد.

المان محتوای سند HTML یک المان دیگری است که با تگ <body> نمایش داده می شود.

<html>

<body>
  <h1>نخستین عبارت من از نوع عنوان</h1>
  <p>نخستین متن من از نوع پاراگراف.</p>
</body>

</html>

المان <body> بدنه سند HTML را که محتوا در آن قرار می گیرد تعریف می کند.

این المان با تگ باز <body> آغاز شده و در پایان بدنه محتوا با تگ بسته <body/> به پایان می رسد.

محتوای این سند توسط دو المان دیگر HTML به نام های المان <h1> و <p> درون المان <body> قرار گرفته اند.

<body>
  <h1>نخستین عبارت من از نوع عنوان</h1>
  <p>نخستین متن من از نوع پاراگراف.</p>
</body>

المان <h1> عنوانی را در بدنه محتوایی سند HTML تعریف می کند.

این المان با تگ باز <h1> آغاز شده و در پایان محتوای داخل آن با تگ بسته <h1/> به پایان می رسد.

محتوای این المان عبارت: نخستین عبارت من از نوع عنوان است.

  <h1>نخستین عبارت من از نوع عنوان</h1>

المان <p> یک متن را از نوع پاراگراف در بدنه محتوایی سند HTML تعریف می کند.

این المان با تگ باز <p> آغاز شده و در پایان محتوای داخل آن با تگ بسته <p/> به پایان می رسد.

محتوای این المان عبارت: نخستین متن من از نوع پاراگراف است.

<p>نخستین متن من از نوع پاراگراف.</p>

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

بعضی از المان های HTML در صورتی که تگ بسته (پایانی) آن را نیز فراموش کنید به درستی نمایش داده می شوند.

مثال

<html>

<body>
  <p>مثال متنی از نوع پاراگراف
  <p>مثال متنی از نوع پاراگراف
</body>

</html>

خودتان آزمایش کنید »

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

ولی همیشه نتیجه درست نیست و ممکن است تگ پایانی در جایی اشتباه بسته شود و در نتیجه خطاهای ناخواسته در نمایش صفحه وب شما تولید کند. از این روی، هر گز فراموش نکنید که از تگ پایانی استفاده نمایید.


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

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

المان <br> یک المان خالی است و بدون محتوا و بدون تگ پایانی استفاده می شود. از این المان برای شکستن خط استفاده می شود (دستور برو به سر خط).

المان های تنها (خالی) می توانند هنگامی که باز می شوند درون خودشان بسته شوند. برای مثال می توانید به جای نوشتن <br> آن را به شکل </ br> نیز بنویسید.

در اسناد HTML5 نیازی به بستن تگ های تنها وجود ندارد. ولی اگر می خواهید سند شما با اعتبار سختگیرانه تری نوشته شود که با اسناد قدیمی تر HTML هماهنگی داشته باشد و یا بتوانید آن را توسط تجزیه کننده های XML به راحتی بخوانید توصیه می کنیم تمام تگ های HTML را حتی تگ های خالی (تنها) را ببندید.


نکته مهم HTML: همیشه از حروف کوچک برای تگ نویسی استفاده کنید

تگ های HTML به بزرگی و کوچکی حروف حساس نیستند. برای مثال تگ <P> برابر است با تگ <p> و تفاوتی نمی کنند.

در اسناد HTML5 تفاوتی ندارد که از حروف کوچک برای نوشتن کدهای HTML استفاده می کنید یا از حروف بزرگ، ولی بر اساس استاندارد کنسرسیوم شبکه جهانی وب (W3C) یا سایر اسناد سخت گیرانه تر مثل XHTML که مطابق بر استاندارد اسناد HTML4 هستند، بهتر است از حروف کوچک برای نوشتن تگ های HTML استفاده کنید.


Note در سایت آموزشی علوم کارگزاران تجارت الکترونیک ایران همیشه از حروف کوچک برای نوشتن تگ ها استفاده می شود.
نظر و پرسش و پاسخ کاربران
  نخستین نفری باشید که می پسندید.
نمایش 0 نظر ترتیب نمایش

در صفحه "معرفی عناصر یا المان ها یا همان تگ ها در HTML": نخستین نظر دهنده باشید
مشاهده نظرات
نام

نظرات خود را مطرح کنید
*
*
*
*
*
Captcha:
آخرین اخبار و مقالات

آگهی ها
کارگزاران تجارت الکترونیک ایران
گرافیک پوسته وب سایت در کامپیوتر
گرافیک پوسته وب سایت در تبلت
گرافیک پوسته وب سایت در موبایل
طراحی واکنشگرا (Responsive)
پنل مدیریتی پیشرفته و کاربر پسند
قابل توسعه و ارتقاء و 100% داینامیک
امکانات کامل SEO برای موتورهای جستجو