Building Websites with HTML and CSS – Part 3



HTML syntax basically consists of pairs of angle brackets called tags. Using it, we take content and segment it into logically coherent pieces by enfolding each part in a tag. Each tag is associated with specific items known as attributes which help us refer to a particular characteristic of the tag being used. Attributes have different values that we can use as per our requirements. The terms tag and element are used interchangeably sometimes but what element refers to is both the closing and opening tags and whatever may be included between the two. Lets take a look at an HTML element that links to the homepage of this website.

As the diagram points out, the tag being used here is the a (anchor) tag. An attribute of the tag, href, is given a value, which is the URL of the website. Then comes the content. This is the part the user sees. Since it is a link, clicking it will make the browser direct you to the page whose link has been provided. The last part of the element is the closing tag. We will look into the specific nature of various tags and their attributes in the forthcoming parts of this series. Here is what results from the aforementioned piece of code in an actual webpage:
Durofy Home Page

Now lets take a look at few rules pertaining to HTML tags and elements:

  • All tags and attributes must be lower-case 

This may come as a surprise to those who have had a brush with HTML in the past because it used to be common practice to have upper-case tags. But not any more. The new W3C convention has banished all capitalized tags. So its time for you old dogs to learn some of these new tricks.

  • All tags must close

Some tags need to be closed explicitly, while others are self closing tags and are called singleton or void tags. Whatever be the case, every tag must close.

  • Attribute values must be in quotation marks
  • Elements must be nested properly

What this means is that if you are placing tags within another one, it must be ensured that the one you opened first closes last and the one you opened second closes next and so on and so forth.


The relationship between nested elements are analogous those in a family. A tag that is ensconced in another one is called the child whereas the containing tag is called the parent. So in the above example, p tag is the parent of the em tag and em is the child of p.

These rules are fully compliant with the current web standards and are specific to the version of HTML we will be learning: XHTML 1.0 Strict. In this version, all tags pertaining to presentational aspects have been deprecated (since this is to be done using CSS).

Now that you’re familiar with HTML syntax rules, we will look at the structure of a HTML page in the next part.


Leave A Reply