Goodbye Block & Inline - مرحبًا بـ HTML5

إن ابتكارات مواصفات 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، لم تعد هذه مشكلة.

عودة