Farvel Block & Inline - Velkommen HTML5

Innovationerne i HTML5-specifikationen er mange, og mange af dem understøttes allerede af størstedelen af ​​browserlandskabet - nedenfor vil jeg fremhæve en interessant ændring af reglerne for indlejringselementer. HTML har altid skelnet mellem blok- og inline-elementer. Dokumenttypedefinitionen af HTML4 navngiver for eksempel h1, p og div som blokelementer og a, span, img som inline-elementer.


Dette koncept er nu opgivet (af gode grunde). I nogle anvendelsestilfælde ignorerede mange webdesignere rigtigheden af ​​nævnte indlejringsregel om, at ingen blokelementer må placeres inden for indbyggede elementer eller standardadfærden ved hjælp af CSS-regler såsom display: inline; eller display: blok; (hvilket ofte førte til ugyldig kode) uden yderligere ado.

HTML5 blødgør nu denne skelnen og navngiver endog 9 forskellige kategorier, som et element kan høre til, hvorved et element kan være i flere kategorier. Den gamle sondring mellem blok- og inlineelementer kastes over bord, og der tages hensyn til de mange forskellige betydninger af tags på nettet. Dette har især den konsekvens, at de følgende konstruktioner repræsenterer gyldig kode:

<a href="#">
   <div>
      <h1>Yeah</h1>
      <p>
         Der ganze Block ist verlinkt.
      </p>
   </div>
</a>

En hel container, der indeholdt yderligere blokelementer, var tidligere kun mulig (med gyldig kode) ved hjælp af tricks (for eksempel ved absolut placering af et sammenkædet overlaylag). Alternativt blev overskriften og afsnittet sammenkædet - dette førte igen til redundans, og containeren er ikke klikbar. Med den velkomne tilføjelse til HTML5 er dette ikke længere et problem.

Tilbage