آموزش HTML - عناصر و تگ ها

در این درس میخواهیم بدانیم عناصر در HTML چگونه تعریف می شوند و همچنین تگ چیست ؟

کدهای HTML از عناصر HTML تشکیل شده اند .

به هر تگ به همراه محتوای آن یک عنصر در HTML می گویند .

هر تگ معمولا شامل دو بخش است (به غیر از چند تگ استثنا) .محتوای هر تگ بین تگ آغاز و پایان قرارداده می شود .

هر عنصر HTML با تگ شروع ، آغاز و با تگ پایان ، بسته می شود . تگ پایان به صورت نام عنصر همراه با یک اسلش رو به جلو ، تعریف می شود .

معمولا تگ هایی به صورت تک بخشی تعریف می شوند که محتوایی برای تعریف بین دو تگ نیاز ندارند مثل تگ br که محتوا ندارد و برای شکستن خط و رفتن به سطر بعدی استفاده می شود .

به مثال های زیر توجه کنید :

تگ شروع	محتوا	تگ پایان
<p>	این یک پاراگراف هست	<p/>
<h1>	این یک تیتر هست	<h1/>
<div>	این هم تگ div هست	<div/>
</ br>

بنابراین اینجا <p>....</p> یک عنصر HTML هست ، <h1>...</h1> هم یک عنصر HTML هست . گفتیم برخی از عناصر HTML هم وجود دارند که نیازی به بسته شدن ندارند، مانند عناصر </ img />، <hr> و </ br>. این عناصر به عنوان عناصر خالی از محتوا و تک بخشی شناخته می شوند.

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

تفاوت تگ HTML و عنصر HTML

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

به عنوان مثال، <p> تگ شروع یک پاراگراف و <p/> تگ بسته شدن همان پاراگراف است و متنی که میان این دو تگ قرار میگیرد محتوای آن پاراگراف را تشکیل می دهد .

نوشتن عناصر به صورت تو در تو

در HTML شما می توانید و البته که نیاز هم دارید که عناصر را به صورت تو در تو تعریف کنید . یعنی عناصری مثل پاراگراف ، تیتر و تصویر ، درون عناصری مانند body ، div و غیره تعریف می شوند و البته درون همان عناصر هم عناصری مثل بولد کردن متن استفاده می شود و ما با تعریف عناصر به این شکل ساختار یک صفحه را توسعه می دهیم و تکمیل می کنیم .

<!DOCTYPE html>
<html dir="rtl">

   <head>
      <title>عناصر تو در تو</title>
   </head>
	
   <body>
      <h1>این یک <i>تیتر ایتالیک</i> هست</h1>
      <p>این هم یک <u>زیر خط</u> داخل پاراگراف هست</p>
   </body>
	
</html>

کد بالا به شکل زیر در مرورگر نمایش داده خواهد شد

تگ های تو در تو در HTML

تگ های اصلی - درس قبلی

درس بعدی - صفات