HTML tag EM

Overview

The <em> HTML tag is known as a phrase tag, it is mainly used to style text. By default it makes text italic to emphasize the look of the tagged text. It works equally as well in table based layouts as well as CSS based ones. As with all phrase based HTML tags it can be used in situations where consistency between browsers is difficult to achieve in other ways. When text is put between the opening and closing <em> tag it is displayed as a emphasize text.

Basic HTML EM Usage

<em>Some emphasize text in here</em>

Any text between the opening and closing tag will be displayed as a emphasize text.

Advance HTML EM Usage

It is possible to style and add functionality to the <em> tag, this is done by adding an attribute to after the p in the opening <em> tag

Attributes allowed for the <em>tag include:-classdirid, langstyle and title.

In most cases class and id are used and its basic usage is shown below

<em id=”name-of-id”>some emphasize text</em>

With all attributes there is a space after the initial p then the attribute name, then an equal’s sign and the identifier of the attribute in double quotes.

Both id and class attributes refer to CSS styling of the element and is either stored in the <head> of the webpage on in an external file.

With id this usually refers to a single instance on a page whereas class usually refers to a repeating element on a page, it is for this reason for the <em> tag may use either the id or class as an attribute.

The attribute style allows you to include CSS style information for a single <em> tag.

The dir attribute allows for left reading and right reading text, lang allows you to specify a language for the tag and title allows you to include extra information for a tag.

It is possible to attach scripts to tags, as well adding functionality to a webpage, these scripts tend to be written in JavaScript and therefore outside the scope of this document

Examples of EM in action

<em>Some emphasize text</em> – basic usage example.

<em id=”name-of-id”>some emphasize text</em> – emphasize text which is styled by the id name-of-id.

<em class=”name-of-class”> some emphasize text </em> – emphasize text which is styled by the class name-of-class.

<em id =”name-of-id” class=”name-of-class”> some emphasize text </em> – emphasize text which is styled by the class name-of-class and the id name-of-id.

<em style=”color:#F00;”>Some emphasize text</em> – emphasize text which has a custom colour of red.

<em dir=”rtl”>some emphasize text</em> – emphasize text where the text reads from right to left.

<em lang=”uk”>Some emphasize text</em> – emphasize text where the language has been tagged as UK.

<em title=”name-of-title”>some emphasize text</em> – emphasize text where the EM tag has been titled name-of-title.

Changes between HTML4 and HTML5

Technically in HTML4 webpages EM means emphasis (with STRONG having the meaning strong emphasis) in HTML5 EM is now considered to be a stress emphasis or in plain English a way to show the text has a different meaning to STRONG.

Getting better search volume data from Google AdWords

When you first look at search engine optimisation, the first thing you should do is understand how many people are likely to search for the phrase you are going to optimise for.

It’s simply no point optimising for a phrase that does not drive traffic, it’s a wasted effort.

For years Google has provided a traffic estimation tool for search phrases, but by default it can lead to over inflated figures, leaving you to think the pond is bigger than it actually is.

The first thing you need to look at is when Google says there are ten searches a month to understand this is up to ten searches a month. In reality when Google shows ten of anything it actually means that someone does search for it, but it’s so rare as to actually be worthless.

The next aspect really is the definition of what the search volume represents. And that’s the total amount of searches for a given phrase, in other words even if you are number one in the organic results, in reality you will only receive a proportion of this traffic.

And the research is shocking.

If you are at number one for a specific phrase you will roughly get a third of the traffic, position 2 is closer to 15% and position 3 is closer to 10%, dropping to 3 to 4% at the bottom of the first page.

Or In plain language, if there are ten searches a month for your phrase, the actual amount of clicks you will get for a position one is about 30, for position two – 15, and so on, so it’s also important to realise unless you are chasing massive search volumes, actual traffic can be a lot less than you think.

The last issue is even these figures tend to be optimistic, but why is this?

Well apart from being an estimation, search traffic will also include those searching to gather search data.

Finally most business will get most of their trade from the local area, so when using the keyword tool its worth reducing the default targeting area (he world) to just include your local area, or in other words if your targeting ‘window cleaners Oxford’ reduce the geographic area to Oxfordshire will allow you to include anyone searching in the Oxfordshire area and exclude those who are unlikely to be interested in your product in service.

By using the above techniques you can concentrate your SEO effort in promoting phrases that will actually push your business forward.

Advanced use of top ten style SEO audit reports

Top ten SEO audit reports are great as they give a technical check list as to how a target page compares to the top ten pages for any given phrase.

The methodology has solid merit as it states that no one outside of ‘Google’ (Or other search engine you are targeting) can know the ranking algorithm, but we do know that Google likes the Top ten pages its showing for a reason.

If we make our target page similar to the top ten taking into account on page and off page factors, then Google should like our web page in the same way. In short putting our target webpage within the top ten search results.

The curve ball

While the theory is great and the top ten should give a good average, on a bad day can leave us with data which suggest edits that don’t have the desired effect.

With Google (and with other search engines to a lesser extent) in bound links can have a much larger ranking effect than it should and when this is taken into account we are left with a load of on page recommendations that won’t square the circle.

Is there anything that can be done to improve a top ten audit report?

If your site is established and you are looking to target organically you can run the audit report against a more competitive location (like a capital city). The reason this works is simple. With larger cities, competition for the top spots on Google are likely to be fiercer and these companies are likely to have spent time and effort to rank well. By following their weights and densities of title and body tags we are likely to find these will be golden rules for our local area.

Or in other words if the top result for ‘florist London’ has florist and London twice in the title tag there is a very good chance this will work for us in our local area (i.e. florist twice and our location twice)

We don’t need to copy weights and densities verbatim, but it can be a good indicator where local performing pages are skewed and allow us to break away from the local pack.

The other technique you can look at is running the Top ten as a Top ten, Top three and Top one SEO audit. With this variation on the standard top ten, we can see how as we get closer to number one the weights and densities of key phrases are affected.

From this we are likely to be able to see the rough Key phrase quantities and densities which are likely to work well for our target page.

By combining both techniques we have a good starting place for any web page we construct if we want it to be optimised for any given search engine.

The role of H tags in HTML5 documents and their practical application

With over 861,000,000 websites on the internet (as of January 2014) it’s easy to see that not all these websites use HTML5, it’s also easy to see how search engines will take this into consideration when looking at ranking.

More over search engines like Google will often weight websites with great content over their technical mark-up prowess.

The H tags are one example where a move from HTML4 to HTML5 has caused much confusion in the web design community.

Simply put in a HTML4 page there can only be one H1 tag (the heading for the page), with the new specification (HTML5) this restriction has been lifted allowing the idea of a H1 tag in each semantic area of the page. (header, main , article, footer, aside etc..)

So what’s the issue?

With many designers looking to increase SERPS (position in search rankings) via the use of optimising their use of H tags it’s easy for an HTML5 page to become overloaded with H1 tags.

This comes down to a misunderstanding about H tags and how search engines rank web pages..

So how do H tags actually work?

Simply put an H tag is a heading and when we use a H1 tag we are saying this heading is more important than an H2 heading. (H2 is more important than H3 etc…)

This means by having a H1 tag inside all HTML5 elements, we are actually saying to search engines like Google, each of our element headers are equally important.

Is this the end of it?

Even though each HTML5 element may have a H1 tag it does not mean a search engine will take the H1 in the Footer as having the same weight as a H1 in the main, but with layouts where content is skewed for design reasons outside the normal body text areas, we can’t assume search engine will evaluate in the way we want.

In addition any search engine not supporting HTML5 may see multiple H1 tags as wrong and ignore or markdown any instances other than the first one.

So is there a better way?

As H tags are considered relative to each other (H1 is more important than H2 etc…) then when we construct a page why not still use a single H1 across the entire mark-up to describe the most important heading, H2 for the next etc…

Using this method we help non HTML5 and HTML5 search engines understand our content and make it easier for search engines to ranks our pages appropriately.

With comparative SEO often web designers will compare H tags like for like, this of course is wrong, you need to take into account where the H tags appear in the mark-up in relation to each other and consider how a search engine will evaluate the HTML 5 code.

Or in plain English, look at your mark-up, place the H1 at the head of the area you consider to have the most important content on the page, H2 as the header for the next most important and so on.

For most designs there is no need to go beyond H2, as you will be looking to highlight the main content area, but for pages where you need more control, you have access to H3 to H6.

By not using these tags when you need them, you may find that search engines like Google do not phrase your pages correctly and depress your SERP’s.

Using this method means your web page will be optimised for all search engines not just ones which support HTML5.