Elements, Tags, Attributes and Values

When building websites it's important to understand what elements, tags, attributes and values are. Once you understand what they are and how they all relate to one another, it's relatively simple to create good and valid HTML. We'll later explain how you can use elements, tags, attributes and values but this article simply explains what they are and how they should be structured correctly.

HTML Elements

An HTML document is made up of HTML elements which comprise of HTML tags and usually contain HTML attributes and values in the following format:

<tag attribute="value">content</tag>

HTML Tags

Tags are the main bulk of an HTML document and are responsible for adding semantic structure to a page's content.

Within the webpage example we used tags to markup the structure of the content with opening tags and closing tags.

We started the page off with an <html> opening tag and finished it with an </html> closing tag. Within this tag we also nested other tags to build the page.

It's best to remember that all tags must be closed (there can be some exceptions depending on which doctype you're using but it's best when initially starting out to close all tags). Where a tag doesn't contain any content, the tag should close itself. For example the line-break tag becomes <br /> and the image tag becomes <img />.

HTML Attributes and Values

Attributes are extra bits of information which can be added to a tag. The purpose of attributes is to add extra information to the tag which can also be used to style the element. Attributes always appear within an opening tag and the value of the attribute always appears in quote marks.

For example, within the webpage example, we used the following bit of code

<meta charset="utf-8">

Within this example, charset is the attribute and utf-8 is the value of that attribute.