Building Websites with HTML and CSS – Part 4


Every HTML document follows a certain page structure. Following are the four tags that every webpage must have:

  • HTML tags: The <html> and </html> tags wrap the whole page and let the browser know that the contents are to be interpreted as HTML.They mark the start and end of the webpage.
  • Head tags: Besides knowing the type of markup language being used, the browser also needs to be relayed information pertaining to the actual content within the page. The <head> and </head> tags are used for this purpose. These tags must be at the top of the page, succeeding the HTML tags.
  • Title tags: The <title> and </title> tags are nested within the head tags. As the name suggests,title tags convey the title of the webpage. It is displayed in most browsers at the top of the url bar on hovering over the tab icon.
  • Body tags: The body tags, <body> and </body> mark the section that actually makes it to the viewable part of the page. All other tags are placed within the body tags

Additionally,since we are dealing with the strict version of XHTML, all our documents must begin with a tag that specifies the legal structure, elements and attributes that can be leveraged by the version in question.This is done using the <DOCTYPE> tag. Without explicitly specifying the doctype, we send the browser into what is known as quirks mode. What this essentially means is that the browser, without any guidelines on the nature of HTML code being used, begins to make assumptions about what you, the coder may have meant by each line of code. To avoid this, and obtain the exact results you intended, a Document Type Definition is required. The doctype declaration looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

As you may have noticed, the doctype tag does not adhere to the syntax rules that we learnt in the last part. This is because it is not really part of the the HTML document, but rather an entity of its own, letting the browser know what it is coming up against.

Now that we know the structural must haves of a HTML page, lets take a look at one.


Go ahead and try it out yourself. Fair warning though, the results aren’t going to blow you away. What you will observe if you do decide to give this piece of code a spin is nothing but a blank page. Hovering over the current tab area will cause the words “My First Webpage” to pop up though ( how amazing!..not). What you will have achieved is learned to structure a HTML document correctly,which is the foundation over which every website, even those amazing ones, are made.


Leave A Reply