August 3, 2009

Beginner's Guide to Top 10 HTML Tags

Here is a quick run down we put together for those beginning their journey into HTML to quickly outline 10 of the most common tags and some info about them.

1. html

This is the key tag in html it wraps up all the other tags to create an HTML document. HTML actually stands for HyperText Markup Langauge. Tim Berners-Lee as part of his development of the world wide web is widely credited with inventing it ( Even XHTML uses the HTML tag!

2. head

This tag defines the section of code where all meta tags go and where any other files required for the page are called from. For example, CSS style sheets and external JavaScript files are included here.

By including style sheets and JavaScript as external files this improves the performance of a site as these files are then cached in the users' browser and don't need to be downloaded again.

Meta tags were originally envisage to provide additional contextual data for documents (web pages), but piecemeal implementation from many web authors and abuse from search engines marketers has dulled the appetite for the provision and use of this data. Search engines ignore meta keyword data (Google has never analysed them) but do use meta description data to populate their snippet descriptions found on the search engine results pages (SERP).

3. body

The "body" wraps around all the visible content on a page.

4. title

The "title" tag is where the text that you see in the title bar of the browser is kept. This is one of the key tags in terms of search engine optimisation and the information architecture of your website. There is an article on title tag optimisation that goes into more detail about this.

The title content will be displayed as the clickable link if the page is displayed in the SERP - so creating a clear offering with an enticing page summary is essential to maximise click-through rates (CTR) from organic search listings

5. h1

H1 is meant to be the tag containing the page's main headline; it is therefore the mother of all heading tags. In HTML there are 6 heading tags numbered from 1 to 6. They should be used hierarchically with the h1 coming first.

Creating relevant and descriptive headings helps with usability, commercial focus and marketing messages, accessibility, search engine optimisation.

6. div

The "div" tag is the main building block for most modern websites. Sites used to be built using the table tag and its children (tr – table row, td – table data or cell).

Tables were not meant to be used like this and when the cascading style sheet (CSS) was introduced it was advocated that tables should only be used for tabular data and not for web page layout/presentation. This had the advantages of making pages load faster and making the code more semantic.

Too many divs (coined "divitis") is a common coding occurance. Good mark-up should be lean and avoid unnecessary divs, leaving the control to the more immediate semantic tags such as a paragraph <p> or list item <li> for example.

The advantage of this semantic use of HTML is that the container tags partially explain what is held in them for both users and automated information retrieval systems such as search engine spiders.

7. form

The "form" tag is a key element regarding communication for most websites. It allows information to be collected from the page to be sent to the web server. It usually contains input fields to collect the information.

8. a

The "a" tag is known as the anchor tag - the basic building block that links the internet together. Once you add a URL or URI (web address) to the 'href' (Hypertext Reference) attribute you get a hyperlink - the fundamental linking mechanism which defined the internet, and differentiated it from simple collections of documents.

In the web development world one of the on going debate concerning the anchor tag is whether you open a link a new window. One of the disadvantages of opening the link in a new window is that you lose the use of the back button and you desktop can become cluttered with windows.

New browsers enable you to open the link you are clicking on by right clicking it and choosing to open it in a tab or a new window. Therefore, if you open a new tab you can keep the original tab in view and if you want to go back to it you can just close the tab you are in.

With the advent of tabbed browsing most people say this should be up to the user.

9. img

The "img" tag allows us to embed images into a web page. With the introduction of CSS the number of images embedded using this tag can be reduced. Smaller images can be placed on the same file and manipulated using CSS (called sprites). The advantage is a single image is downloaded to the user's browser, meaning faster page loads, less server requests and all functional website imagery is pre-cached in the user's browser.

Using CSS the ‘style’ of the site can separated from the content of the site. This means that decorative images are added using the CSS rather than being embedded in the page.

10. noscript

The contents of the "noscript" tag is displayed if your browser does not support JavaScript.

JavaScript is a "client-side" (i.e. it runs on the users' browser) scripting language which enables programmers to create extra functionality over-and-above HTML, and offers ways to enhance the user experience using newer technologies like AJAX.

AJAX is bandied around quite a lot but all it is, is a way for the web page to send and receive data from the server with out having to do a page refresh. Web pages should not rely on these kinds of technologies to work properly and should be usable without client-side scripting.


  • DIV
  • form
  • H1
  • HEAD
  • HTML


Leave a comment

(Your email will not be publicly displayed.)
Captcha Code

Click the image to see another captcha.