HTML5 Tags and Attributes

Basics of HTML 5 - Part 3

Foreword: In this part of the series, I talk about HTML5 tags and attributes.

By: Chrysanthus Date Published: 3 Apr 2015

Introduction

This is part 3 of my series, Basics of HTML 5. In this part of the series, I talk about HTML5 tags and attributes. I assume you have read the previous parts of the series before reaching here; this is a continuation.

Single Tag Elements and Double Tag Elements
An element is made up of either a single tag or a pair of tags. When it is of a double tag, content goes in between (the tags). You should have seen examples of these in the previous parts of the series.

Typing Tags
When you have a Double Tag Element to type, you can type the pair of tags on one line in your text editor or on two lines. The following two sets of tags are equivalent:

<head><title>Simple</title></head>

is equivalent to,

<head>
 <title>
 Simple
 </title>
</head>

It is good to type a single tag element on one line. However, if the tag is too long, you can type it on two or several lines; do not break the words in the tag.

Nesting Tags
Consider the following tags:

<body> </body>

 

The first one is for the Body element. The second one is for the Paragraph element. These tags can be nested as follows:

<body> </body>

The following is the same as above:

<body>
 
 
</body>

What we have above is logical because a paragraph can only be content of the Body element. Single tag elements will always find themselves inside a double tag element.

Now, in HTML5, tags must be properly nested. This means that the following is correct:

 <body> </body> … right

while the following is wrong:

 <body> </body> … wrong

In the first case, the two paragraph tags are inside the Body element; that is correct. In the second case, one of the paragraph tags is inside the body element and the other is outside it; that is wrong.

Nesting Tags with Contents
The following code illustrates how you can nest tags with contents

<body>
 body content can go here
 
 paragraph content can go here
 
 body content again can go here
</body>

Attributes
Consider the following Body element:

<body>
 Hello World!
</body>

The content of the Body element is “Hello World”. Now it is possible for you to make your web page appear red, in the browser. To do this, modify the first tag of the body element as follows:

<body bgcolor="red">
 Hello World!
</body>

What we have added to the first tag is, bgcolor="red". You have the text, “bgcolor” followed by an equal sign and then “red” in quotes. With the simple web page, this is what you have:

<!DOCTYPE HTML>
<html>
 <head>
 <title>
 Simple
 </title>
 </head>
 <body bgcolor="red">
 Hello World!
 </body>
</html>

You can try the resulting simple web page code. If you do that your page will be red at the browser.

What we have added in the first tag of the body element is an attribute.

Attribute/Value Pairs
The attribute we have above is:

 bgcolor="red"

“bgcolor” is the actual attribute; “red” is the value. Many attributes exist as attribute/value pairs. Note that some attributes do not have values; you will see some of these later.

Note: you will learn a more modern way of giving the background color later on. In this part of the series, the emphasis is to understand attributes and use of tags.

Boolean Attribute
A Boolean attribute indicates that something is true or false. Do not worry about the meaning of that for now. What concerns us here is that a Boolean attribute does not have a value. So if the above tag were a Boolean attribute, all you would have seen in the tag would have been “bgcolor”; with no equal sign and no value.

Position of Attributes
You type your attributes in the start tag of a double tag element. Single tag elements have their attributes within their opening and closing angle brackets.

Tag Names
You can name a tag by the word or text that appears just after the open angle brackets (start tag). The Body element has “body” just after the open angle bracket, as in <body>; the Horizontal Rule element has “hr” just after the open angle bracket as in <hr>.

Rules about Tags
A tag begins with an open angle bracket and ends with a close angle bracket.
All tag names should be in small letters.
Never omit the end tag of a double tag element.

Number of Attributes in the Tag
You can have as many attributes in a tag as the attributes are relevant. The attributes should be separated by spaces (spacebar). Space on either side of the equal sign is optional.

Some Rules about Attributes
Attribute values should be quoted.
Double or single quotes are allowed.
Attribute names should be in small letters
Space is allowed on either or both sides of the equal sign.

The following examples are Okay:

 bgcolor="red"
 bgcolor='red'
 bgcolor = "red"

Formal Definition of an Attribute
An attribute is a property (characteristic) of an element.

Conclusion
In this article, you have seen the meaning of tags and attributes. We note that tag names and attribute names should be in small letters and the end tag of a double tag element should not be omitted. In the next part of the series, you will see interesting elements, under the topic of HTML Text Formatting Basics.

See you then.

Chrys

Broad Network

Related Articles

HTML5 Tags and Attributes

Basics of HTML 5 - Part 3

Introduction

Related Links

Comments