07. HTML Basics

It’s important at this point to understand more about what HTML is all about and how it works. Otherwise describing the template will involve jargon you may not understand.

Tags
The first concept you need to grasp is the idea of tags. Every time you see an opening angle bracket you have encountered a new tag:

An opening tag

The "body" tag

A tag must start with an opening angle bracket and the first word you see next is the name of that tag. A tag can only be closed in one of two ways:

Matching Closing Tag
This method means that the tag is wrapping around something in order to describe it, like this:

A matching closing tag

An opening tag with a matching closing tag

In this case the start tag has a matching end tag and you can see quite clearly how the start and end “wrap” around something.

Self-Closing Tag
This method means that the tag is not wrapping around something but instead describing an object or action, it looks like this:

The self-closing "br" tag

Self-closing "br" tag

In this case you simply have a space followed by a forward slash before the final closing angle bracket. This type of tag doesn’t make sense to wrap around something and so it need not have an end tag.

Attribute
An attribute is anything beyond the first word you see inside the angle brackets of a tag. In HTML5 an attribute must adhere to the format you see below:

An attribute

An attribute within the "html" tag

Notice the attribute has an equals sign and that the “value” of an attribute is inside inverted commas. Attributes provide more information on what the tag should be doing to the content it applies to. Tags and Attributes combined are what describe to a web browser the content of your document.

HTML5 provides 107 tags that let you explain everything about your document. Anything from images, lists and tables to page sections like paragraphs, headers and footers. Any element you may have incorporated into a word processed document can almost certainly be described via Tags and Attributes in HTML5. The further you work your way through this tutorial the clearer this concept will become.

Okay, I’ve made you wait long enough…it’s now time to examine some actual HTML!

Leave a Comment

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>