Knowing and understanding the Basic HTML tags that make up your web page

HTML></HTML><HEAD></HEAD> <TITLE></TITLE><META> <BODY></BODY>

Author: Keith Klee.

The first line of code you will see at the top of your web page is the DOCTYPE “declaration". The Document Type Definition (DTD)code that you have seen at the top of HTML documents is a declaration, this line declares which HTML rules have been followed to produce the document. An example of a typical (DTD)

<!DOCTYPE HTML PUPLIC “-//W3C//DTD HTML 4.0 Transitional//EN">

The most important part of the code is the HTML 4.0 Transitional, This specifies that the code we are going to use on our web page uses tags ect in accordance with HTML version 4.0, the transitional part allows us to use tags from earlier versions of HTML as well. If we were to change the Transitional to strict, we would only be able to use tags that conform to HTML version 4.0, in short this would mean any tags from an earlier version that were depreciated for HTML version 4.0 would no longer be used.

Basic HTML tags explained

The HTML tags above are fundamental to all web pages. With The exception of the <BODY> </BODY> tags the information they contain will not be displayed on your published web page, the information is used by the browsers and the search engines.Let’s take a brief look at these tags individually.

The start and end HTML tags contain the complete HTML document, you won’t find attributes defined for this tag very often, however an example of an attribute that can be used is (lang) this attribute sets the base language of the document: example.

<HTML lang="en"> This specifies English as the base language,others include (en-us) for American English, and (de) for German. The lang attribute can also be used on other HTML tags, allowing for mixed language web pages.

The next HTML tag <HEAD></HEAD> breaks the document in two.We will have a HEAD section and a BODY section all contained by the start and end HTML tags. To further understand this see the example at the end of this article.

The HEAD section will contain tags relating to the overall page, as mentioned before the information they hold will not be directly displayed on your web page, but are equally important.The first HTML tag in the Head section will be.

The title tags as they suggest contain the name you have given your web page, this will be displayed not as part of your web page, but at the top left corner of the browser window. The <TITLE> tag is one of the most important, as it is used by the search engines to help them rank your web page when you submit your URL for indexing. As a guide your title should be short, descriptive, and contain the main keywords that appear on the web page. Here’s my homepage title as an example.

<TITLE>Website Design Services: Upton Designs</TITLE> I should mention that the length, and the frequency of keywords in your title will depend on which search engine you are optimising for. For more information about optimising visithttp://www.uptondesigns.com and browse our article’s pages.

Our next HTML tag contained in the HEAD section.

<META>

The META tag basically supplies information for the servers and the search engines, it is one of a few tags called an empty tag, this simply means that there is not a closing meta tag, other examples of empty tags are the image tag <IMG>, to force a line break <BR>, and a horizontal line <HR> the necessary information including content is defined using attributes within the tag itself: example

I just want to mention, if you are using HTML this is correct.If you use XHTML transitional or strict and want to validate your syntax, empty tags are not acceptable. To remedy this you would add a space and a forward slash before the closing angle bracket the example now becomes.

You would also have to use lower case for ALL your tags and attributes, example <TITLE> becomes <title> <IMG> becomes <img>and so on.

You can place as many <META> tags in the <HEAD> section of your web page as you wish. Here are just a few examples of the more commonly used <META> tags, and how you would write them.

Keywords: Once, one of the most important tags, this is used by the search engines crawling your page to determine the relevancy of your page to a searchers search string, and whether to display your listing in the results pages it produced. Keywords have long been abused in an attempt to improve page ranking with the search engines, as a result most search engines now ignore the keyword tag. If you still want to use the keyword tag for the few engines that acknowledge it write it like this.

TIP:If you do use this tag it’s important that the keywords you use Actually appear on your web page, and avoid repeating the same word to often. Most people search using strings rather than single words, if you can include phrases separated by a coma.

Description: The description tag supplies the search engines with a brief explanation of what your web page is about and would look like this.

In theory, the description you write will be displayed on the search engines results pages, under the link to your website,for this reason your description should be well thought out.It should be well written, interesting, and descriptive of the content of your website. Think, if you were reading your description, as a searcher, would it entice you to visit the website to find out more. You should always include your main keywords in the description, this will help your ranking with the search engines.

Robots: Search engine spiders like to follow links on web pages so the robots tag is not really needed unless you have web pages that you don’t want indexed, even then a more efficient way to achieve this is to use a robots.txt file. For those of you who prefer to use the meta tag here are some of the options you can give the search engines.

Index: would index the page.

Noindex: would not index the page.

Follow: follow links on this page and index pages they lead to.

Nofollow: do not follow links on this page for indexing.

You can only use one of these options on you web page and it would look like this.

Copyright: the copyright tag gives copyright information that You want to disclose about you web page. Typically written like this.

Distribution: the distribution tag tells the search engine how to Distribute your web page. The options are.

Global: this will give your web page mass distribution.

Local: this will give your web page local distribution.

IU: web page not intended for public distribution.

The distribution tag would be written like this.

The start and end <BODY> tags contain all of the content we want to display on our published web page. The <BODY> tag offersa number of attributes including, bgcolour, text, link, alink, and vlink.

The bgcolour attribute is the background colour of our web page the value can be specified as a colour name example Blue or as a hex number #0033ff. the text attribute is the colour of the text that appears on the web page. A <BODY> tag with these attributes would look like this.

The link attributes which also contain colour values are as follows.

link: defines the colour of the clickable text that you define as hypertext.

Alink: (active link) defines the colour of the hypertext as it is being clicked.

vlink (visited link) defines the colour of the hypertext after it has been visited.

If we add these to our <BODY> tag it would now look like this

The above method of setting a background and links colour Are not really used now, the more up to date method is to use embedded or external cascading style sheet (CSS).

Summing up

Our basic structure will look like this.

<HTML> (this is the html start tag)<HEAD> (the head section starts here)<TITLE>Your page title</TITLE><META see above></HEAD> (the head section ends here)<BODY> (body section starts here)Page content</BODY> (body section ends here)</HTML> (this is the HTML end tag)

There are a lot more tags that you will use in the design of Your website that we have not covered here, my intention was to look at the basic structure of a web page. I hope you have found this article helpful.

About the author:Keith Klee, member of The Association of Certified IT Professionals, and originator of www.uptondesigns.com A Professional Company offering web page, website design Services at affordable Prices. You can contact Keith atkeith@uptondesigns.com

Trusted Websites