May 16, 2019

XHTML in 2019

Why use XHTML? Because it's awesome, of course. It's strict, so it works just as you intend. It also doesn't let you do shit like not closing <li> tags. For those who like React ecosystem, it behaves the same way that JSX does, too (it's – arguably – vice versa actually, JSX is modeled after XML, and XHTML is XML).

Wait, it's still alive?

Yup.

Barebones XHTML template

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Well, hello there :)</title>

  <!-- Don't forget to close your <link /> / <meta /> / <whatever /> tags! -->
  <link rel="stylesheet" href="https://unpkg.com/awsm.css@3/dist/awsm.min.css" />
</head>
<body>
  <h1>Hey there!</h1>
  <p>This is a simple XHTML document in 2019.</p>
</body>
</html>

Converting existing HTML documents

python3 -c 'import sys, lxml.etree as e;import sys;print(e.tostring(e.HTML(sys.stdin.read()),encoding="UTF-8",pretty_print=True).decode())' < index.html > index.xhtml

Hosting XHTML on Netlify

Netlify doesn't serve index.xhtml by default. However, this is easily changed with a few lines in netlify.toml:

[[redirects]]
  from = "/*/"
  to = "/:splat/index.xhtml"
  status = 200

Your existing index.html pages will still work as usual, so you can either gradually migrate to XHTML or decide you don't care enough and just use XHTML for new pages.

Validating XHTML

Of course, you would like to validate your markup as XHTML is far more strict than HTML (which is the whole point). You can use the W3C Validator for that purpose. Sadly, I'm yet to find an editor plugin that works with XHTML correctly (most just do HTML validation, which, of course, fails).