If you don’t know your tags from your elements, keep reading for some handy HTML tips which will help make the standard markup language of the web a little easier to understand.
How is a Webpage Structured?
First and foremost, how is a webpage structured? Easy peasy – there are two sections to concern yourself with: head and body.
The body section contains the content of the document, i.e. what users will read when they land on a webpage. Look out for the information nested within <body> and </body>.
Tags, Elements and Attributes
Although there is a tendency to refer to ‘HTML tags’ as a blanket term for the tag itself as well as everything nested within it, there are in fact three core components to HTML: tags, elements and attributes.
So, when you refer to a tag, you might really mean an element or an attribute and vice versa. Yes its perfectionism, yes it’s slightly fastidious and I know I’m being utterly pedantic but it’s interesting to see that such ambiguity exists, clearly on a global scale as the following figures suggest:
|Keyword||Global Monthly Searches|
Source: Google Adwords Keyword Tool
Let’s clear up the confusion then.
Tags are used to indicate either the start or end of an element. Let’s use a paragraph as an example:
A paragraph of text begins with an opening tag, which looks like this:
The paragraph is closed with an end tag, which looks like this:
It’s simple really, the start tag tells web browsers where the paragraph begins and the end tag tells the browser where the paragraph finishes. The text that makes up the paragraph is simply placed between these two tags.
As W3C recommendations state, “Elements are not tags”. In HTML, an element is the entire section of content that helps make up what users actually see on the webpage. The element includes the start tag, any content, any attributes and the end tag. Let’s stick with the paragraph example:
<p>I am the paragraph of text which will appear on the webpage for users to read</p>
Every element on a webpage must include a start and end tag in order to work properly. Some key elements to consider when optimising a website include:
|<title>Title content</title>||Beneficial for both user experience and SEO by informing users and search engines of page content. Impacts ranking and CTR.|
|<h>Heading content</h>||<h1> defines the most important heading and <h6>defines the least important heading. Use these elements to structure content so search engines and users know what the webpage is about. A strong onpage relevancy factor for SEO which impacts ranking.|
An attribute is simply a piece of code which provides additional information. For many HTML elements, there are several attributes which are commonly applied. Attributes are bound by the following set of rules:
- Attributes are only valid if they form part of the HTML tag
- They can only be added to the start tag (attributes cannot be added to the stop tag)
- Attributes always appear in name/value pairs. Any number of valid attribute value pairs may appear in an element’s start tag and they may appear in any order but they must be separated by spaces
- SGML requires all attribute values be delimited either with double or single quotation marks (ASCII decimal 34 and ASCII decimal 39 respectively)
An attribute most SEOs will be familiar with is the meta description:
<meta name=”description” content=”xxxxxxxxxxxxxxxxxx” />
- The first attribute here is meta name=“description”
- The second attribute is content=”xxxxxxxx“
Self Closing Tags
Did you notice in the last example that a self-closing tag was used? Self-closing tags look like this:
Bear in mind that self closing tags can cause incorrect page rendering so remember to declare your doctype correctly, which brings me nicely to my next point……..
Ever wondered what !DOCTYPE means? This is the Doctype declaration and it is used to tell browsers what version of HTML your page is written in and therefore ensures content is rendered properly.
Without this declaration, a webpage may not validate correctly so use the handy markup validation service from W3C to help you get it right.
Final Thoughts: The Future of HTML
With final release estimated for 2014, HTML5 will replace HTML 4.01 as the standard markup language used on the web. Backwards compatibility means web developers won’t need to code their website all over again (phew) whilst some of the new elements featured in HTML5 may very well bring benefits for SEO, particularly for sites that use rich media. A recent hot topic, HTML5 is a great alternative to using Adobe’s Flash and Microsoft’s Silverlight.
HTML5 will also be used heavily for mobile browsing as would be expected. My colleague Gerry’s post about HTML5 is a great source of further information, including some excellent technical insight.
Do you have any HTML anomalies that drive you crazy? Questions, thoughts and comments welcome.