Semantic HTML

Outlining your document using proper tags can make code easier to read and therefore develop. Some developers have the bad habit of writing their layout using just tables because of the default styling mechanisms built into browsers, this approach is antiquated.

Tables are fairly easy to built but try dealing with a legacy website with unto 10 nested tables and your in for a headache. Think of it like a meal your going to prepare for someone special, like your end user . Would you ever eat just carbs, of course not! Creating a website where the HTML is semantically healthy is key.

Tags

Tags are the essential building block for any HTML document. Using them in your SEO and keeping in mind semantic definitions of tags can have a really positive effect on your sites SEO viability.

Like I mentioned before, some programmers tend to concentrate more on the back-end. When they submit the site to the search engines or hand it off to the client, the SEO can suffer. Knowing how to properly wrap your textual content using P tags along with applying proper attributes like alt tags to images can make your code valid through W3c Unicorn, that intern means screen readers for the blind will properly interpret your website.

For the most part you will be using the following tags to construct the HTML of your site:

P, IMG, A, DIV, UL, and OL.  Stay away from the Table tag.

<P> Paragraph Tag

The Paragraph tag is used to house text and phrase elements. You should not place images, lists, or tables inside a P tag, if you do then your HTML might not render correctly.

1

<A> Anchor Tag

The anchor tag is meant to house a textual link or you can also wrap an image inside of it. These are the only two elements that should go within the anchor tag.

Code:

2

The anchor tag also takes a couple of attributes that are extremely important in SEO. The alt and title attributes can provide the users browser with a short description about the link. You can see it when you hover over a link.

Code:

3

<IMG/> Image Tag

The image tag is used to bring an image into your HTML document, like the Anchor tag it can accept two attributes called ALT and TITLE. These attributes can serve to better inform the users client of what the image contents are.

A common browser like firefox will show the title/alt contents in a tool tip manner whereas an audio web browser for the visually impared will speak this text. The ALT tag will only show if your browser cannot render the image.

There is a little known attribute of the image tag call longdesc. This can be used to link a description into your image.

The width and height attributes are used to reserve space for image while the document renders.

 

Comments are currently closed.