Common HTML Tags Misuse in writing the Markup
Posted on Blog by Creative Camel on Wednesday, 28 March 2012 16:48

If you are learning to write HTML or you have been a very good codeMonkey on HTML, here are some list of things you are using to write HTML markup time and again is actually wrong. These mistakes are usually a kind of habits you may be picked up during your early days of coding that have stuck around you. This post provides a collection of common HTML tag misuses and describes the best way to semantically write a HTML markup.

Misuse of the <div> tag

This is the main HTML Tag we usually use in our Markup's and this should not be used each and every part of the markup, We usually use this tag more often in enclosing all of our content in our markup's even if it is a content or image or anything. This is wrong.

How to use the <div> tag correctly

The <div> tag is to be used to define the main page layout and for the enclosing of all the Block elements into a kind of container, but always try to use more suitable tags for your page elements. Paragraph tags, ordered/unordered lists and definition lists for their appropriate functionality which can be more semantic.

Misuse of the <br> tag

A common misuse of the <br> tag is to use it to create spaces or gaps in your content. WYSIWYG editors are notorious for injecting multiple line breaks or empty paragraph tags.

How to properly use the <br> tag

The <br> is used to insert a line break in a sentence. Examples might be to correctly lay out an address. Use paragraph elements to split up your content and use CSS margins to alter the spacing between them.

Misuse of the <small> tag

The <small> tag is often wrongly used as its name suggests, to create text that’s small in size.

How to properly use the <small> tag

CSS should always be used for presentational styling, so use the font-sizeCSS property to control your text sizes. The <small> HTML tag is reserved for defining “smallprint” or legal text.

Misuse of the <hr> tag

The use of the <hr> is pretty rare these days, but when you do see it you can guarantee it’s being misused as a presentational line between sections of a page.

How to properly use the <hr> tag

These days the CSS border property is the correct solution in most situations, however the <hr> tags still has its use in specific situations when defining layouts containing copy such as book chapters or poetry stanzas.

Misuse of the <title> tag

In most cases the HTML <title> tag (not the attribute) is misused in two extremes. It either contains no valuable information, or it’s packed full of endless keywords for “SEO”.

How to properly use the <title> tag

The <title> should accurately but concisely describe the contents of the page. It’s important to include keywords that relate to the content as it is recognised by search engines, but it shouldn’t be abused.

Misuse of the <img> tag

The misuse of the <img> is actually more to do with the misuse of its altattribute. Often the text within the alt attribute is completely irrelevant (if it exists at all!).

How to properly use the <img> tag

<img> tag alt attributes should contain an accurate description of the image. If the image is being used as a link give an insight to where the link will go. If the image has no importance an empty alt attribute is acceptable.

Misuse of the <label> tag

<label> is another tag that is often left out altogether rather than being misused. When it does appear it rarely includes the for attribute.

How to properly use the <label> tag

Use the <label> tag to relate a field to its descriptive label. For extra usability points add the for attribute to allow the user to click the label to activate the relevant input field.

Misuse of the <address> tag

The name of the <address> wrongly suggests that it should be used to surround a postal address on a contact page.

How to properly use the <address> tag

The correct use of the <address> tag is to define the author or owner of the document. Therefore it’s usually wrapped around their name along with their contact email address or telephone number.

 
35 Free UI Element Kits and Stencils for a perfect web template design
Posted on Blog by Creative Camel on Monday, 11 April 2011 18:41

We designers would spent lots of time in making wireframes and mockups's of web pages, in which they have to use Web UI elements again and again. They can really save time if this Web UI element kits and stencils which are already available to them for free. Here are some list of 35 completely free Web UI kits and stencils, which can be used in creating initial mockup or wireframing.

1. Free Web UI Element Pack

Some of the tools that you can use them is Loading Bar, Button, Toggle Button, and also random applications. Some of these tools you can optimize in order to become even easier for you just learning about the user interface.

Free UI Element Kits and Stencils for a perfect web template design

Read more...
 

Need a custom design, Contact us






Most Voted Template

Creative Camel 22/03/11
 
Copyright © 2011 Creative Camel - All Rights Reserved