فهرست مقاله [نمایش]

یک فایل HTML از عناصر ساخته شده است. این عناصر وظیفه ایجاد صفحات وب و تعریف مطالب در آن صفحه را دارند. یک عنصر در HTML معمولاً از تگ شروع <name tag> ، تگ پایانی </ name> و محتوای درج شده بین آنها تشکیل شده است. از نظر فنی ، یک عنصر مجموعه ای از تگ های شروع ، اتریبیوت ها ، تگ پایان ، محتوای بین آنها است.

توجه: بعضی از عناصر دارای تگ و محتوا انتهایی نیستند ،این عناصر به عنوان عناصر خالی یا عنصر خود بسته نامیده می شوند.

<!DOCTYPE html>  
<html>  
<head>  
    <title>WebPage</title>  
</head>  
<body>  
   <h1>This is my first web page</h1>  
    <h2> How it looks?</h2>  
     <p>It looks Nice!!!!!</p>  
</body>  
</html>

خروجی به اینصورت است

This is my first web page

?How it looks

!!!!It looks Nice

تمام عناصر موجود در تگ body در صفحات وب قابل مشاهده است.

تمام عناصر html نیاز به تگ پایانی ندارند.بعضی از این عناصر محتوا ندارند و تگ پایانی برای این عناصر بی معنی است.به این عناصر تگ های بدون زوج نیز می گویند مانند تگ <br>و<hr>.

Nested HTML Elements: عناصر تودرتو

شما می توانید در درون یک عنصر عناصر دیگری قرار بگیرند به این نوع نوشتن عناصر تودر تو گفته می شود.

Block-level and Inline HTML elements

تمام عناصر موجود در html به دو نوع تقسیم می شوند:

Block-level element:عناصر بلاک یا بسته
Inline element: عناصر خطی

Block-level element:عناصر بلاک یا بسته

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

در درون این عناصر هم عنصر بلاک هم عناصر درون خطی می تواند جا داشته باشد.

عناصر بلاک در html

<footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>,

<pre>, <section>, <table>, <tfoot>, <ul> and <video>.

<!DOCTYPE html>  
<html>  
             <head>  
    </head>  
<body>  
    <div style="background-color: lightblue">This is first div</div>  
    <div style="background-color: lightgreen">This is second div</div>  
    <p style="background-color: pink">This is a block level element</p>  
</body>  
</html>

خروجی

This is first div

This is second div

This is a block level element

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

Inline element: عناصر خطی

عناصر درون خطی عناصری هستند که بخشی از متن معین را متمایز می کنند و عملکرد خاصی را با آن ارائه می دهند.این عناصر با خط جدید شروع نمی شوند و طبق نیاز آنها عرضشان تغییر می کند. عناصر Inline بیشتر از سایر عناصر استفاده می شوند.

<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>.

<!DOCTYPE html>  
<html>  
    <head>  
    </head>  
<body>  
    <a href="https://www.javatpoint.com/html-tutorial">Click on link</a>  
    <span style="background-color: lightblue">this is inline element</span>  
    <p>This will take width of text only</p>  
 </body>  
</html>

خروجی

Click on link this is inline element

This will take width of text only

در جدول زیر برخی از عناصر اصلی HTML که بسیار مورد استفاده قرار می گیرند را آورده ایم.

تگ شروع	محتوا	تگ پایان	توضیحات
<h1> تا <h6>	تگ های عنوان	</h1> تا </h6>	این عناصر برای تهیه عنوان های صفحه استفاده می شوند.
<p>	تگ پاراگراف	</p>	این عنصر برای نمایش محتوا به صورت پاراگراف استفاده می شود.
<div>	برای ایجاد بخش	<div>	این عنصر برای ایجاد یک بخش در صفحه وب استفاده می شود.
<br>			برای شکستن خط استفاده می شود و از عناصر تک HTML است
<hr>			برای ایجاد خط افقی استفاده می شود و از عناصر تک HTML است