كل عنصر HTML له قيمة عرض افتراضية اعتمادًا على نوع العنصر وعلي اي متصفح يتم تشغيلة. قيمة العرض الافتراضية لمعظم العناصر هي كتلة أو مضمنة.

عناصر الكتلة

يبدأ عنصر مستوى الكتلة دائمًا بسطر جديد ويأخذ العرض الكامل المتاح (يمتد إلى اليسار واليمين بقدر الإمكان).عنصر <div> هو عنصر على مستوى الكتلة.

مثال

<!DOCTYPE html>
<html>
<body>
<div>
  <h2>الاسكندرية</h2>
  <p>تضم الإسكندرية بين طياتها الكثير من المعالم المميزة، إذ يوجد بها أكبر موانئ مصر البحرية (ميناء الإسكندرية) فتمر بالمدينة نحو 80% من إجمالي الواردات والصادرات المصرية</p>
</div> 
</body>
</html>

عناصر الكتلة مثل

<a> <abbr>  <b> <bdo> <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>


العناصر المضمنة

لا يبدأ العنصر المضمن في سطر جديد ولا يشغل سوى أكبر قدر من العرض حسب الضرورة.

هذا عنصر مضمن <span> داخل فقرة.

مثال

<!DOCTYPE html>
<html>
<body>

<span>Hello</span>
<span>World</span>

<p>هو عنصر مضمّن ، ولن يبدأ في سطر جديد SPAN عنصر</p>

</body>
</html>

عنصر <div>

و <div>غالبا ما يستخدم عنصر كحاوية لعناصر HTML الأخرى.

و <div> تمت عنصر لا يتطلب الصفات، ولكن style، classو id شائعةالاستخدام في div

عند استخدام CSS مع <div> يمكن استخدام العنصر لتصميم كتل المحتوى واشكال مبهره:

مثال

<!DOCTYPE html>
<html>
<body>
<div style="background-color:blue;color:white;padding:10px;">
  <h2>الاسكندرية</h2>
  <p>تضم الإسكندرية بين طياتها الكثير من المعالم المميزة، إذ يوجد بها أكبر موانئ مصر البحرية (ميناء الإسكندرية) فتمر بالمدينة نحو 80% من إجمالي الواردات والصادرات المصرية</p>
</div> 
</body>
</html>

العنصر <span>

و <span>غالبا ما يستخدم عنصر كما حاوية لبعض النصوص.

و <span>تمت عنصر لا يتطلب الصفات، ولكن style، class و id شائعة الاستخدام لتشكل وسم ال span

ع عند استخدام CSS مع <span>ي مكن استخدام العنصر لتصميم أجزاء من النص بشكل جيد:

مثال

<h1>انت <span style="color:red">الافضل</span> دائما</h1>