Home arrow HTML arrow Common HTML Mistakes
HTML

Common HTML Mistakes


Using the correct structure with your HTML coding is necessary for various reasons. First, as you learn to use the best practices, you will grow as a programmer and build a solid foundation for all of your future projects. Using the correct markup also enhances your siteís SEO qualities. As is the case when entering any new realm, jumping into the HTML world can present plenty of pitfalls and obstacles that can overwhelm you. Even if you have HTML experience, youíre human, and mistakes can happen. Here are some of the most common HTML mistakes that you should avoid to ensure that your coding efforts are maximized.

Author Info:
By: wubayou
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
August 12, 2011

print this article
SEARCH DEVARTICLES

Using the correct structure with your HTML coding is necessary for various reasons. First, as you learn to use the best practices, you will grow as a programmer and build a solid foundation for all of your future projects. Using the correct markup also enhances your siteís SEO qualities. As is the case when entering any new realm, jumping into the HTML world can present plenty of pitfalls and obstacles that can overwhelm you. Even if you have HTML experience, youíre human, and mistakes can happen. Here are some of the most common HTML mistakes that you should avoid to ensure that your coding efforts are maximized.

Forgetting to Include Your Doctype

If you want the different web browsers to render your code properly, you must remember to declare your Doctype in the first line of your document.  Doing so helps to identify the specific HTML version you are using, which will make your site appear in the way in which it was intended.  Declaring Doctype can get frustrating if it is not in the proper format.  To get the desired effect, your Doctype declaration must be correct in terms of spelling and case.  If you are having difficulty, you should look for a list of recommended Doctype declarations that will give you a template to work from.

Overusing H1 Tags

The <h1> to <h6> tags come into play when you want to define HTML headings.  The <h1> tag is used to define your most important HTML heading, aka your pageís title, while the <h6> tag defines your least important heading.  The best practice regarding the use of H1 tags can get a bit tricky, as it differs among the new HTML5 version and its predecessors.

Despite the advantages that HTML5ís innovation can provide, many people continue to use older versions preceding it and XHTML.  If you are one of these people, itís recommended that you use the H1 tag just once per page, and it should be place right in front of your pageís main content.  Unfortunately, many commonly make the mistake of having multiple H1 tags on a single page.

Now, if youíve decided to take the plunge and jump into HTML5, the opposite is recommended.  Here you should follow the HTML5 specification that says to use more than one H1 tag per page.  If you are wondering what the difference is, itís because HTML5 offers more page segmentation.  Itís important to note the differences in H1 tag best practices as you transition from pre-HTML5 to HTML5, or vice versa.

Skipping Sequence with Your <h1> to <h6> Tags

As mentioned in the section above, the <h1> to <h6> tags define HTML headings, with <h1> representing the most important heading, <h2> the second most important, and so on.  As these tags function in a logical sequence, you want to avoid skipping or omitting them.  For example, if you have a H5 tag, you should also have a H4 tag.  If you have a H6 tag, there should be a H5 tag, etc.

Forgetting to Use Alt Attributes

Images are obviously an essential part to any site, as they help to draw in visitors and keep your site interesting.  You may have great images on your site, but are they structured properly to get the most out of them? 

The HTML <img> tag has two required attributes: src and alt.  While the src attribute is normally included, for some reason, people tend to forget about the alt attribute.  The alt attribute is important because it functions as alternative text if an image is unavailable or cannot be displayed.  It wonít function as a mouse-over text, but it does give your visitor some descriptive information about the image in case something goes wrong. 

In addition to its informational function for visitors, the alt attribute is used by search engines and software applications known as screen readers that try to identify what is being displayed on the screen.  For these reasons, itís best to remember to include the alt tag when coding.

Using Capitalization for your Tags

Back in the day, you may have heard that it was best to capitalize your tags.  This mistake wonít necessarily ruin your coding, as it will still validate in the end.  Times have changed, however, and itís now recommended that you do not use any capital letters with your tags.  In fact, it goes against XHTML and HTML5 standards.  Besides, it just does not look good and ruins the uniformity of your code.

Overusing Line Breaks

The <br> tag is used to insert a single line break.  While it certainly serves a major purpose in your coding, you want to make sure you are using it properly, and not overusing it when there are better alternatives.  For instance, if you find yourself using several <br> tags in a line, styles would be more effective.  Similarly, lists should be used if you see that you are inserting line breaks frequently after every couple of words.

Showing a List with Line Breaks

If you are attempting to highlight items in a bulleted or numbered list, itís your best bet to use unordered list (ul) or ordered list (ol) tags instead of line breaks.

Forgetting to Use Quotes with Your Attribute Values

You should surround your attribute values with either single or double quotes.  Both will work fine, but if you really want to take things one step further, use double quotes.  Not only are they the most commonly used, but they are also easier to read.  Do not mix up your quoting pattern, because it will only cause confusion in the end.  If you choose single quotes, stick with that.  If double quotes are your preference, donít interject any single quotes.  Remember, your goal is to keep things clean, simple, and uniform as much as possible.

Using Onclicks

Onclicks can become troublesome if your visitor lacks JavaScript.  Why?  They break links, and your content will not be visible.  Even though onclicks were widely used prior to the introduction of jQuery and JavaScript, itís best to avoid them. 


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

All HTML Tutorials
More By wubayou


blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials