Using Tags, Attributes and Elements

Using Tags, Attributes and Elements
udemy2 placeholder image

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 as it was entirely plain text.

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

DOCTYPE

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>
	

A basic HTML page

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 gives the page structure.

Let's start with a very basic HTML document.

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

Ignoring DOCTYPE declaration, 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, so please render it".

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

udemy2 placeholder image

Head tag

The head tag allows you to add metadeta describing your HTML page. Metadata is data that describes other pieces of data. The metadata you provide is useful for the browser to further understand what your page is about.

Things that are typically included in the head tag include the page title you see at the top, links to any external files like CSS and JavaScript files, a description for the page, adding a favicon, and much more.

Setting the Page Title:

	
    <title>Using Tags, Attributes and Elements - Sabe.io</title>
	

Adding a Description:

	
    <meta name="description" content="Learn about HTML!">
	

Adding a Favicon:

	
    <link rel="icon" href="/images/favicons/favicon.ico">
	

Setting an Author for the page:

	
    <meta name="author" content="John Cena">
	

Body tag

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

In an earlier example here, you saw 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.

Tags

Using most HTML tags require an opening tag and a closing tag, with whatever is in between the tags 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.

namecheap placeholder image

Elements

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. A tag is what surrounds content but the tags plus the content inside is an element.

Attributes

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

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>
	

ID

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!