Using Tags, Attributes and Elements

Using Tags, Attributes and Elements

In our very first lesson, we got set up with a text editor and made a basic HTML document. We, however, didn't actually use any HTML tags just yet, it was entirely plain text.

In this class, we'll start writing true HTML and get familiar with things like tags, elements and attributes.


Before we dive into HTML, it's important to know what DOCTYPE is. This declaration appears at the very top of every HTML document and it tells the browser that what follows next is HTML 5, as opposed to an earlier version of HTML.

While it is not technically needed, it is good practice to include it, and it looks like this:

	<!DOCTYPE html>

Your first HTML tags

Creating a real HTML document requires the use of HTML tags. HTML tags are used to describe and give meaning to whatever content is inside the tag, which helps give the page structure.

Let's start with a very basic HTML document.

	<!DOCTYPE html>
			<title>Look at this title!</title>
			<h1>I am very important!</h1>

Ignoring the very first line for the time being, you can see that the html tag encompasses the entire document. This tells the browser "hey, everything between these two tags is an HTML document!".

After that, pretty much every website you browse will then contain two more tags, a head and body tag.

The head and body tags do entirely different things.

The head tag contains information about the page itself. This includes the page title you see at the top, linking to any external files like CSS and JavaScript files, and additional meta information.

The body tag, on the other hand, is where the main content you will see displayed on your screen resides. You need to put anything you want actually rendered between the body tag.

In the example above, you have a header with some text in between. The h1 tag stands for header1, and is reserved for the most important header. There are many others like h2, h3, h4, and so on.

Save this file and open it in your browser.

This is how it should look for you.
This is how it should look for you.


Using most HTML tags require an opening tag and a closing tag, which whatever is in between being the content. Closing tags have a slash right before the name of the tag, while opening ones don't.

	<tag>The opening tag is on the left, closing tag on the right.</tag>

There are, however, tags that do not need a closing tag, and can close themselves (self-enclosing). Self-enclosing tags are cases where there is no content in between.

We will see later on examples of these.


So you already know what tags are, so what's an element? The difference between the two is simpler than you think.

In the case of:

	<title>This is a title</title>

The tag is title and the element is the two title tags plus everything inside it. In other words, this is literally the entire title element:

	<title>This is a title</title>

Simple, right? This will become an important distinction as you become more familiar with HTML.


In addition to tags, HTML has another way of helping you give meaning to your content. Say hello to attributes.

Attributes describe the tags that they are placed inside of. The syntax for attributes is extremely simple.

	<h1 class="special">I am a special heading!</h1>

In this example, class is the attribute, and special is the value. Attributes describe tags because now this h1 tag might act or look differently than another h1 tag with another class attribute, or no class attribute at all.

The following is a generic example of how an attribute with a value can be applied to a tag.

	<tag attribute="value">I am a generic example.</tag>


class is an important attribute in HTML. It can be applied to pretty much every tag, which then makes it easy to apply styles to with CSS. The value of this attribute can be repeated as many times as you want, for example, like this:
	<p class="red">I am red</p>
	<p class="red">I am also red</p>


Another important attribute in HTML is id. On a valid HTML page, the values of this attribute must all be unique. For example, if you give a tag an ID of first, no other tag may have that same ID.

	<p id="first">I am first</p>
	<p id="second">I am second</p>

Now that you're more familiar with HTML tags, attributes and elements, let's dive more into working with content in our next lesson!

Next lesson: Working with content!
Next lesson: Working with content!