Search code examples
htmlcssflexboxcss-gridspecifications

Why aren't there < flex > or < grid > elements?

Other display values have one or more corresponding HTML elements, such as:

  • block - div, p
  • inline - span, strong, etc.
  • list-item - li
  • table - table, table-row - tr, etc.
  • none - template

but display: grid and display: flex must be assigned through styling. I could see it being easier to read through the DOM if <flex> and <grid> elements were available.

Are new element types not being added to the spec now that custom elements can be made?

Solution

  • I could see it being easier to read through the DOM if <flex> and <grid> elements were available.

    You're suggesting combining content and presentation, which counters the separation of concerns principle that CSS was created to address.

    HTML is used for organization of content. CSS is used for presentation of content. Your <flex> and <grid> elements would combine these two concerns, which is the way things were in the 1990s, before the advent of CSS, when HTML did both.

    Also, what if I want my <article> to be a grid container, or my <aside> to be a flex container?

    Why not also have <block> and <inline>?

    Things start getting messy.

    Also, the premise of your question is incorrect.

    Other display values have one or more corresponding HTML elements ... but display: grid and display: flex must be assigned through styling.

    Actually, the display value of all HTML elements is assigned. The only difference is where the styling comes from.

    In raw form, HTML elements have no styles. They only have semantic meaning.

    It isn't until the browser assigns default styles that elements take on presentational meaning.

    Therefore, the only reason you can say this...

    Other display values have one or more corresponding HTML elements, such as:

    • block - div, p
    • inline - span, strong, etc.
    • list-item - li
    • table - table, table-row - tr, etc.

    ... is because the browser defined those elements as such with something like this:

    Appendix D. Default style sheet for HTML 4

    enter image description here

    As you can see, display values are assigned.

    So the browser sets a basic level of formatting for HTML elements. Changes and additions to these styles are left up to authors.

    Here's some more detail: