إن ابتكارات مواصفات HTML5 عديدة والعديد منها مدعوم بالفعل من قبل غالبية مشهد المستعرض - أدناه أريد أن أبرز تغييرًا مثيرًا للاهتمام لقواعد العناصر المتداخلة. تميز HTML دائمًا بين عناصر الكتلة والعناصر المضمنة. تعريف نوع المستند لـ HTML4 ، على سبيل المثال ، الأسماء h1 و p و div كعناصر كتلة و a ، span ، img كعناصر مضمنة.
تم الآن التخلي عن هذا المفهوم (لأسباب وجيهة). في بعض حالات الاستخدام ، تجاهل العديد من مصممي الويب صحة قاعدة التداخل المذكورة التي تفيد بعدم وجود عناصر كتلة ضمن العناصر المضمنة أو السلوك القياسي باستخدام قواعد CSS مثل العرض: مضمنة ؛ أو عرض: كتلة ؛ (والذي غالبًا ما يؤدي إلى رمز غير صالح) دون مزيد من اللغط.
تعمل HTML5 الآن على تخفيف هذا التمييز وحتى تسمية 9 فئات مختلفة يمكن أن ينتمي إليها العنصر ، حيث يمكن أن يكون العنصر في عدة فئات. يتم طرح التمييز القديم بين عناصر الكتلة والعناصر المضمنة في الخارج ويتم أخذ العديد من معاني العلامات على الويب في الاعتبار. على وجه الخصوص ، يترتب على ذلك أن البنيات التالية تمثل رمزًا صالحًا:
<a href="#">
<div>
<h1>Yeah</h1>
<p>
Der ganze Block ist verlinkt.
</p>
</div>
</a>
كانت الحاوية الكاملة التي تحتوي على عناصر كتلة إضافية ممكنة سابقًا فقط (مع رمز صالح) باستخدام الحيل (على سبيل المثال ، عن طريق تحديد موضع مطلق لطبقة تراكب مرتبطة). بدلاً من ذلك ، قمت بربط العنوان والفقرة - وهذا بدوره أدى إلى التكرار والحاوية غير قابلة للنقر. مع الإضافة الترحيبية إلى HTML5 ، لم تعد هذه مشكلة.