Accessibility - Writing Semantic Mark-up

In one of my previous posts “An Insight into What Search Engines like”, I discussed a point on having a clear information hierarchy.
Clear information hierarchies are obtained by writing mark-up semantically, if not written semantically when the search engine scans the content of a web page it cannot identify the most important aspects of the page and index appropriately.
Writing Semantic mark-up is a process of choosing the tags that communicate the hierarchy of information contained in the page and placing them in a logical order.

<h1> tag
The <h1> tag should only ever be used once on a page at a time. It signifies the top, most important piece of information in the document and is generally reserved for the name of the site / author or owner and their logo.

<h2> tag
The <h2> tag should be treated with the same respect as the <h1> tag and its usage be limited. <h2> are commonly used for page titles.

<h3> to <h6>
<h3> to <h6> are the lower heading tags and can be used multiple times within the page. They don’t have the same importance as their older siblings but gain more importance with search engines than regular paragraph copy. They can be used for navigation and headings within content replacing the <strong> tag.

A must for semantics is the need for the tags to be placed in order within the mark-up, a typical example could be.

<h1>The Semantic Mark-up Co.</h1>
<h2>How to create Semantic Mark-up</h2>
<ul>
<li id=”nav1″>
<h3><a href=”index.html” title=”The Semantic Mark-up Home page”>Semantic Mark-up Co</a></h3>
</li>
<li id=”nav2″>
<h3><a href=”tutorials.html” title=”Semantic Mark-up Tutorials”>Tutorial</a></h3>
</li>
</ul>
<h4>Step 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce varius, magna fermentum scelerisque faucibus, dui quam vehicula magna, ut semper neque libero eget purus</p>
<h4>Step 2</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce varius, magna fermentum scelerisque faucibus, dui quam vehicula magna, ut semper neque libero eget purus</p>

SEO - Meta tags, Keywords and Accessibility

In my previous post “An insight into what Search Engines like” I discussed a point on search engines liking content that does not have meta barriers.

These can include

<meta name=”ROBOTS” content=”NOINDEX, NOFOLLOW” />

<meta name=”ROBOTS” content=”NOARCHIVE” />

Some Meta data is vital for Search Engines indexing the page and building descriptions in search results.

These tags include
Description

<meta name=”description” content=”Insert your fascinating description of the page here” />

Keyword

<meta name=”keyword” content=”keyword 1, keyword 2, keyword 3, etc” />

Keywords can be singular words or phrases related to the specific page.
A general rule to consider with adding keywords is to limit the amount of keywords used, add specific targeted keywords for the type of site, its location and to make sure the content of the page has those keywords appearing often.

Keywords can be placed within other parts of the mark-up including elements used for accessibility to provide areas for keywords.
This can be done using the title attribute on a variety of tags.

a href
The title tag within the a href link allows for a description to appear in a small tool tip when hovering over a link.

<a href=”about-me.html” title=”About the Web Designer Ryan McNair”>About Ryan</a>

acronym and abbreviations
If your site includes acronyms and abbreviations within the content and uses them as keywords, this may pose problems when potential visitors may search for the non-abbreviated phrase.

A solution for this is to use

<acronym title=”Search Engine Optimisation”>SEO</a>

<abbr title=”Information”>Info</a>

Image
Instead of using the title attribute within the tag, the alt tag is used to convey the text information relevant to the keywords.

Other Meta tags you may consider adding are

Author

<meta name=”author” content=”Ryan McNair” />

Copyright

<meta name=”copyright” content=”Copyright 2009 Ryan McNair, All Rights Reserved” />

Although adding these two meta tags to the mark-up of your site will not increase your position in search engine results they do give extra information to the page

CSS Basics - How to code better

1. Comment your code

Commenting code is a practice often overlooked when working to a deadline.
Using comments on any web source coding language can easily distinguish each part of the design you are working on. Helping further down the line when maintenance or tweaking is needed to inject life into your site.

fig 1. (CSS Comments)

/* This is an example of a CSS comment than can span over
several paragraphs */

// This is used for single lines only

2. (Shorthand CSS)

Shorthand CSS is a method of writing CSS code in more condensed manner

fig 1. (Long hand CSS)

#example {
margin-top: 0;
margin-right: 1px;
margin-bottom: 2px;
margin-left: 3px;
}

fig 2. (Short hand CSS)

#example {
margin: 0 1px 2px 3px;
}

The CSS code created using shorthand is smaller in file size in comparison to using the longer version in fig 1.

When using shorthand notice that when a value of 0px is needed that it is written using just a 0 without the px value at the end.

Shorthand can be used with the margin, border and padding delimeters.

The CSS can be further shortened to

#example {
margin: 0 1px 2px;
}

this will give the margin properties of

#example {
margin-top: 0;
margin-right: 1px;
margin-bottom: 2px;
margin-left: 2px;
}

also using only two values in the shorthand will give

#example {
margin: 0 1px;
}

versus

#example {
margin-top: 0;
margin-right: 1px;
margin-bottom: 0;
margin-left: 1px;
}

Finally only using one value in shorthand will give a uniform value for all four declarations of the delimeter.

3. Abandon Inline styles and migrate to external sheets

Using external style sheets will allow for your web pages to load faster, less code = less time.
By grouping common styles in classes together in a separate file the mark-up language used to generate each page is reduced and not repeated making redesign and maintenance easier and less of a headache for you later on.
To use an external style sheet simply place the following code within the head portion of your html document.

<style type=”text/css”>@import url(monochrome.css);</style>