Elements Are Not Tags…and Other Handy HTML Facts You Can Learn in 5 Minutes

Posted on 18. Jan, 2012 by in Digital Marketing



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.

Head Section

The head section of a webpage includes all the information that does not display on the page served to users, such as the title element (or tag as you may know it!), JavaScript and any CSS code. Look out for the information nested within <head> and </head>.

Body Section

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
title tag 2,900
title element 58
div tag 12,100
div element 720

 Source: Google Adwords Keyword Tool

 Let’s clear up the confusion then.

HTML Tags

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:

<p>

The paragraph is closed with an end tag, which looks like this:

</p>

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.

HTML Elements

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:

Element

SEO Benefit

<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.

HTML Attributes

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……..

Doctype Declaration

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.

Tags: , ,