10 HTML Coding Mistakes

HTML Coding Mistakes

When you’re learning how to code in HTML, making tiny mistakes here and it’s is only natural. There are several common coding mistakes that we’ve all made at one time or another (and sometimes still make). Whether you’re a beginner or have been coding in HTML for years, those tiny coding mistakes can wreak havoc on your web development project. I’ve made a list of what I believe are the 10 most common HTML coding mistakes. If you’re just beginning to learn HTML or another web development language, I hope that this list will be of assistance!

Also, check out these cool HTML reference sheets so you don’t forget any common HTML tags. If you need a code editor to write your HTML code, check out these 4 awesome code editors for web designers and the best code editors for web designers.

1. Messy code formatting

Messy code is not only an eyesore, but it’s difficult to read. When you’re just starting out with coding, it’s crucial that you make it a habit of writing your code in a well-organized, structured and logical format to prevent any bugs. Here are a few tips; indent according to the structure of the family tags i.e. parent tags, child tags etc. Also, don’t use a combination of uppercase and lowercase letters; stick to one case (preferable lowercase). The code below is an example of neat and organized code formatting.



2. Spelling mistakes

One small spelling mistake in your code can easily break your website. Spelling mistakes in code is a very common reason why your website is not showing up the way it’s supposed to. Before you start coding another section,  spell-check your code.

3. Forgetting closing tags

Another common coding mistake is forgetting to put the closing tag to an opening tag. This mistake often occurs when you forget to double check your code to make sure everything is written correctly. In HTML5, it could be argued that some tags, like the <li> tag don’t require a closing tag. However, unless you’ve done your research on what tags and elements require closing tags and thoroughly understand proper HTML5 coding methods, be on the safe side (especially when you’re a beginner) and stick to using closing tags on all HTML tags.

4. Misusing “id” & “class” hooks

The difference between an “id” and “class” is not that clear for many web developers. To put it simply, id’s are unique and classes are not. In other words, you can only apply an “id” to an element once in a page. In regards to using a “class”, you can apply the same class to more than one element.

5. Ignoring the Meta section

Don’t ignore the meta section! This is where a lot of the SEO (search engine optimization) stuff goes. I completely understand your want to jump right into coding the cool visuals for your website. However, the meta data is important for search engines, like Google, to read very import information about your website.

6. Not using an HTML validating tool

Are you sure your HTML is valid? If you’re just starting out or you’re a total badass at coding HTML, you still should make sure you’re using an HTML validating tool. It’s the best way to make sure your code is up to the current HTML5 standards. It can also help check for any errors in your code that you might have missed. The HTML validating tool that I use to validate my code is the W3C markup validation tool. Let me know in the comments below if you know of any other HTML code validators.

7. Missing “ALT” text

It’s in good practice to make sure that your website meets accessibility requirements. There are many accessibility features in HTML. For example, using the “alt” tag inside the <img> tag is a good way to make sure your images are accessible for all your website visitors.

8. Using <b> for bold text & <i> for italics

The <b> and <i> are only used to visually make text bold or italic. To make sure your HTML is semantically correct and applies meaning to your content for the best SEO, use the tags <strong> for words with strong importance in your paragraph and <em> for words that should be emphasized. Both <strong> and <em> will bold and italicize the words respectively.

9. Using styles in HTML

It’s 2016, and in the front-end web development community, it’s really bad practice to add all your CSS styles inside your HTML file. All styling should be done in a separate CSS files. Keep it far away from your HTML code!

10. Patience

Despite all the mistakes listed above, it’s important to remember that patience is a virtue. You’re just starting out! Don’t be too hard on yourself if your website doesn’t look like it was designed by a pro. A great website takes a lot of planning, skill and experience. It also involves a lot of trial and error.

Now it’s your turn!

What are some coding mistakes that you seem to always make? What are some online tools that have helped you become a better web developer? What are some tips that you have for your fellow HTML coders? Let’s chat in the comments below!

Like this article?

I'm a Content Creator, Front-End Web Developer, UI Designer, based in Toronto, Canada. I have a healthy addiction to the internet, technology, and digital media. I'm so passionate about all things design and tech that I write about it any chance I get on my blog xopixel.com!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Comments

  1. I recommend using commends in all projects its really important if you want to work on it later.
    And make multible css files like 1 for your colors and one for your dropdown