loading...

Is CSS replacing HTML?

Ryan Westlund on March 18, 2020

This might sound like a strange question, but I've been thinking about the "basic" HTML tags like <p>, <h1>, <dl>, etc all implem... [Read Full]
markdown guide
 

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.

 

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>

 

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.

 

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.

 

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

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

code of conduct - report abuse