با عرض سلام خدمت کاربران سایت codetalk.net ؛ با قسمت سوم از سری آموزش های html5 در خدمت شما هستیم. در این قسمت قصد داریم به معرفی عناصر html بپردازیم؛ پس با ما همراه باشید.

عناصر html

یک عنصر html معمولا شامل یک تگ آغازی و یک تگ پایانی می باشد و محتوای مورد نظر بین این دو تگ قرار میگیرد:

<tagname> Content … </tagname>
برای مثال :
<p> This is a paragraph </p>

 

تگ آغازی محتوا تگ پایانی
<p> This is a paragraph </p>
<h1> This is a heading </h1>
<br>

تگ هایی که هیچ محتوایی بین آنها قرار نمیگیرد، تگ خالی (empty tag) نام دارد و فاقد تگ پایانی میباشد. در جدول بالا <br> یک تگ خالی و فاقد تگ پایانی است. برای شکستن خط و رفتن به خط بعدی از این تگ استفاده میکنیم.

عناصر تو در تو

در html عناصر میتوانند تو در تو باشند؛ یعنی درون یک عنصر ، یک یا چند عنصر دیگر وجود داشته باشد.
تمامی اسناد html شامل عناصر تو در تو می باشند. مثال زیر دارای چهار عنصر می باشد:

توضیح مثال :

عنصر <html> کل سند را تعریف میکند و شامل یک تگ آغازی (<html>) و یک تگ پایانی (<html/>) می باشد.

عنصر محتوا یا <body> یکی دیگر از عناصر html  می باشد که بدنه سند را تعریف میکند. این عنصر نیز دارای یک تگ آغازی و یک تگ پایانی است.

در این مثال ، عنصر <body> دارای دو عنصر <h1> و <p>  است.

برای تعریف یک عنوان از عنصر <h1> و برای تعریف یک پاراگراف از <p> استفاده میکنیم. هر دو عنصر دارای تگ آغازی و پایانی می باشند.

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

برخی از عناصر html حتی در صورت فراموش کردن تگ پایانی، به درستی نمایش داده خواهند شد :

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

اما هرگز به این مورد تکیه نکنید! زیرا در صورت فراموش کردن تگ پایانی ممکن است با نتایج غیر منتظره یا خطا رو به رو شوید.

عناصر خالی

عناصری که هیچ محتوایی بین آنها قرار نمیگرد، عناصر خالی (empty elements) نامیده میشوند.

<br> یک تگ خالی و فاقد تگ پایانی می باشد.

عناصر خالی میتوانند درون تگ باز خود ، بسته شوند. برای مثال :  </ br>

در html5 نیازی به بستن عنصر خالی نیست. اما اگر میخواهید سندی خوانا برای XML parser ها ایجاد کنید، باید تمامی عناصر را ببندید.

و اما نکته آخر :

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

اما ما به شما پیشنهاد میکنیم که همیشه از حروف کوچک استفاده کنید.

منبع مورد استفاده در این آموزش

لینک منبع


دیگرقسمت ها
قسمت اول
قسمت دوم


منبع : کد تاک


نویسنده : میثم شمس