This post is dedicated to those who have just stepped into the world of web development. Below you will find 15 tips for writing HTML. Basically this is the beginner’s guide to HTML best practices. Most of the web pages are using HTML. The below mentioned practices will not only help you to create clean and well structured code but facilitate search engine optimization. Hope this will help in carrying out effective PSD to HTML conversion.
Close the Tags
Though, it is very simple, but still it is common practice which we see in everyday life. Sometimes, we do even omit <ol> and <ul> tags. Additionally, many chose to leave off the closing LI tags as well. There is an urgency to address this issue else you will face validation and compatibility issues in regards to coding.
Use of Meaningful Title Tags
One of the most important thing that assists in search engine optimization process of the website is the use of title tag. The title tag helps the web page to be meaningful and search engine friendly. The text written in the title tag is displayed in SERPs.
Descriptive Meta Tags
Apart from the title tags, other important things that assists in the search engine optimization of the website is the use of meta descriptive meta tags. When Internet surfer types in a keyword in its search engine bar, then meta tags are the attributes which make the web page more meaningful and hence search engine spiders could easily locate the required page for you. How does it work? The meta description tells what the web page is all about. It briefly describes the purpose of the website. The description differs from one page to other. You need to write a different precise text in meta description tag for each web page.
Use of Keyword Meta Attribute
This attributes basically constitutes of list of related and relevant keywords and phrases separated by commas. These keywords also do work in favor in making the web page more meaningful. Don’t be evil, don’t spam! Kindly do not try to do just keyword stuffing as it is not going to help you in the long way. You just required to add few words and phrases that describe your web page aptly.
Avoid Using Inline Styles
There are three ways to insert a style sheet. An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly!To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:
<p style=”color:sienna;margin-left:20px”>This is a paragraph.</p>
Though it looks Ok, but it can cause errors in the coding practices. Always create a separate CSS file for your styles. Just avoid doing styling during you are coding. But Ya, once you’re done with coding part, you may start with adding styles.
Place the Javascript Files at the Bottom
You need to properly place a JavaScript in an HTML page to make sure the browser executes it. It isn’t particularly difficult, but you do have to separate behavior (JavaScript) and structure (XHTML). One of the main parameter in Google’s algorithm for ranking a website is the loading time of the website. One of the main objective of the web development is to reduce the loading time of the website. Just place those Javascript files(if the purpose is just to add functionality) at the bottom, just before the closing body tag because when loading a script, the browser can’t continue on until the entire file has been loaded. The users will have to wait for long before getting anything on the screen to show up.
Divide Your Layout Using Divs
Using the <div> tag allows you to define the page in terms of the logical divisions of the page, not just the locations in the layout. If you are using <div> tag in combination with CSS, you will create a page which is easy to manage. Mostly it happens that a web page is constituted by different sections of content, so using these tags to divide them, you’ll be ready to style them however you’d like. Excessive use of <div> tags is also a bad practice. Some developers use this tag to wrap up multiple <div> tags that contain more <div> tags, creating a mountain of divs. It is just so meaningless to use this tag as the last resort where no other tag is found to be suitable.
Tag names in Lowercase
Keeping your markup lower cased is a good practice. Though capitalizing it does not cause any harm, but it does affect the readability of markup. So, it is quite good if you keep your all tag names in lower case characters. It also looks good to our eyes 🙂
Add alt attribute in the Images
The <img> tag embeds an image in an HTML page. It has two required attributes: src and alt. The ALT text should be composed as a suitable textual alternative to the image: sometimes that might turn out to be a description of the image, but in practice that choice seems to be wrong more often than it’s right. Using a meaningful alt attribute is quite important for writing valid and semantic code. Some may have ignored this part, but developer needs to fill up these sections for validation and accessibility reasons.
Proper Use of Headings
Use proper tags in order to improve your site SEO. Heading tags are a very important element in creating and maintaining a search engine friendly web site or blog. There are six header levels. These levels are as follows: H1, H2, H3, H4, H5, H6. The H1 header tag is the largest font size and H6 is the smallest. Search engines look for header tags because they form representations for finding content as well as pathways on your blog or web site.
Finish up Navigation with Unordered List
Almost all the websites/blogs have some kind of navigation status. It is not necessary that you use <div> tag to wrap up the navigation section. Rather, you use <ul> to end it up. The <ul> tag is meant to contain a list of items.
Use CSS Reset
It is quite debatable issue about using CSS reset. The best possible way out is to develop our own CSS reset. You may start with using some popular CSS reset like that of Eric Meyer’s, then gradually can embed your own style according to your requirements. If you don’t do this, you won’t truly understand why your list items are receiving that extra bit of padding when you didn’t specify it anywhere in your CSS file.
Learn to use Right HTML Elements at Right Place
With time, make sure that you are making yourself aware of all the HTML elements. Use them correctly for a semantic and meaningful content structure.
For Example:
- The <p> element defines a paragraph in the HTML document.
- The <body> element defines the body of the HTML document.
<ul>(unordered lists) when the order of the list items are not important.<ol>(ordered lists) when the order of the list items are important.dl>(definition lists) for item/definition pairs.- Instead of using <i> and <b>, use
<em>for emphasis and<strong>for heavy emphasis. - Instead of using <br> to insert a line between paragraphs, use CSS margin and/or padding properties.
All these things play a major in successful PSD to XHTML conversion.
View Source
Nobody becomes perfect on the very first move. In the initial stages, you may visit some good websites and check out how they have coded out different sections of the website. Even you may look for some good Javascript used by others and can apply the similar thing in your work. View the source and search the HEAD tag for the name of the script. It is good to learn from others but don’t follow the bad practice of stealing other’s design.
Validation of the Coding
You need to do validate your markup continuously. Well! It is not like that a markup which is not fully validated is a bad markup, and which is completely validated is great piece of work!
But still you need to download W3C markup validation or Firefox developers tool bar for validation purpose. It will look for errors, if any. Perform the task of validation frequently, so that you can avoid various issues which are difficult to resolve otherwise once you’re done with the project work.
You need to work on the above practices in order to become a good HTML Developers or coder. Basically, it forms the beginner’s guide because experts might not miss these good practices but probability is quite high that freshers would miss on any of these aspects. So, LEARN, LEARN and LEARN.
Hey, subtle must be your mildde name. Great post!