HTML as a whole is very simple in execution and very small in scope, especially when compared to some other markup languages. To get started with learning HTML, there really are only two main terms that need to be defined: Element and Attribute.

Element

An HTML element is conceptually the same thing as an element of any document. Documents have headings, paragraphs, lists, images, line breaks, etc. All of these items are placed into HTML documents by using HTML elements. All HTML elements are written with a less-than sign, followed by the element name, and then a greater-than sign.

For example, let¡¯s take a look at the HTML element that is used to contain a paragraph of text, the <p> element:

<p>The paragraph of text goes here.</p>

As you can see, the element that contains the paragraph is a letter ¡®p¡¯ set in between less-than and greater-than signs. This is called the element tag. Notice at the end of the line of text, there is another element tag which has a forward slash before the letter ¡®p¡¯. This is called the end tag. Some HTML elements require end tags, others do not.

The HTML elements that require end tags are called non-empty elements. The elements that do not require end tags are called empty elements. What separates the two is that non-empty elements directly contain information within the document, such as the text of a paragraph or the items in a list, while empty elements do not directly contain information within the document.

An example of an empty element is the element that places an image in the HTML document, the <img> element:

<img src="picture.jpg" width="200" height="200" alt="pic">

This element would place an image called ¡®picture.jpg¡¯ with a width of 200 pixels and a height of 200 pixels into the HTML document. As you can see, there is no end tag after this element. Note: In XHTML, there would have to be a space and forward slash prior to the greater-than sign at the end of the element tag. You will see that in web site templates that are written in XHTML.

It¡¯s understandable that the terms ¡®non-empty¡¯ and ¡®empty¡¯ might create a little bit of confusion. This element places an image into the document, so how can it be called ¡®empty¡¯? The key difference to remember is that non-empty elements directly contain data within the HTML document itself, such as the text of a paragraph, the words of a heading, the items in a list, etc. The <img> element is empty because it doesn¡¯t directly contain any data within the HTML document¡ªinstead it pulls data from the image file called ¡®picture.jpg¡¯ file and then drops that into the web page by displaying the image on the screen.

You could think of the web page as if it were a piece of paper. Let¡¯s say you have a pen and some smiley face stickers. The non-empty elements would represent the words that you directly write onto the piece of paper with the pen. The empty elements would represent placing a sticker on the piece of paper¡ªyou didn¡¯t directly draw the smiley face on the paper, instead you stuck it on there from a pre-made source.

If this all seems like total mumbo jumbo at this point, don¡¯t worry. Learning HTML is really a function of repetition more than anything else. There isn¡¯t a whole lot of material to learn, but it does take some practice to get fluent at it.

Attribute

An attribute in HTML is precisely what it sounds like¡ªan attribute, or characteristic, of an element. Many HTML elements require pre-defined attributes in order to work correctly.

Attributes are used to describe an element. In a real-world example, let¡¯s say you were looking at a car, perhaps a black Chevrolet Corvette (I wish). To break it down into its attributes, you could say, ¡°It¡¯s a car, made by Chevrolet, the model is a Corvette, it has a T-top roof, and it¡¯s black.¡±

If we were to write this sentence in the form of an HTML element with attributes, it would look like the following:

<car make="Chevrolet" model="Corvette" roof="T-top" color="black">

To see an example of a real HTML element with attributes, let¡¯s revisit the <img> element from above:

<img src="picture.jpg" width="200" height="200" alt="pic">

In this example, the <img> part is the element name. The src, width, height, and alt parts are the attribute names. The attribute values in this case are picture.jpg for the src, 200 for the width, 200 for the height, and pic for the alt. Notice that the attribute values are wrapped with quotation marks. That is a highly recommended best practce in HTML¡ªalways wrap the attribute values in quotation marks.

These are the four required attributes of the <img> element. The src attribute points to the source of the image, which is always an image file in a format that web browsers can display (GIF, JPG, JPEG, PNG). In this example, the image file is called ¡®picture.jpg¡¯. The width and height attributes are measured in pixels, and they tell the browser how much space to allot for the image while rendering the web page. The alt attribute provides the alternate text that should be displayed if the visitor has images disabled in their web browser. Also, if a vision-impaired visitor pulls up your web page, the alternate text is what will be read aloud by the screen reader when it reaches that point in the HTML document.

As you can see from this example, when you apply attributes to an element, basically what you¡¯re doing is describing it. Certain elements in HTML have a predetermined set of attributes that are required. For other elements, attributes are optional. We will cover this topic in great detail in later tutorials.

The Four Basic Rules of HTML

Now that you have a basic understanding of what elements and attributes are, the next step is to learn the ground rules for using them. I¡¯ve got the four most basic rules of HTML broken down below. There are some other, more subtle rules, but those will be introduced on a task-for-task basis during the example exercises in later tutorials.

1. All non-empty elements require end tags. No exceptions.

   <p>This is a good example.</p>

   <p>This is a bad example.

2. Non-empty elements cannot overlap each other. If one element is inside another, it must be completely nested. Let¡¯s look at a really common example: a link at the end of a paragraph of text.

   <p>Check out this link: <a href="http://www.cool-site.com">Cool site</p></a>

   The example above is wrong. The <p> and <a> elements overlap.

   <p>Check out this link: <a href="http://www.cool-site.com">Cool site</a></p>

   The second example is correct. The <a> element is nested entirely inside the of the <p> element.

3. Attribute values must always be wrapped in quotation marks.

   <img src=picture.jpg width=200 height=200 alt=pic>

   The example above is wrong. It makes the document¡¯s source code look messy and could produce an error in some web browsers.

   <img src="picture.jpg" width="200" height="200" alt="pic">

   The second example is correct. Always wrap attribute values in quote marks. It makes the document¡¯s source code more readable.

4. All element names and attribute names should be in lower case letters only. Element and attribute names can be in capital letters, but again, it makes the document¡¯s source code look messy.

   <P>This is a paragraph of text with an image in it. <IMG SRC="picture.jpg" WIDTH="200" HEIGHT="200" ALT="pic"></P>

   The example above is wrong. It¡¯s a mess.

   <p>This is a paragraph of text with an image in it. <img src="picture.jpg" width="200" height="200" alt="pic"></p>

   The second example is correct. It has much better readability and will be much easier to work with.

   This does not apply to attribute values. Attribute values can have all the capital letters you want. For example, the alt attribute of an image could be "Photo of the Great Wall of China". There would be no problem with that.

There you have it¡ªthe four basic rules of HTML.

discuss this topic to forum