Nelson3 Designs Blog

View the source code of a hand full of websites featured in CSS galleries today and you’ll often see the same errors appear time and time again. These mistakes are usually habits we picked up during our early days of coding that have stuck around due to lack of clarification. This post rounds up a collection of common HTML tag and element misuses and describes the best practice to correctly and semantically use them in your markup.

Misuse of the <br> tag

How not to use 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 <div> tag

How not to use the <div> tag

When we first get to grips with HTML and coding in CSS we often get carried away with our divs and surround almost every page item with its own div tags.

How to properly use the <div> tag

The <div> tag is perfectly acceptable to use to define the main page structure, but always try to use more suitable tags for your page elements. Paragraph tags, ordered/unordered lists and definition lists can be more semantic choices.

Misuse of the <small> tag

How not to use 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-size CSS property to control your text sizes. The <small> HTML tag is reserved for defining “smallprint” or legal text.

Misuse of the <hr> tag

How not to use 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

How not to use 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

How not to use the <img> tag

The misuse of the <img> is actually more to do with the misuse of its alt attribute. 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

How not to use 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

How not to use 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.

Written by Chris Spooner

Today we have a collection of some incredible and impressive HTML5 canvas and java-script experiments. Enjoy!

Coil

Google Gravity

Canvas ribbon & iOS4.2 device orientation

Sketch

404

BreakDOM

Move. Pick Up. Drop

Fight or Flight? (HTML5 game)

Make3D: Native Drag & Drop in browser

FlowerPower

Conductor

Z type

webGL water

Fish

Tree

HTML5 logo

Test

Canvascycle

Asteroids – HTML5 Canvas and JavaScript game

UltraLight

Chrysaora

Create Digital Poster Design with CSS3 Only

Create a rocking drop down navigation menu using css3

CSS Gradient Text Effect

The CSS-Only Accordion Effect

Create a rollover image using css image sprites

Rounded Corner Boxes the CSS3 Way

Styling Tables with CSS

Working with css3 gradients and understanding how they work

CSS Lightbox Effect

Animated Buttons using CSS3 Transitions and Transforms

Fluid CSS Speech Bubbles

Create a speaking block navigation menu using pure css

Create a Multi Color and Size CSS3 Buttons

Create a Stylish Contact Form with HTML5 & CSS3

Create Attractive Web Typography with CSS3 and Lettering.js

Part 1: Create a beautiful contact form from scratch using Photoshop, HTML, and CSS

Advanced (yet awesome) pure CSS3 boxes without using images

CSS3 Transition

Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5

Create Beautiful CSS3 Typography