How to Correctly Produce A Site using Standardised, Semantic Markup and Document Structure

This document will describe how to use headers to produce structure, how to write anchor text, how to use semantic markup and explain why generic data is dead

Using Headers to Produce a Structure

h1

This should be used for describing the main page title, this does not mean use it solely for your website name. It means using it to describe the contents of the page be it a blog post, a product or even contact details.

h2

This should be used to describe main subheadings, for example a new article could be split into 3 sections, h2 should be used to describe these subsections, similarly a product page might be split into description, technical specification and availability information, each of of these a sub section. This is useful because it allows the reader to scan the page for information far faster. And as we go deeper into the header hierarchy we will see that scanability very important.

h3

Getting quite deep in now and onto h3. This is used in longer articles or pages where by the subsections can be split again. This increases scanibility of medium sized news articles or blog posts. h3 can also be used to split up product descriptions and specifications where the body text is quite detailed and lengthy. It is far easier to gather information about power details of a product if they are marked out and not hidden in a large chunk of body text.

h4, h5 and h6

You will rarely use these unless you are developing massive specifications or lengthy articles. They should be used to break subsections down even further, to increase scanibility of content.

Special Note regarding use of h4

It is common practice at the moment to use h4 as a heading for sidebars and menus that are unrelated to the body text. While this isn’t perfect at the moment it is the best method we can use in order to semantically say, “this is another section but it isn’t as important as the main body”. When newer markup specifications are adopted this use will fade as better semantic alternatives are presented.

p

This is used to markup a paragraph of text, believe it or not many people still use this tag to markup a break in text. I will be demonstrating correct use of this tag later on in this section so pay attention.

How to Correctly Write Anchor Text

When talking about links in a web document we can usually split them into two types; Navigation and Contextual

Navigation

Navigation links help users find there way around your site, they should be clear, concise but not intrusive. Here are my rules for marking up navigation links:

Keep navigation in an unordered list (this can change to an ordered list in specific cases e.g. where the pages are chapters in a story)
Try to keep content above navigation if at all possible. Don't worry too much about this
Keep them generic - links like 'home', 'about', 'cart' are clear and self explanitory and because we arn't talking about contextual linking then the generics work in our favour

Contextual Links

Links are described as contextual when they appear in the main content, these might be links to pages with further detail on a subject or simply a passing reference to a topic.

Contextual linking is the most powerful in terms of networking since they carry a lot of authority being placed in the main content. This is why it is important to phrase anchor text correctly.

You can see that the word networking in the above paragraph is a link to another page on this site, I decided to place a link there because it was relevent to the content and fitted in with the text.

Links should only be in your main content if they will help the reader understand or appreciate the subject. If you have to go out of your way to include a link, then generally it is not worth including.

An Example of Contextual Linking

In the sentence "The World Wide Web Consortium is in charge of developing web standards" it would make sense to link "World Wide Web Consortium" to the W3C Website and maybe link "Web Standards" to an article on the subject.

Semantics, Semantics, Semantics

When building a website it is sometimes all too easy to forget that the main thing you are doing is marking up text, many developers use heading and paragraph tags but with the rise of many developers forget about the semantic elements of markup.

Semantic tags are used to markup text that has a meaning other than its content. For example, if I enclose text in the <code> tag it demonstrates that that text is a example of source code for a computer program.

This not only has an effect on the display of the text, it also informs search spiders and user agents that the piece of text you have marked up contains computer code, this means that they could perform other actions on it e.g. place it in a special index for programmers or inform the user that the site contains code snippets, this could be a useful feature if the browser was built into an IDE.

Here is a list of inline semantic tags that may be useful to you when marking up documents in the future:

abbr – Demarcate an observation
acronym – Demarcate and acronym
cite - Demarcate a source citation
code - Demarcate a code snippet – this is for inline. for large code snippets use pre
del - Demarcate that the text has been deleted from the document.
dfn - Indicate a term is defined in the current location
em - Demarcate that text should be emphasised
ins – Demarcate tha the content has been inserted into the document
kbd - Indicate keyboard input
samp - Indicate that the contents reflect sample output, as from software
strong - Indicate that text should have a strong emphasis
sub - Indicate text should be rendered as subscript
sup - Indicate text should be rendered as superscript
var - Demarcate text as a variable name

Ditching Generic Data

When people start building a website they have a habit of keeping all the page titles the same, usually this is their sites name. They also neglect to alter the keywords and meta description of each page. It is becoming apparent that search engines use this type of information to gauge the importance of your site. If you site pages are all described the same way, with the same title and descriptions then each one isn't going to stand out. You should always give your pages a new title, many people, including myself use this format for title.

<page_title> - <site_name>

This gives the advantage of a distinct title as well as allowing you to brand your site pages.

NOTE: A number of people prefer to leave the site name off their page titles, this practice is also recommended although page branding is weakened.

For description and keyword metadata you should be describing the article or product featured on that page.