The World Wide Web simply doesn’t exist without HTML. The HTML markup is the way we create our web documents so that they are readable by browsers and humans alike. Therefore, a good understanding of HTML, and what it does is important to the development of websites and web applications. Today, we’ll focus on the basic building block of HTML, the elements.

Setup

If you have not already done so, open Visual Studio and start a new web project. If you prefer your own developing environment or a simple text editor such as notepad, you may set those up at this time.

Step 1.

Most elements are written with a start tag and an end tag. A tag is just the name of an element surrounded by angle brackets. The end tag is usually festooned with a backslash to represent the end of the element, and as such, the end of that particular element container. For instance, a paragraph element has an opening paragraph tag, some text to represent the paragraph, and then a closing tag. Notice the backslash that is added to the closing tag:

It’s important to note, however, that not all elements require an end tag. These are commonly referred to as “self-closing elements”, and an example of one would be the tag. It represents a line break in the page, and behaves much like when you press “ENTER” while typing in a text editor to bring the text to the next line. In practice, it looks like this in the HTML document:

Step 2.

Recall that every element may also have attributes. An attribute is a value for the element that is to be defined in the opening tag. For example, the abbreviation tag requires that a title attribute be specified, and would look something like this:

Different elements have different attributes, and there are several full references available with all of the attributes for each element.

Also, make all of your element names lowercase. You may see some examples with uppercase tag names, but they are outdated and that style of use has been deprecated. They may still work, but it is not considered good practice.

A Few Last Words…

The most important thing to note about HTML elements is that if you open an element, don’t forget to close it. Recall that some elements don’t have to have a closing tag, but still need to be closed with a trailing forward slash(/) before the end bracket (>). Keeping this in mind will help you to avoid loads of errors, and make your code more readable.

Today’s lesson can be applied to many projects. Thank you for being a valued reader and join us next time for additional HTML tutorials!

Download Source Files