HTML coding isn't as hard as most other kinds of coding you might have to learn. Still, along the way we make a lot of mistakes. These mistakes can be put into three types of errors: skill-, rule-, and knowledge-based errors.
When you're learning HTML or you do an Common HTML Conversion Mistakes are bound to happen. So which is the most common type of error in these situations? It might not be surprising that the error most commonly recognized isn't knowing facts about HTML coding, or breaking coding rules, like syntax.
Skill-based mistakes account for 70.9% of all errors made when coding. Included in this error are true typos. It's time to be a better typist!
That still leaves almost 30% of the errors up to incomplete or incorrect knowledge and breaking the rules. Let's take a look at some examples so the next time things will go more smoothly.
Common HTML Mistakes When Coding
There are many things people convert into HTML, which necessitate two methods. One is manual coding of HTML, and adding a stylesheet later, or using some kind of software to do the heavy lifting. Either way, you get some serious errors and things don't work right.
For example, there are applications on the web to convert a PSD to HTML. A good tool, as opposed to reading your code line by line, might be using regex, and probably a regular expression cheat sheet, to find and parse common errors.
What are some common HTML mistakes when converting, or coding in general? Let's dive in!
1. Wrong or Missing DOCTYPE
First things first, you need to declare your DOCTYPE in an HTML document. Not all HTML is created equally and you really don't want your browser to guess or start making incorrect assumptions.
This is something that is often overlooked and completely one-hundred-and-one-percent necessary to make sure of.
2. Incorrectly Closing the Tags
An opening tag is easy to remember to do when you identify: "I need a new <div> here." But it isn't so easy to remember how many div tags you've nested. It's easier to see in a code editor which will increase or decrease the indent of each nested element as you go.
Make sure to close those </tags>!
3. Block Elements Poorly Formatted
Location, location, location! It's a tenet of real-estate and popularity and for a very good reason. The wrong placement of block elements screws so much up. The problem is that while the page may load correctly, most of the time, it overlaps different open and closed tags, which leads to more incorrectly closed tags.
It also negates the process of the code editor recognizing the order of nesting.
Every operation within HTML can and should be finished and closed before moving onto closing the previous one. As an example: <tag1><tag2><tag3>text</tag3></tag2></tag1> rather than <tag2><tag1><tag3>text</tag3></tag2></tag1>
Working from in, then back out, is the acceptable way. You can't skip layers and expect it all to be unicorns and lollipops. Pretty soon a gremlin will foul-up your plans because of breaking the rules.
4. Inline CSS
Inline CSS, while technically acceptable, is a huge mistake for even advanced coders to watch out for. Meant to be an exception to the rule, inline CSS often causes more problems than it solves.
Try to avoid it all costs, if possible.
5. Messy CSS Structure
This goes along with inline CSS for awful mistakes. Newbie coders jump around from place to place in the code, only looking at what is right in front of them, instead of the big picture.
Keep your CSS grouped, and try to start a CSS file with resetting all attributes. Everything below that line will take priority as it is loaded. A table of contents in comments goes a long way, as well as making sure to have comments that are searchable within your text editor.
It saves a world of pain over looking for a table style in among a bunch of header styles.
6. Missing your ALT tags
Alt tags in images are an incredibly useful resource and something that Google's crawlers love. If you're missing alt tags, not only are you missing out on vital SEO gold but if your image link breaks, your readers have no idea what the content of the image is about.
People can forgive the odd broken image link, if they know what information was there, at least.
7. Not Testing in Real Devices
To be sure, Chrome's code inspection tools are great. You can set up custom profiles, or look at an extrapolation of different popular device profiles, and even emulate touch screens. However, there's nothing like the real thing.
Try your designs and code on real-world devices like your phone, your colleague's phone, your partner's tablet, and at least two computers. The more devices available to you, the better. Different OS versions and device sizes and browsers will all render things in different ways.
As long as things are acceptable as they are, not perfect, you're good to go. Everyone expects a little hiccup on their device here and there, especially if it's an off-brand device or an odd size. If it's an iPhone XR or flagship Samsung, you should definitely do your homework.
HTML Conversion Mistakes: Converted
Common HTML Conversion Mistakes are bound to happen. Any mistake in CSS and HTML is bound to happen, in point of fact. Don't beat yourself up over it, just learn, correct, and move on—chances are that the mistake is minor.
The hard part is finding it.
If you enjoyed this article, you're not alone. Top Ten Notch is your go-to source for news on beauty, tech, sports, and home improvement. Make sure to browse our other great topics today!
