Understanding elements

To markup your web pages, you will need to learn the syntax (rules of a computing language) of HTML. HTML syntax is very simple to follow. Remember the syntax only controls the presentation or structure of a web page. The most fundamental piece of building block of HTML is the elements.

In HTML, an element refers to two different things:

  1. element of structure of a document (for example, paragraph, web page title, etc.).
  2. element in the sense of a tag (for example, <p>, <title>)

Because of the different meanings of the word "element", it can be confusing what the word "element" means in a particular context. The following discussion may help you to understand the differences in the meaning. When we talk about the element in the sense of element of structure of a document, we are referring to the structure of the document; for example, document's header information (head), title, body, etc. When, however, we use the word element to refer to a tag, we are talking about a specific HTML instruction that uses angled brackets like: <>. As the following table shows,

Examples of elements of structure of a document
head body p
Examples of elements as tags
<head> <body> <p>

an element becomes a tag when we use the angled brackets around it. To create a web page, we use tags. A tag instructs the browser what specific instruction to execute. Assume in your web page you want to emphasize some text as bold. To do this, HTML requires three pieces of information from you:

  1. With what tag do you want to emphasize the text? (Answer to this question determines what and where a specific HTML instruction will begin. In other words, this starts an HTML instruction.)
  2. What text do you want to make bold?
  3. Where do you want to stop the instruction? (An instruction should be ended with the same tag that started the instruction. See below.)

As an example, assume you want markup "World Wide Web Consortium" bold:

The World Wide Web Consortium (W3C) is a rule-making body for the Web.

So how would be write the necessary markup? Begin by answering to the three questions listed above. Here are the answers to each corresponding question:

  1. we will use the <b> tag. Think of this as turning ON the bold feature in HTML.
  2. we want to display "World Wide Web Consortium" as bold. Remember this text must be immediately following after the <b> tag.
  3. stop the instruction with </b> tag. This will turn OFF the bold feature of HTML.

So our HTML markup will become:

The <b>World Wide Web Consortium</b> (W3C) is a rule-making body for the Web.

Most elements in HTML have three parts: start tag, content, and end tag. The start tag is simply the element name surrounded by the angled brackets such as <b>, <body>, and <p>. The end tag is a element name surrounded by </ and > such as </b>, </body>, and </p>. In other words, an end tag simply has the forward slash (/) before the element name. So if you open (start) a tag with <i>, you will close (end) it with </i>.

Not all HTML tags require a closing tag. For example, <img> tag, <br> tag, <hr> tag, etc. Also, none of these tags take any content. The <img> tag is used to display graphic files; the <br> tag is used to end a line, and the <hr> tag inserts a horizontal rule.

As stated earlier, a start tag instructs the browser to start a particular instruction. Conversely, an end tag marks the end of that instruction. Because typically a complete web page contains many tags and sometimes nested tags (tags within other tags), it is necessary to close all opened tags even if your web page displays correctly in a particular browser. Properly closing tags not only will help you to familiarize more with HTML tags, but it also will avoid any possibility of browsers displaying your web page incorrectly.

Main points to remember:

  1. Every element has a name such as head, title, p, i, and b.
  2. A tag is the element name surrounded by the angled brackets. This refers to a start tag such as <p>, <title>, and <i>. A start tag starts a particular HTML instruction.
  3. An end tag is the same as a start tag except the end tag has a forward slash between the < and the element name. An end tag stops a particular HTML instruction.
  4. Most elements have content, which is placed between the start and the end tags. Example, this is <b>bold</b>.
  5. Some elements have no content. Such elements/tags are known as empty tags.
  6. Some elements have no end tags. These are referred to as one-sided tags. A tag that has an opening and closing tag is referred to as two-sided tag.