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

Question

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?

Answer 1

The answer to your question has to do with the separation of style from the data being presented.

The HTML tags that you use to display data should be chosen based on the type of data that you are displaying. For example, you'd use <li> when you're producing a list or <strong> when you want text to stand out. CSS gives you a lot of flexibility for modifying how the data is presented allowing you can change how data, such as text in <strong> or <em> tags, is displayed. The styles for many tags can be changed so that they behave like other tags. For example, you can make a <span> tag behave like a <div> tag and vice versa. However, you should not do this. In other words, the tags that you select should be based on the type of data being displayed, such as <li> for list items or <p> for paragraphs. Technically, you can never completely separate your data from how it is displayed, but you should attempt to do so as much as is possible.

<flex> and <grid> don't have any meaning with respect to the type of data that you want to display. Thus, they are styles that are editable using CSS (instead of tags).

Answer 2

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

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:

• Proper way to apply CSS to HTML5 custom elements
• <main> element not working in Internet Explorer 11