MOUSELING.net
There really are right and wrong ways to use HTML
There is no incorrect way to use HTML. If it looks fine, the code doesn't matter!
This is one statement I've heard variations of thrown around a lot. Too much. Far too many times, in fact. I really understand the spirit—website-making is an art form, especially for us hobbyists. When creating visual art, there are several ways to construct a face or body, and lots of them can produce wonderful characters or equally realistic artworks. In visual art, there is no one "right way" to produce an image.
HTML differs from visual art in one crucial way, however. HTML encodes meaning, not the actual presentation. When you write HTML code, you tell the browser: THIS is a heading, THIS is a paragraph, and THIS is a link that leads to that Web page.
HTML and CSS are computer languages. HTML is made to be rendered by a browser program, using instructions given by CSS for easy visual styling. The standards for these documents exist as a formal specification that defines exactly what each element means and what can be done to it.
You might say, I didn't agree to follow these standards! There's nobody making me follow them! And that's true! There is no HTML Validity Police. But you did agree in a way: when you used <!DOCTYPE html> at the start of your Web page, you made a promise to follow the standards.
When you use this tag you tell the browser that this file is HTML, not anything else. The computer readies itself to display this document as intended, and it only knows how to do that because HTML has standards and therefore rules.
Your Web page should ideally be accessible if I take away all of your custom CSS and use the bland newspaper styling Firefox gives me by default. In fact, HTML is a markup language: I should be able to understand its structure even if I open with a text editor instead of a browser, just as I can understand that **this text is supposed to be emphasised in raw Markdown**.
If you use <h1> just to display large bold text, you are stating that this large text is a top-level heading. Are you telling the truth? I don't think I'm emphasising this text! Wow! is the same as This is the title of my Web page. We have several HTML tags intended for emphasis. A computer like a search engine or a screenreader trying to parse the structure might become confused and not even bother.
That's an obvious flaw, and you might say that nobody commits it anymore—but do you use the <center> tag to position your text and images, for example? I know many many of us who still do for the convenience. This tag doesn't have any meaning at all, so it's been a zombie since 1997 in favour of other positioning and styling methods. It only works for historical reasons. In the eyes of the standards, it's as bad as any other error. Content is separate from design—we have CSS and element classes for a reason.
How about utilising loads of <br> tags in one paragraph to split up your text instead of using several paragraphs? Don't say this doesn't happen—even I did it just a few years ago. Sure, it works, and in fact it feels great to see your words appear roughly the same in the editor and in the browser... but if you want that, a .txt file is what you're after. Imagine how this all might feel for someone with a screenreader trying to skip from your intro paragraphs to your main point? They can't!
It removes structure from your document. You can be as messy as you would like, but you are still writing your words into a language made entirely to describe them. The actual visuals in your Web browser are only a consequence of this structure, and changing the way they look is exactly what CSS is for.
With clean code and defined classes, your layouts can be easily changed via CSS and your pages are guaranteed to last. The use of semantic tags like <main> and <nav> help us define both structure and style immensely without even needing to involve new classes.
What if you were learning a natural language instead of a computer language? You would never be considered fluent if you did not work to fix your own mistakes. If you said me go shop yesterday buy food people would understand but it still wouldn't be correct English. Different ways of violating the syntax and grammar rules of HTML will have varying negative effects on usability, accessibility, and compatibility.
Humans are not perfect and humans are not machines, but we should always strive to be as close to perfect as possible. I'm not flawless—there are plenty of validity errors on this here site!—but I work hard to fix errors as I find them. Deliberately avoiding standards with the reasoning it doesn't really matter, it's correct as long as it works is a mindset built on complete misunderstandings. So is the notion that I'm not a professional, I don't have to follow rules.
The Web exists to share information on, so make sure you really mean what you're writing down!