DEV Community

Ryan Westlund
Ryan Westlund

Posted on

Is CSS replacing HTML?

This might sound like a strange question, but I've been thinking about the "basic" HTML tags like <p>, <h1>, <dl>, etc all implementing styling that's easy to implement in CSS. I read Eevee's Old CSS, new CSS a while back (it's a really great, just inspiring piece) and I found out that <center> used to exist but is deprecated. Huh. Of course, it would've been necessary back then because in the early days Eevee explores, CSS didn't even exist (!!).

So that got me thinking if some other HTML elements will or should eventually be deprecated now that CSS can do everything they do and is more flexible. I also found out about <small> not long ago, and although it doesn't seem to be deprecated, I'm questioning whether it makes sense to use (but I use it myself). It means the size difference isn't guaranteed to be consistent across browsers, which it is if I use <span style="small"> like I used to. I guess <small> has semantic benefits to crawlers and stuff. And having a default styling for a semantic role is useful, so not everyone's always inventing their own.

And I've had some places where I used to use <dl>, but ended up switching it to <h3>s followed by <div class="indent"> where .indent { margin-left: 1em }, because I wanted the <dt>s to be styled as <h3>s and I'd rather re-implement the behavior of <dd> than the behavior of <h3> on the <dt>'s.

And what of <table>? (I doubt I'm the only one that hates that element and the whole model it comes with, especially how it doesn't respect max-width:100%.) Might that eventually be superseded by display: grid, perhaps after a few more years when the W3C lops a few dozen more features onto things?

Discussion (5)

ahferroin7 profile image
Austin S. Hemmelgarn

No, CSS is not replacing HTML, at least not for what HTML is intended to be used for. The point of HTML is document structure. That's what it was always supposed to be about. And CSS does literally nothing for that.

<center> tells you nothing about what it's contents mean. Yes, centering text often used for headings, but it could be used for any number of other things. To even get close to guessing, you have to render the whole document visually and then look at the surrounding context to try and infer what it's supposed to mean. It's a similar case with <b> (which is also deprecated), bold text could be used for emphasis, or to draw attention to something, or just to offset one item from another, and you just can't tell from looking at the markup which it is.

In contrast, tables, when used properly, actually tell you about the structure of the document. They are, admittedly, a bit vague at times, but they differentiate actual tabular data from the grid layouts they used to be used for which display: grid (and, to a lesser extent, display: flex) was introduced to support. There's a concrete difference between a table of numbers and a grid layout in terms of how it should be presented in non-visual media. Description lists are a similar case. They actually got introduced in HTML 4.01 to cover a structural arrangement that was previously not cleanly expressible in HTML, which was often just done by hand in a manner reminiscent of what you're doing in place of them (on that note, the correct way to do what you want is to put an <h3> inside the <dt> tag, your current approach won't work correctly with any non-visual media unless you put some complicated ARIA attributes on everything).

That differentiation is really important for non-visual media, but it's also significant if you want to be able to parse documents sensibly. That's why HTML5 added stuff like <article>, <section>, <header> and <nav>, and all the new input types. Being able to match on those in a well structured document actually makes it a lot easier to index, and to subsequently find specific information.

facundocorradini profile image
Facundo Corradini • Edited on

hey Austin!

While I agree with the rest of your comment, it should be noted that <b> is not deprecated: it's the "bring attention to element" tag, which is generally styled as a bold text but doesn't have strong importance (i.e. a bold text on which a <strong> tag wouldn't make semantic sense). It's used for brand names, keywords in a summary, etc

And you should be able to differentiate why a text is bold by looking at the markup, that's the whole purpose of HTML!
If it's to mark emphasis, should use <em> (even if you decide to style it as non-italic, bold text). If it's to mark text of strong importance, then use <strong>. And to simply bring attention, use <b>

facundocorradini profile image
Facundo Corradini • Edited on

Hey Ryan!

Semantics are not about default styling. They are intended to indicate meaning. The whole idea is that the meaning shouldn't get lost if the media changes. You could consume the same HTML with different CSS throughout different applications that might style the tags in all sorts of ways. Maybe even consider print and voice output, and the meaning should stay intact.

If you mark something as <small>, you're indicating that it's a side-comment, like copyright notice or disclaimers, not that it necessarily should have a smaller font-size (even if the browser's defaults show them as such).

Tables are for tabular data. Having tables marked as such allows things like keyboard navigation. Trying to replace them with grid is a really bad idea.

CSS is not replacing HTML / semantics and never will. They are meant for different purposes. Tags like <center> got deprecated precisely to separate concerns when CSS came out, but current tags have semantic meaning so they're not going away.

yujiri8 profile image
Ryan Westlund Author

I think there's been some misunderstanding, as I never said that semantic tags would or should get deprecated. (I kind of was going to say in the opening paragraph that the title was hyperbole but I guess I forgot.)

You make good points about <small> and <table> though. I didn't even know that tables had keyboard navigation.

patarapolw profile image
Pacharapol Withayasakpunt

Maybe, but ECMA and web browser implementations doesn't allow that.

Some implementations, like Qt Quick unifies HTML, CSS and JS...