1. Introduction to HTML

HTML (Hypertext Markup Language) is not a programming language; it is a markup language used to tell your browser how to structure the web pages you visit. It can be as complicated or as simple as the web developer wishes it to be. HTML consists of a series of elements, which you use to enclose, wrap, or mark up different parts of the content to make it appear or act a certain way. The enclosing tags can make a bit of content into a hyperlink to link to another page on the web, italicize words, and so on. For example, take the following line of content:

If we wanted the line to stand by itself, we could specify that it is a paragraph by enclosing it in a paragraph ( <p> ) element:

Note: Tags in HTML are case-insensitive, i.e. they can be written in uppercase or lowercase. For example, a <title> tag could be written as <title>, <TITLE>, <Title>, <TiTlE>, etc., and it will work fine. Best practice, however, is to write all tags in lowercase for consistency, readability, and other reasons.

Anatomy of an HTML element

Let's explore our paragraph element a bit further:

The main parts of our element are:

• The opening tag: This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets. This states where the element begins or starts to take effect — in this case where the start of the paragraph is.
• The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends — in this case where the end of the paragraph is. Failing to include a closing tag is a common beginner error and can lead to strange results.
• The content: This is the content of the element, which in this case is just text.
• The element: The opening tag plus the closing tag plus the content equals the element.

Empty elements

Not all elements follow the above pattern of opening tag, content, closing tag. Some elements consist only of a single tag, which is usually used to insert/embed something in the document at the place it is included. For example, the <img> element embeds an image file onto a page in the position it is included in:

This would output the following on your page:

Attributes

Elements can also have attributes, which look like this:

Attributes contain extra information about the element which you don't want to appear in the actual content. In this case, the class attribute allows you to give the element an identifying name that can be later used to target the element with style information and other things.

An attribute should have:

• A space between it and the element name (or the previous attribute, if the element already has one or more attributes).
• The attribute name, followed by an equal sign.
• An attribute value, with opening and closing quote marks wrapped around it.