Indian Talent, Global Content |
New and Improved: May 2012
Just Launched - New eStore selling travel guides, editing courses, ebooks and special offers |
Ten Common HTML Errors
HTML is a markup language that is very easy to learn and use. It consists of a set of markup tags to describe web pages. These web pages range from simple to very complex with many nested tags, dynamic links and dynamic content. Even the expert programmers can miss some aspects while coding and this can not only make a webpage unresponsive at times but can also make it virtually unreadable. Many of these errors are simple and can easily be avoided by taking proper care during programming. Below are some of the most common errors to be avoided while creating web pages. 1. Missing/Stray < or > Brackets The HTML tags need to contain both the beginning and closing angle brackets. While coding it may so happen that the closing bracket either gets missed out or accidentally deleted. This causes the entire HTML structure to go haywire and can give out one to many cascading errors depending on which tag is missing the bracket. For example, if we type <ihello</i> world instead of <i>hello</i> world, the web page will only display the text “world” without the “hello”. If <p> tag misses the closing bracket, it can result in many cascading errors which may be unrelated and difficult to understand. 2. Missing/Incorrect Closing Tag or Incorrect Nesting of Tags HTML tags normally come in pairs like <td> and </td>. The browser uses the tags to interpret the content of the page. Some tags like <br> display correctly even if the end tag is absent. But other tags like <table>, <font> etc. do need the closing tags without which these elements will not render correctly and can produce unexpected results or errors. Empty tags need to be closed in the start tag like <br/>. We also need to make sure that tags are nested correctly. For example, if we write <b><i>hello</b></i> instead of <b><i>hello</i></b>, there will be errors. 3. Missing/Incorrectly Specified Attributes Attributes provide additional information about HTML elements. Every html element supports only some attributes. For example, font size is not supported in <th></th> or <td></td>. If you do <body bgcolor="white" text="white"> followed by <table bgcolor="green" > and the browser does not support table colors, the page will be rendered blank. Some elements require specific attributes such as "type" attribute for the "script" element and the "alt" attribute for the "img" element. Omitting these required attributes results in error. 4. Incorrectly Specified Attribute Values Attribute values should be quoted with double style quotes. When the attribute value itself contains quotes, single quotes should be used. If the closing quote is forgotten on an attribute value, the value of the attribute is assumed to be everything until the next quote. For example when we write <img src="x.gif> <!—some information--> <img src="y.gif">, src" value for the first <img> is the entire information up to the next double quote — in this case, the "y.gif" line. This will cause many cascading errors. 5. Missing or Broken Links A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document. Links are specified in HTML using the <a> tag. This tag is used in two different ways, one to create a link to another document using the href attribute and another to create a bookmark inside a document, by using the name attribute. Misplacing the </a> tag, providing incorrect url for the href attribute, missing the # sign while specifying the target name will all result in broken links. 6. Error 404 - Document Not Found or a Broken Image Icon Often it is noticed that the images work fine on the developer’s local machine and not on the server.One of the main cause is using the file:// URL type in the <img> or <a href> tags which pulls the file from the client and not the server. The URL has to be of the following type href=http://www.mywebsite.com/mywebpage.html Also it is the web standard to use the / (forward slash) in the URL. Take care to use the correct case for the filename and always use the correct extension for the file. 7. Illegal or Invalid Character in URL URLs can only be sent over the Internet using the ASCII character-set. They cannot contain spaces as well. URL encoding replaces unsafe ASCII characters with "%" followed by two hexadecimal digits corresponding to the character values in the ISO-8859-1 character-set. Therefore always convert the urls using URL encoding. 8. Incorrect Use of Reserved HTML characters in URL or Body Text Some characters such as less than (<), greater than (>), ampersand (&) and non breaking space etc. are reserved in HTML. It is not possible to directly use them in your text, because the browser will mix them with tags and error messages are thrown. These characters need to be replaced with their corresponding HTML entities in order to display them on the web page. Characters such as "%" and "/" have to be used with surrounding quotes. 9. Use of Tags/Attributes Not Supported By All Browsers Some of the HTML tags/attributes are not supported by all browsers. For example, using the attribute alt displays tooltip text on legacy browsers whereas only title attribute is supported by Mozilla for the tooltip text. It is important to use tags and attributes that are normally supported by all the browsers. In addition to this, mention the doctype specifically to let the browser know what type of HTML is being used in the website. This can help the browser to display the website properly. 10. Use of Inline Formatting Inline styles would be difficult to update on a larger site. When any value of the style attribute changes, we end up updating each and every page which is time consuming and tedious. In the process, we may accidentally cause error on the page by deleting a tag which in turn causes many cascading errors that are very difficult to fix. Having a CSS file ensures easier updates, requiring updates in only one place for every style change and keeps the web pages simple and maintainable.
Editor's note: Most articles submitted to Chillibreeze go through a selection process. Only 30 percent of submitted articles are accepted for publication on the Chillibreeze.com featured article list. All accepted articles are edited and proofread for glaring errors of punctuation and grammar. Sentence structure is changed in certain cases and sometimes, entire sections are rewritten. If you notice any errors that have slipped through the cracks, do let us know! (Email us at info at chillibreeze dot com). Chillibreeze's disclaimer: This is a contributed article and was published on Chillibreeze in January, 2011. The views and opinions expressed in this article are those of the author(s) and do not reflect the views of Chillibreeze as a company. Chillibreeze has a strict anti-plagiarism policy. Please contact us to report any copyright issues related to this article. The relevance of the facts and figures cited (if any) could change after a period of time.
More on Chillibreeze.comRelated links How to Easily Convert a Website to CSS
Other popular articles on Chillibreeze Warsaw on a Shoe-String Budget
>> Read more articles written by Chillibreeze writers:1. Articles related to Content and Outsourcing
|
Premium Services
Products Must Reads... Upgrade Your Writing |
Copyright 2004 - 2011 Chillibreeze Solutions Pvt. Ltd. |
