در HTML عناصر را می توان به دو دسته تقسیم کرد: عناصر Block و عناصر Inline.
عناصر Block
عناصر Block از یک خط جدید شروع می‌شوند و همیشه کل عرض موجود را اشغال می کنند.
مثال‌هایی از این نوع که تا به اینجا آموختید، عباتند از: <pre> ،<dl> ،<li> ،<ol> ،<ul> ،<p> ،<h1> - <h6>.
<html>
<body>
<p style="background-color:yellow;">Hello World</p>
</body>
</html>
یکی از عناصر مهمی که در این دسته (Block) قرار می‌گیرد، عنصر <div> است که معمولا از آن به عنوان نگهدارنده‌ای برای سایر عناصر HTML استفاده می‌شود. این عنصر می‌تواند ویژگی های style ،class و id را بپذیرد.
به مثال زیر و نتیجه‌ی آن توجه کنید:
<html>
<body>
<h1>Headline</h1>
<div style="background-color:green; color:white; padding:20px;">
<p>Some paragraph text goes here.</p>
<p>Another paragraph goes here.</p>
</div>
</body>
</html>
عناصر Inline
برخلاف عناصر Block، عناصر Inline از یک خط جدید شروع نمی‌شوند و تنها به اندازه‌ای که نیاز دارند، عرض سطر را اشغال می کنند.
مثال هایی از این نوع که تا به اینجا آموختید، عباتند از: <a> ،<img> ،<strong> ،<b> ،<i> ،<em>.
<html>
<body>
<b style="background-color:yellow;">Hello World</b>
</body>
</html>
یکی از عناصر مهمی که در دسته Inline قرار می گیرد، عنصر <span> است که برای علامت گذاری یا استایل دهی به بخشی از متن استفاده می شود. این عنصر می‌تواند ویژگی های style ،class و id را بپذیرد.
به مثال زیر و نتیجه آن دقت کنید:
<html>
<body>
<h2>Some
<span style="color:red">Important</span>
Message</h2>
</body>
</html>
⚠️توجه: عناصر Inline نمی‌توانند هیچ عنصر Block ای را در بر‌گیرند.
