If you are looking for web tools for designing a web page without being an expert, you would most probably be analyzing the formatting, layouts and designs used by different websites. For this purpose firefox built-in feature “View > Page Source” comes very handy. This can also be activated using the the keyboard short-cut Ctrl+U. However this feature gives a complete source code of the page, which sometimes is not required and many not-so-expert web page designers can feel overloaded with the information.

If you are willing to see just the header information, which is highly important from the SEO point of view, then you may use these two great firefox add-ons.

1. X-Ray:

After the installation, it is available through right click or Tools menu. When used on a page, it helps you to see how the page is actually constructed without having switch between the source code and the web page.It nicely tells you, whether the list is made of li, dd or p elements? Is that an h3 tag or the text bold feature has been used. It is a must have for elementary web designers.

2. Professor X:

A similar web tool. It shows you all the files, and information lying between the <head> tags of the page. After downloading an application, it displays the contents of the page’s head element, including Meta, Script and Style content.