For most of us, remembering what it was like when we first started writing our own html codes seems like decades ago (for some of us, it was decades ago), so taking a step back and looking over the basics again is something we forget to do from time to time. Today, we remember and we take a look at some basic html coding mistakes that beginning developers make when first starting out.
Hopefully, by reading this article, you’re able to remember something you may have overlooked in the past or if you’re new to html, you’re able to avoid some of the mistakes I have made in the beginning stages of my web design career. If you’ve made these mistakes, don’t worry – most of us could check off every item on this list at one point or another in our lives. Just remember the solutions to each of these issues and your clients will thank you :)
1. Missing or incorrect DOCTYPE
In order to let your browser know what type of html you’re using, you need to call a specific DOCTYPE. In HTML 4.01 there are three primary DOCTYPE’s and remember, DOCTYPE’s ARE case sensitive. To find out more info on the DOCTYPE’s you can use, check out this page from w3schools.
2. Inline styling instead of keeping CSS codes in the CSS file
While this will not break your codes and cause errors on your page, it’s definitely a bad practice that a lot of new developers fall prey to. To keep things orderly and allow yourself the ease of editing in the future, always, I repeat, always add your css codes in a separate css file.
3. Not including the alt=”" tag for images
A lot of developers will write their html codes out for their images and forget that the alt=”" tag in your image code IS required in order to give you valid html coding. Another benefit of always using the alt=”" code is that the words you put inside of it will be shown if the image breaks for whatever reason and it also helps with SEO for your images (you would be surprised how much traffic your site can get from google image searches).
4. End tag for “div” omitted, but OMITTAG NO was specified.
This is an error you’ll see a lot of when you’re writing codes faster than your eyes can keep up with. Generally, you’ve opened a div tag but forgot to close it with a
. With a program like notepad++, you’re able to actually click on a piece of code and find where it ends at, which helps you find where there’s a missing div (or other piece of code like a form, list, ect).
5. Improperly nesting tags
While on the page everything will appear normal, writing your code improperly like this will break your valid code and cause other errors to appear in your code validation at times. By improperly nesting tags (ie:
Words) you’re not only causing errors, but you’re also making it a hell of a lot harder on yourself to edit codes in the future. Make sure you’re opening and closing tags in order, please & thank you :)
6. Not using only single or only double quotes (mixing them in)
I’ve been guilty of this numerous times in the past. When you’re writing your codes, you should generally stick to either using single quotes or double quotes at all times, but sometimes you’ll forget and type the wrong quote in and cause errors. I personally use double quotes in all of my codes as it’s easier to see the quotes when scrolling through the page of code and it’s helped me to remember that single quotes are only for content writing :)
7. Copy and pasting special characters instead of encoding them
Sure, you can get a © symbol to show on your page by typing it in microsoft word and just copy and pasting it into your website content area, but you’re going to get an error and on some browsers, it will not even show correctly. Instead, check out this page and encode your special characters.
8. Using tags that are depreciated
If you’re writing html code and you’re still using
or & instead of and codes, you’re definitely not keeping up with the web and the quality standards of coding. If you’re going to center something in a div on your page, make sure you’re using css codes to take care of that instead of littering your html file with unnecessary & depreciated codes. This page has a nice list of deprecated html tags and their updated codes.
9. Using line breaks to show a list instead of ul or ol list codes
When you’re writing codes to show lists in your content, some people will tell you to use
• at the beginning of the line and then a
tag at the end – this is wrong. Please make sure you’re using ordered or unordered lists when putting a list into your site. It’s the proper thing to do and it makes for much easier editing in the future.
10. Coding an entire website layout in tables!
The year was 1995. It was a time when the web was booming and tables were everywhere. The beauty of 1995 though, is that it’s the past and today, we’re not using tables anymore. So, stop using tables already!. Utilize the power of css and your layouts and codes will thank you. What would normally take you 100 lines of code if you were using tables to create a website layout could be done in 10 by using css codes.
What about you?
What mistakes have you made in the past when coding out websites or apps? Drop a comment and let us know.