عناصرhtml بصورت پيش فرض در نمايش مقدار بسته به نوعشان بدوصورت ميباشند .تعدادي داراي نمايش درون خط(inline) وتعدادي بلوكي(block) ميباشند.
يك عنصر سطح بلوك هميشه نمايش مقدارش را از خط جديد شروع مي نمايد، ومرورگر فضائي قبل وبعداز آن قرار ميدهد .اين فضاها تحت ويژگي پيش فرضmargin ميباشد، كه حاشيه گفته ميشود. .
براي نمايش مقدارعنصر سطح بلوك هميشه مرورگرعرض كاملي را با توجه به شرايط موجود منظور ميكند.يعني فضاي سمت چپ وراست گرفته وعرض باقي مانده را براي آن اشغال مي نمايد.
دوعنصر سطح بلوك كه بيشتر مورد استفاده قرار ميگيرند<p> و <div>ميباشند .
عنصر<p> يك پارگراف را براي سندHTML تعريف مينمايدو <div> يك بخش يا ناحيه راتعريف ميكند.
عنصر<p> ازنوع سطح بلوكي است
عنصر<div> يك عنصرسطح بلوكHTML است
مثال ـ<p> و<div>
<p style="border: 1px solid black">Hello World</p> <div style="border: 1px solid black">Hello World</div>
ليست عناصر سطح بلوكHTML مطابق زيرهستند :
| <address> | <article> |
| <aside> | <blockquote> |
| <canvas> | <dd> |
| <div> | <dl> |
| <dt> | <fieldset> |
| <figcaption> | <figure> |
| <footer> | <form> |
| <h1>-<h6> | <header> |
| <hr> | <li> |
| <main> | <nav> |
| <noscript> | <ol> |
| <p> | <pre> |
| <section> | <table> |
| <tfoot> | <ul> |
| <video> |
يك عنصر درون خطي ، خط جديد شروع نميشود، ومقدارش در همان خط جاري نمايش داده ميشود. همچنين عنصر درون خطي عرض ضروريش را اشغال ميكند.
بعنوان مثال <span> يك عنصر درون خطي است
مثال ـ براي عنصر درون خطي<span>
<p>This is an inline span <span style="border: 1px solid black">Hello World</span> element inside a paragraph.</p>
در جدول زير عناصر درون خطيHTML آمده است .
| <a> | <abbr> |
| <acronym> | <b> |
| <bdo> | <big> |
| <br> | <button> |
| <cite> | &lcode> |
| <dfn> | <em> |
| <i> | <img> |
| <input> | <kbd> |
| <lable> | <map> |
| <object> | <output> |
| <q> | <samp> |
| <script> | <select> |
| <small> | <span> |
| <strong> | <sub> |
| <sup> | <textarea> |
| <time> | <tt> |
| <var> |
نكته ـ يك عنصر درون خطي نميتواند عنصري از سطح بلوك را در بربگيرد.
عنصرHTML <div> محفظه ياظرفيست براي در برداشتن عناصر ديگر HTML
عنصر<div> هيچ ويژگي ضروري ندارد، اما style ، classو id براي آن بيشتر استفاده ميشوند.
امكا ناتCSS براي<div> جهت استايل دادن محتوي آن استفاده ميشود.
مثال ـ نمونه استفاده امكاناتCSS در<div>
<div style="background-color:black;color:white;padding:20px;"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> </div>
عنصر<span> يك محفظه درون خطي است، كه براي علامتگذاري متن يا قسمتي از سند استفاده ميشود.
عنصر فوق داراي هيچ ويژگي ضروري نيست، اما استفاده ازstyle ، classو id در آن رايج ميباشد.
استفاده از امكاناتCSS درآن براي استايل نمودن محتوي آن ميباشد .
مثال ـ<span> با استايل محتوي
<p>My mother has style="color:blue;font-weight:bold;">blue eyes and my father has style="color:darkolivegreen;font-weight:bold;">dark green eyes.</p>