Share your repls and programming experiences

← Back to all posts
XHTML Introduction
xxpertHacker

Thanks to @RayhanADev, @k9chelsea2, and @19wintersp for helping with the project.

An introduction to XHTML

I had joined Repl.it only slightly over a year, and I've been involved in web development for even less time, but there was always one thing that threw me off about web dev: the choice of languages.

If I were to develop a native application, I could choose from Swift, Go, Rust, Java, Python, C#, Perl, Scala, Kotlin, Dart, Julia, Scheme, or any of the other languages in existence, each with their pros and cons. but then I'm told that on the web... you don't get to choose at all.

All web pages are written in HTML, CSS, and JS; that's it. Repl says the same; there is a dedicated "HTML, CSS, JS" Repl after all.
It is looked down upon to even go against any of the "big three" languages.

I could write at least an entire essay on how HTML, CSS, and JS are anything but the best languages for the web and why they are far from future-proof.

But what's interesting is that I am willing to bet that your very browser supports more than those three languages.

Surely you have viewed an image through your browser? If so, your browser likely supports a plethora of image binary encodings.

Maybe you've watched a video on YouTube? Add in a bunch of video and audio encodings.

Have you ever heard of Flash? Add another language.

Some older developers might have heard of Java applets. That's another language to add.

Does anyone here on the bleeding edge of tech know about WebAssembly? +1 to the language list.

Surely you have heard of XML? XML is very close to HTML, although it's younger than HTML. Browsers support it, so make that one more to the list.

XSL is used by XML, just one more to the list.

XPath is used by XSL and JavaScript, make that an addition to the languages supported.

And guess what? The list goes on! So now, maybe you'd start to question why are web pages developed in HTML, CSS, and JS too.

Maybe they're just the best languages? To that, I say, "no, they're not."

If anything, I would suggest that you take a look at another language that your browser most likely supports: XHTML.

I believe that if everyone were to eventually use XHTML, the web would be better; this is merely an introduction to the language.

I present to you an informative, beautifully written web page in XHTML, supporting the use of XHTML, and explaining the very basics of the language:


Credits

Credits to @19wintersp for co-authoring the document, their contributions to the CSS, in particular, practically creating the entire navbar on their own, and many other miscellaneous contributions!

Thanks to Replers @RayhanADev and @k9chelsea2 for assisting with the CSS!

Thanks to @Kookiez, @Coder100, @SixBeeps, @DynamicSquid, @RYANTADIPARTHI, @VMTU, and @Whacko for all of their styling suggestions.


Getting XHTML on Repl.it:

Every upvote for the XHTML language request brings the language one step closer to being officially supported!

Voters
a-repl-user
KENNETHTRIPP
BenjaminHannan
MarcusWeinberger
DavidNam3
tussiez
Bugydragon
cgolden15
k9chelsea2
badst
Comments
hotnewtop
Whacko

You should make a tutorial like this on the tutorials page!

xxpertHacker

@Whacko If enough people care to see it happen... maybe.

EpicGamer007

@xxpertHacker i definitely would love to se it!

xxpertHacker

@EpicGamer007 Update, once we get XHTML on Repl, 100% guaranteed that I'll create a tutorial web application.

Just updated the post, check the bottom!

RayhanADev

I read it for the rant in the post YAY you finally posted this!!! Awesomesauce also you can make a Web Assembly repl (Imma make one from XHTML and petition to get it added)

xxpertHacker

@RayhanADev I've tried the Wasm Repls here, and it's so immature. My beta Chrome browser has more features. They need to update it (like every other language on Repl (except maybe Python3))

YAY you finally posted this!!!

Yes! I'm the slowest person out there, but we got it done... eventually!

xxpertHacker

@RayhanADev

(Imma make one from XHTML and petition to get it added)

Updated the post, linked the petition at the bottom.
The request has been around for two years... now I drop a web page in the language and pray harder.

Baconman321

The only problem I have with xhtml is that if I name something index.xhtml the Go server (or the web browser, whichever one does that kind of stuff) doesn't recognize it as the index file (which is sad since I actually like xhtml. I found out about it a bit before you went rambling on about how it is sooo good lol).

And what about HTML5 handlebars and HTML5 twig and such (templating languages but still).

Also, don't forget ASP.net!

xxpertHacker

@Baconman321

The only problem I have with xhtml is that if I name something index.xhtml the Go server (or the web browser, whichever one does that kind of stuff) doesn't recognize it as the index file...

Same for a number of servers :/
they usually like to jump the gun and call "index.html" your home page.
Usually, this is overridable behavior though; for example, Node.js' Express.js has an options parameter, allowing you to write { index: "index.xhtml" }, and it'll serve that as your home page.

Just look at your Go server's documentation.

And what about HTML5 handlebars and HTML5 twig and such (templating languages but still).

Here's the secret... they don't emit HTML, they emit text.
Just change the MIME type, and magic suddenly you've invented XHTML5 Handlebars and XHTML5 Twig.

I'm using templating and XHTML, shoot, I didn't even name my home page "index" at all, it's home.xml, I probably broke all of web dev best practice at once!

Also, don't forget ASP.net!

I almost threw up when I read that ^

Baconman321

@xxpertHacker LOL not like I use it (asp.net).

Oh wait, ASP.NET is basically giving HTML5 but as a different file type right?

xxpertHacker

@Baconman321 No, it serves plain HTML, it's not special.

Shoot, even PHP can send XHTML by changing the MIME. Most servers just assume HTML as the default. The article ^ says that HTML has more commercial power and hold.

All we need is more XHTML tools, and everyone'll be using it.

Btw: http://xahlee.info/js/story_of_xml.html

Baconman321

@xxpertHacker Wait how can PHP change the MIME type, it isn't a server itself, rather just a program that gets executed on the server before sending data. It can't handle any URL's or anything like NodeJS or Go or Python can.

xxpertHacker
Baconman321

@xxpertHacker Oh, well yeah you can set the header with the file. I don't know why I didn't think of that (I'm inexperienced with headers and such)...

INCOGNITO001

HEY!!! THIS IS A DISGRACE. HOW COULD FREAKING JS HTML OR UGH- CSS EVER, EVER, EVER "Look down upon" LANGUAGES LIKE C++ PYTHON OR EVEN- I KNOW THIS IS RIDICULOUS- C#???!?!?!?!?!?1/!?!?!!?!?!?!?!?!?!!?!?!?Also, I'm actually not mad but whatever UGH

xxpertHacker

@gjirtngisnt What do you mean? I never implied that a simple markup language was any better than a programming language!?

I did strongly suggest that XML is better than HTML though.

What gave that impression?

INCOGNITO001

@xxpertHacker "It is looked down upon to even go against any of the "big three" languages."

xxpertHacker

@gjirtngisnt Omg... I am referring to web development, and not addressing native development at all in the post, same applies to the web page.

To say that HTML is bad and that the web should've been built on something else generally doesn't go well.

Most of my code is for native development, not web dev, I would never even compare them since native code is always better than anything running on the web.

adsarebbbad
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> doesn't work for me
xxpertHacker

@adsarebbbad Where are you trying it?

Soon I'm going to use create a few tutorials showing how to actually set it up on Repl.it, unless it is added to Repl.

adsarebbbad

what do you mean "where are you trying it" @xxpertHacker

xxpertHacker

@adsarebbbad Do you have a Repl or something that I could look at?

What type of file are you doing it in, where in the document, etc?

xxpertHacker

@adsarebbbad Oh, found your Repl, the xmlns is missing the www. before w3.org, that's all it takes, you don't even need the DOCTYPE!

Check the first paragraph in #Interoperability.

adsarebbbad

ahh ok thanks @xxpertHacker

xxpertHacker

@adsarebbbad You're welcome. Good luck!

k9chelsea2

great tutorial, and I agree with most things said in the post, a lot of devs are now using either stuff like react or nextjs and many more langs to create websites that are not just solely html, js and css. Tailwind also comes to mind in the sense of styling.

xxpertHacker

@k9chelsea2 It's mostly JS nowadays.
Now here's the weird part, people aren't even using "raw" HTML anymore, they're practically using website "compilers," things that just emit websites and minify them.
So why output HTML at all?
XHTML is a better target for automated tools too!

k9chelsea2

noice

adsarebbbad

how do you make the title element in css?

xxpertHacker

@adsarebbbad
What do you mean?
Can you elaborate?

adsarebbbad

how did you style the <title> tag? @xxpertHacker

xxpertHacker

@adsarebbbad Sorry, I never got the ping. We didn't style the title element at all, the title element is what is shown at the top of the browser tab.

Check these for an example,
XHTML title element:

Browser tab title:

adsarebbbad

oh wait i was missing the www before the w3.org nvm @xxpertHacker

xxpertHacker
adsarebbbad
BD103

Have an upvote
You could look into highlight.js for highlighted code blocks. :)

xxpertHacker

@BD103 Thanks
@Coder100 had asked for syntax highlighting too, and originally I had thought about using a syntax highlighter, such as Moncaco or Ace, but I decided against it.

It would be much more complex, and it would require a good deal of JavaScript.

But feel free to fork the Repl if you want to!

(also, check Repl's highlighting on the site, it's terrible)

BD103
xxpertHacker

@BD103 Oh, also, I was kinda proud that it uses 0 lines of JS so there's that too...

[deleted]

This is a extremely helpful guide to XHTML coding. Thanks!

xxpertHacker

@AARIZHAZIQ You're welcome! Once we get the language supported on Repl.it, I'll probably set up a few tutorials.

Pizzaz4me

this looks like you put in a lot of work, and yes, we should get XHTML for all the language explorers on Repl.it

xxpertHacker

@PlaySoccer Thank you! Winter and I put in a whole lot of work, probably too much.
I doubt that they even need it for exporters, it would be the same as this HTML Repl, just directly serving XHTML.

JBloves27

It's on Trending!

xxpertHacker

@JBYT27 It's been at the top of /share since 30 seconds after it was released :)

Now let's keep it there!

JBloves27
Bookie0

pog

JBloves27
xxpertHacker

@JBYT27 What's more pog is that I updated the post; check the bottom now. (if that post becomes reality, that would be pog)

JBloves27
Baconman321

XHTML is cool. Yes, I truly have known the power of this for a bit now. Although, I don't need to use XHTML right now, but it's always tucked in my holster in the case I need to use it. Guys, seriously. What this guys is saying is true: XHTML is very powerful!!!

xxpertHacker

@Baconman321 XHTML isn't much more powerful than HTML. XHTML 2 was ingenious though!

Baconman321

@xxpertHacker IMO it is. You can define elements and style them. Although you can do this in html too (with javascript), in xhtml you don't need javascript to make elements. Generally it is really nice to have elements you may use that aren't in HTML standards yet or won't ever be.

xxpertHacker

@Baconman321 Indeed, it is. That is why I (and others) consider XHTML to be future-proof, whereas HTML depends on the standard to define the very syntax for the new elements, XHTML already has a format and syntax.

So, today, if you were to create an element in the standard, your XHTML page wouldn't break based on the tag's format if you open in an old browser, but it would with HTML.

In a way, XHTML can be considered a "lower-level" markup language, because it gives more direct or "raw" access to the structure that HTML does not provide. With that being said, I still believe that XHTML is easier to learn and use than HTML. In fact, it helped catch a few bugs that wouldn't have been caught otherwise in the making of the very web page!

Yet, without many users, and a small market share, no one will ever care about it. :(

Baconman321
JBloves27

Wow, very Cool! Thanks for the introduction!

xxpertHacker

@JBYT27 You're welcome!
I'm hoping that we could get the language to be supported by Repl.it soon!

JBloves27
CoolGuy27

@xxpertHacker I joined repl in june and started web development with html in august, I love this and am excited to learn more!
Edit:sorry if you had this in the page have not finished yet, how would I run xhtml on Repl?

RayhanADev

@CoolGuy27 well there actually isn’t an XHTML repl on repl.it but you can create .xhtml files and then link those (it’ll still work).

CoolGuy27

@RayhanADev ok I thought that would be the solution

xxpertHacker

@CoolGuy27 Actually, you might want to look at the Repl itself; I wrote the entire page in XHTML and styled using CSS. I'm just using some hacky HTTP redirect to make it work.

Repl.it does not have first-class support for the language yet, but I'm hoping that we could get enough people to upvote the three feedback links that I posted down here in the comments.

If we can get enough to vote, the language might end up on the list of languages along with everything else that Repl supports!

The links are also in the Repl's feedback.md.

Also, thank you, it's great to hear that someone liked it!

xxpertHacker

@RayhanADev Scrap what I had said earlier, I have updated the bottom of the post to contain the link to the original XHTML request (that I had forgotten about).

That's what we need to get upvoted.

CoolGuy27

@xxpertHacker one more question on it. How would I configure the .replit file to run xhtml

xxpertHacker

@CoolGuy27 You can't, .replit files have not effect on HTML Repls.
I'm just redirecting from HTML at the root to XHTML to mimic it.

CoolGuy27

@xxpertHacker ok thanks!

Kookiez

Nice!
Just a styling suggestion:
When you view the website in full screen, the font is a little too big. Could you make this font just a little bit smaller?

xxpertHacker

@Kookiez Mobile or desktop?

Kookiez
xxpertHacker

@Kookiez Can I get a screenshot and possibly your view-port dimensions?

Kookiez

@xxpertHacker viewport dimensions: 1920 x 937
screenshot:

xxpertHacker

@Kookiez Okay, it could be slightly shortened, I'll do it in a few hours, when I have time.

That would be in about... ~7 hours?

Kookiez
xxpertHacker

@Kookiez Oh, I forgot to ask, could you check it out now?

Kookiez

@xxpertHacker uh... it's still big?

xxpertHacker

@Kookiez @19wintersp They think it's still too large.

19wintersp

@Kookiez @xxpertHacker Really? 22px is too large?

Kookiez

@19wintersp @xxpertHacker thing is, it's the same size.

19wintersp

@Kookiez We've set rem to min(3.5vw, 22px): if your screen is big, it should be being set to 22px. If your screen is 1920px, it will be set to min(67.2px, 22px).

xxpertHacker

@Kookiez Updated, is it better?
@19wintersp I removed the @media screen and (min-width: 1024px) should we?

19wintersp
Kookiez

@19wintersp @xxpertHacker yay it works :D

19wintersp

@Kookiez Yeah, there was a piece of dead code which neither of us noticed. :)

DynamicSquid

Cool!

All web pages are written in HTML, CSS, and JS

Well, unless you make your own custom web browser :)

Like, a full web browser from the bottom up with a GUI front end, and a web engine backend, with networking as well.

I might do that soon

Have you ever heard of Flash? Add another language.

Isn't Flash dying?

xxpertHacker

@DynamicSquid A lot are dying/have died already, Java applets aren't supported, and Flash is pretty much dead already.

Let's hope this one doesn't though...

DynamicSquid

@xxpertHacker I heard that JS beat Java applets to the web. Also yeah, XHTML doesn't seem too bad, hope it sticks around

DynamicSquid

@xxpertHacker Your website is also turned out really nice btw!

xxpertHacker

@DynamicSquid Thank you! Winter and I worked hard on it.
It's actually written in pure XHTML.

Also, 0 lines of JS!
No gists, but it still looks great.

StringentDev

@xxpertHacker
]
here ye go, my screen is 1600x900

xxpertHacker

@Lethdev2019 That text isn't even that big, also, you're not Kookiez :/

(do you think that it's big)

StringentDev

Yes i think that is. @xxpertHacker

xxpertHacker

@Lethdev2019 Okay, same as I told Kookiez, in 7 hours I'll get around to it.

xxpertHacker

@Lethdev2019 Check now, does it still seem too large?

fuzzyastrocat

Nice! Though you do get more choice, since there's all the languages that transpile to JS (Elm, Roy, etc).

xxpertHacker

@fuzzyastrocat Absolutely, but there is a contrast, this language is natively supported. Plenty of languages transpile to the web languages, all sorts.

fuzzyastrocat

@xxpertHacker Yes, I'm just saying that there is more of a choice.