Lately, I've been noticing a trend. With all the Javascript frameworks having a battle royale to decide who's going to come out on top (React, Vue, Angular), proper HTML practices have been dwindling. It's become so much easier to write your HTML using Javascript that the div tag is truly starting to reign, and it's terrible.
So, without further ado, here's my top six list of proper HTML practices to make you a better developer!
1. Use Semantic Tags
One of the very first things that you should keep in mind when trying to write production ready HTML is to use "semantic" markup. Stop using div tags, please! For instance, rather than:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Welcome</h1>
<div>
<div>
<div>
<p>Some header</p>
</div>
<div>
<div>
Some subheader
</div>
</div>
</div>
</div>
</body>
</html>
Try this out for size:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<section>
<header>
<h1>Doc Title</h1>
<p>Some subtitle</p>
</header>
</section>
</body>
</html>
This is much cleaner, and is so much easier to decipher if another developer needs to access, modify, or fix a break in your code later. Many times, div tags are unavoidable for styling purposes, and it's in this area where they shine, but they should NOT be used as a catch all tag for any section or text manipulation you may need.
2. Use Lowercase for Your Markup
This one seems like a given, but I think it should definitely be said. Uppercase is reserved for text elements, React Components, and other use-cases. It's not for the markup. When I'm looking through a document's source, my eyes recognize important patterns that help me find whatever it is I'm searching for. I saw a site once that had been written with the HTML tags completely caps locked the entire time (ie <HEAD></HEAD>, <TITLE></TITLE>) - you have no idea how bad this messed with my tiny brain. I couldn't find anything. And then smoke started wafting out of my ears. I almost quit coding. Don't make people like me quit coding and start smoking, use lower case.
3. Pay Attention to Accessibily
There's a reason there are a lot of assets for learning accessibility in regards to web development. There are a lot of people out there that struggle with disabilities such as blindness or color-blindness. On top of just being a good person/developer, there's also compliance issues that you can end up with you facing a lawsuit. Do your research and study the WCAG and ADA standards to ensure you're developing a good product for all of your users.
Here are some really great resources for learning about accessibility
4. Don't Use Inline Styles
There are so many ways to style your documents anymore, it's getting insane. CSS, LESS, SCSS, SASS, Bootstrap, MaterialUI, Tailwind, CSS-in-JS, JSS, the makeStyles() hooks, and just so much more. Here's a tip that you can use no matter which you go with: don't ever use inline styling in your markup. It's a terrible idea that will literally send you on goosehunts for hours to figure out what's going on with your styling. Component level stying, global styling, choose any other way to style your elements, but don't inline style.
The reasoning behind this is fairly simple - inline styling sets the priority for that style higher than all of your other stylesheets, so that while you're using the stylesheets to tune and tweak your design, you'll have these pesky little aberations that will refuse to go away. You'll have to dive into your inspection tools and sometimes even dig around there for awhile before you'll find the exact place where that specific style (or lack thereof) is coming from. Beyond frustrating, let me tell you. The problem then grows exponentially when you're working on a site that wasn't written by you, but that you were hired to tweak or fix, and there are inline styles peppered through the code arbitrarily. Best practice is to keep all of your styles in the designated styling sections or sheets related to the project.
5. Learn How to Form
Forms are a type of data management that are not going to disappear any time soon. As such, learning the proper way to markup, and then use, form data is an invaluable skill. <fieldset>, <legend>, <label>, these are all semantic tags that definitely should be used in almost every form to ensure good behavior and ease of updating later. The attributes for form data make these things so much better, too.
<input type='email' name='email' id='email' placeholder='john@smith.com>
This can end up being kind of confusing sometimes, but well worth it to learn. Every attribute above can be integral in making your code function as you want it to consistenly. These really start to become even better when used in React and Vue, or alongside Bootstrap or MaterialUI, because each of those frameworks or libraries has boilerplate styling for forms and form validation that makes life a breeze.
6. Review Your Code
[Neatness] is all the next developer is going to care about...!
Don't ever settle for "good enough". Make sure your code stands out. Every piece of code you make is a work of art, and one that was created by you. I don't really have opinions on tabs vs spaces, or two-space vs four-space tabs, or semi-colon use, or even single quotes vs double quotes (let me know your opinions in the comments!) - I care about readability, structure, organization, consistency, and neatness, and here's a secret - that's all the next developer is going to care about, too! Feel free to make your code yours, but review it, edit it, and make it perfect for the next guy who has to work on it.
There it is, not much to it. Use semantic tags, structure your HTML well, use forms, make your sites accessible, and please - even if you don't follow any of the other recommendations on this article - don't use inline styling 😉
As always, leave your comments, thoughts, opinions and recommendations in the comments, let's have a conversation! If you'd like to employ my services to transform your web presence into a business aid instead of a hindrance, check out my website, or find me on Facebook. Hope everyone is having a great day! Now get out there and learn something new!
Top comments (2)
On point 2, it's worth noting that the traditional way to write tag names was uppercase. Although HTML syntax has always been case-insensitive for tag names, the vast majority of examples in all the standards up to and including HTML 4.01 used uppercase.
Lowercase only became the fashion when XHTML was introduced. XHTML is case-sensitive and only lowercase tag names are valid. Devs who tried to use XHTML correctly, which was common at one time (although most failed) were therefore forced to switch to using lowercase. The HTML5 standard continues this practice and most examples there use lowercase tag names.
Hats off, sir. You just taught me something. Interesting to know that, it shows a lot about the evolution of these languages. I use a lot of react and if someone started capitalizing my first letters on the html tags, I'd have a headache. 😁