Do you think the differences between HTML and XHTML are generally well-understood?

React really threw a wrench in webdev by making XHTML cool. I think the subtle differences to look out for between HTML and XHTML got lots of attention when it was new, but now that React is so standard and so widely adopted in bootcamps I'm worried that some of the gotchas are getting overlooked.

Thoughts?

Did you find this post useful? Show some love!
DISCUSSION (16)

I never thought I'd see "React" and "XHTML" in the same sentence. I also don't really see how the two are related, per se? I mean, JSX requires self-closing tags to feature the forward slash, as did XHTML, but I don't see how they're related. Perhaps I'm missing something? 🤔

And to be honest, I'd posit the question, "Is HTML generally well understood?"

Too often do devs subscribe to the idea that "HTML is easy." Just throw some divs around in there and call it a day. When in reality, the purpose of HTML is to not only structure our content, but ensure semantic meaning in our UIs as well. Mix this in with the ARIA spec, maybe add a touch device for good measure, and try to convey the correct meaning for folks to comprehend our fancy UIs… it is not easy.

I struggle to come up with the "correct" elements to use often, almost daily in my accessibility assessments. I'm also learning about all the other elements available in the spec. (For example, did you know there's an output element? Bizarre, right?)

What's important to take away here is whatever element is in use, you can (usually) style it for your needs. Whatever the final design calls for, don't base your HTML solely on the look. Consider what's under-the-hood, ie, the semantic meaning of the thing in question so that folks who depend on assistive tech will understand what it is they're interacting with. Then, style as required.

Hmmmm JSX is typically described as more or less aligned with XHTML, but yes it's its own beast. Perhaps I'm leaning too much on the early suggestions from the React folks to think XHTML, and maybe it's not as much of a talking point these days.

As an aside, do you type <br> or <br/> if you use that element in HTML? Just curious.

I typed
for a long time, I still refuse to not type selected="selected" old habits die hard I guess.

This is a classic markdown-attempt-to-write <br/> 😄

I should give one beer for each markdown error :))

<br> in HTML, <br/> in React. But really I'd probably just use CSS. 😅

Now that I think about it, pretty sure I only ever use br when marking up an address. 🤔

<address>
  Name<br>
  Street St.<br>
  City<br>
  P0S 7A1
</address>

JSX is more inspired by an obsolete standard called E4X which in fact uses JS for processing XML. So in that sense it is indeed XHTML, but just because of the fact of processing XML. I don‘t think that the React team focused on XHTML because they thought it should be pushed, but this is just my opinion 😊

I didn't know anyone still used XHTML to be honest. I thought it was a grand experiment that was killed off by people not caring about how it was used and writing pages which broke in Internet Explorer, because Internet Explorer was actually doing The Right Thing.

Mind you, I don't do much front end stuff these days, and React is something that's always on my "to learn someday" pile.

React's JSX is XHTML-like. It's neither HTML or XHTML or JavaScript. It's its own thing, but I think people can get tripped up when their React linter tells them that <div></div> should be <div /> but then they don't fully understand that self-closing tags are not a thing in HTML otherwise. And it's a mistake that won't throw an error but could cause a big mess down the line.

I wish self-closing tags were a thing in HTML(5), because <div></div> and friends are sometimes unnecessarily noisier than <div />. Probably the only feature of XML I like anyway.
I still write a lot of my <meta />s that way, even if not needed, but I run it through tidy, so it makes the HTML the way browsers mostly expect it to be. :shrug:

Honestly, I've been working with HTML for ages and it wasn't until I started learning how to use APIs late last week that I realised there are some actual differences between HTML and XHTML.

Right now, my understanding is it's just a 'dialect' of HTML that's strict in formatting and that it's sometimes used in APIs? Does React actually require XHTML, though?

Edit: Woops! I got XML and XHTML confused :) Hah, maybe that's the issue!

No. I don't even know the difference between the two terms beyond "XHTML have a X"

XHTML must be a well formed XML document. In other words every XHTML document is XML, but not every XML document is XHTML.

In simpler terms - "well formed" means all the tags need to close (or self close) and all attributes need to be in double quotes.

The other difference is that for an XHTML document to be valid it must to conform to the XHTML schema.

This was important when it was thought XML was so important it would eventually take over the world and so naturally it followed that the solution to every problem had to be more XML.

Fortunately the world saw sense before this ever became a reality.

Whats XHTML? I dont even know what XML is lol... Seriously its not going to be fun if I had to guess

I know I don't fully understand the difference. But they're the same in the sense that your code might not work in your target devices and then you tweak it until it does work.

I randomly try


,
,
until one works.

Let's see who will figure it out.

Classic DEV Post from Apr 27

Github repos for learners

I would like to start this with some ice breaking sessions for people wanted to...

Ben Halpern
A Canadian software developer who thinks he’s funny.

A blogging community of over 100,000 software developers Join dev.to