HTML (Hyper Text Markup Language) was launched many years ago and since then it evolved so much that it is almost impossible to keep track of the new additions, especially of HTML5. Moreover, for new web designers it is even more difficult to avoid making costly mistakes; let’s face it, there are sources out there that don’t feature the best practices that could be. Some beginner designers learn how to code by analyzing web pages they like on the internet – and if those were coded by someone who is a beginner too, then there you have it – there are already two of them coding wrong. Another issue is that this spreads out very fast and it is almost impossible to learn how to code without mistakes anymore.

Throughout the time I noticed that most of the beginner designers (and quite frankly not only them) make specific mistakes, therefore I thought of making a list for you with some things I think you must have knowledge of. Now don’t think that once you know this, you know how to code properly – but if you want to be better at it, this is where you should start form. Without further introductions, here we go…

1. Converting characters

This is a huge one for validation. Many websites out there don’t get validated because the designers forget to convert their characters, such as “&”  or the circled C used for copyright matters, “©”. They can all be converted in HTML entities and this not only helps the site get validated, but also improves its loading speed. If you don’t know how to get these symbol codes, simply check this page at the HTML section.

Photo source: clickandinc.com

2. Dealing with the ellipsis

The ellipsis is when three dots are used in a sentence to indicate a break. Most of the people do it by simply typing three separate dots one after another, but there is also another better way of doing it. The ellipsis has its own HTML code (…). The advantage of using the HTML snippet is that the space between the dots is tighter, which means the ellipsis will be shown properly and not only like three dots separated by the normal space between characters.

3. Use of the em and en dashes

The em dash is the line which shows the separation of a thought within a sentence – the one which I’ve just used. If here in a text editor I can just use the character “-” from the keyboard, in HTML is is better to use the snippet called “—”. Not using it will not cause your side to fail validation, but from a design stand point it will look better.

It is the same issue with the en dash, which is usually used for replacing “to” in places where you show ranges, for example temperature. The snippet for it is “–”.

4. Mathematical symbols

Other symbols designers forget to code instead of just copying them are the fractions. Although they are not used so often (or maybe especially therefore) designers don’t know every fraction has its own code. Instead of writing 1/4, 1/2 or 3/4, just use “¼”, “½” or “¾”.

Photo Source: featurepics.com

Other mathematical symbols you could insert by code are * = “×”, /=”÷” and others. You can also find all of them by a simple Google search.

5. The degree symbols

When you wish to insert a value measured in degrees, such as temperature, longitude or latitude, don’t just copy the symbol from who-knows-what website. Insert it by using its HTML snippet: “°”.

As said before, all of this mistakes will not cause your website to fail validation, but as people say: “If you do something, better do it right”. Insert all these symbols properly and the loading speed of your site will improve as well. Now we will move on more important mistakes that you should really not do, because they will not only affect your loading speed, but might even make your website now show properly.

6. Use the same IDs

Using the same IDs within an HTML page is a problem because the IDs are used to identify a unique instance of an element. It is wrong to call the same ID twice in an HTML page. If you need to do that, you can use classes, but having multiple IDs can get very messy. Never call the same ID twice, instead try to find some other names for the ID and define it the same in CSS. This also happens often to web developers, who forget that when they have a loop that creates content, the loop needs to be iteration, so each new content post will have a new ID.

7. Use breaks in paragraphs

This is generally a bad one because a paragraph tag is used for paragraphs of text, not for the whole text of a website. Breaking lines in <p> with a <br /> is wrong; instead, use <p> as many times as you need, one for each real paragraph of text you have. The advantage of doing this the right way is that you can adjust the padding of a paragraph as you go, while you can’t do it for a break tag. You can also assign a class to each paragraph, thing you can’t do to a break tag.

8. Using depreciated tags

Most of the problems come for designers who try to make their text stand out by either making it bold, italic or centered. The old ways of doing this were <b> for bold, <i> for italic and <centered> for aligning the text to the center. These tags have been replaced since almost forever and the new ones are <strong> for bold text and <em> for italic. There is no HTML tag for centering text anymore. The right way of doing it is assigning the line of text an ID or a class and defining it in CSS with text-align: center;.

9. Lacking Doctype declaration

Although it might not seem important, the Doctype declaration describes what kind of HTML you are using. It’s impossible to know if your code is valid if the validator doesn’t know what it should look for. Designers usually leave it out because it’s really impossible to remember the long lines of code. The way of solving this problem is always having a blank HTML/CSS document which you start from – it should include all the necessary things like Doctype declaration. This way you won’t have to remember the lines of code anymore, but you can ensure you will always use them.

Photo source: w3avenue.com

10. Missing alt declaration

It’s important for all the images in a document to have the “alt” tag attributed. This is required as of HTML 4.01 because it specifies an alternate text for the image. If the image can’t be displayed for whatever reason, the “alt” tag will be displayed. The right way of inserting an image is this one:

<img src=”images/photo.jpg” alt=”Main Picture” title”Main Picture”>

Now I am not saying the title and the alt should be the same (this is entirely up to you), but even if the second one is not a requirement, I advise you to declared both the “alt” and “title” tags.

11. Forgetting to close tags

This is another one that happens quite often. Most of the time it will cause your page not to display properly and in some cases (such as forgetting to close the <title> tag) will cause your web page to be shown as a blank one. Not closing some tags is also critical for validation and I am sure this is one of the first things a validator looks for when checking a page.

12. Improperly nesting tags

If you open several tags in row, it is really important to close them in the same order. Sometimes not doing this will not affect your website’s visual (although the validation will never be given), but in some other cases this will cause your page not to be shown properly; now you don’t want this, do you? Look at the two examples below, the first one is the bad one, the second one is the correct way of nesting tags:

<div><strong>This is the text</div></strong>

<div><strong>This is the text</strong></div>

13. Using capital letters in tags

Although not considered a crucial mistake, your code will not validate if you use capital letters in your tags. Using <DIV> instead of <div> is wrong and will not cause problems to your page, but the loading speed will be slower and no validator will give you a certificate.

Photo source: http://lec-academy.ro

14. Incorrect use of position

This is also an issue you need to understand. When defining the position of an element, the choices are static, relative, absolute and fixed. The first one is the default option and means that an element is positioned according to the page flow. A relative element is positioned relative to itself, allowing you to move it however you want on the page. The absolute positioning also means you can place the item anywhere on the page – and this is why this one is the most misused position statement. The values you set for such an element are relative to the last parent with relative or absolute positioning; if there are not any of them, it defaults back to the html tag and allows you to position the element wherever you want by declaring top, left, right or bottom values. The last option, fixed, is positioning an element relative to the browser windows, so if the user has to scroll, the element will stay in the same place. It is important to learn how to use those positioning statements correctly.

With this last one I close the list of mistakes you should never make in your HTML page. Sure, there might be more of them, but these ones I consider to be the most important to avoid – these ones are also the most problematic for your code. Learning how to code properly in HTML is important for you regardless of your role in a project, because the HTML is where it all starts from. If you don’t know how to walk, you won’t be able to run. Learn how to walk properly and learning how to run will be much easier for you.