HTML 5 Tags and Attributes
HTML5 Basics - Part 4
Forward: In this part of the series, we look at HTML5 tags in more details.
By: Chrysanthus Date Published: 21 Jul 2012
Introduction
Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.
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). We 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>
<p> </p>
The first one is for the Body element. The second one is for the Paragraph element. These tags can be nested as follows:
<body><p> </p> </body>
The following is the same as above:
<body>
<p>
</p>
</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><p> </p> </body> … right
while the following is wrong:
<body><p> </body></p> … 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.
The following code illustrates how you can nest tags with contents
<body>
body content can go here
<p>
paragraph content can go here
</p>
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; we shall see some of these later.
Note: we shall 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 this for now. What concerns us now 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.
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 opened angle brackets (start tag). The Body element has “body” just after the opened angle bracket, as in <body>; the Horizontal Rule element has “hr” just after the opened 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 attribute should be separated by spaces (spacebar). Space on either side of the equal sign is optional.
Some Rules about Attributes
Attribute values must 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 OK:
bgcolor="red"
bgcolor='red'
bgcolor = "red"
Formal Definition of an Attribute
An attribute is a property (characteristic) of an element.
The blockquote Element
The blockquote element is a double tag element. It is used to quote information from another document. The element has an optional attribute whose name is, cite. The value of the cite attribute is the web page address of the document where the text for the quotation is coming from. The following example illustrates this:
<blockquote cite="http://www.somequotesite.com/aWebPage.htm">
Long quotation from a great person. Long quotation from a great person. Long quotation from a great person. Long quotation from a great person. Long quotation from a great person. Long quotation from a great person. Long quotation from a great person. Long quotation from a great person. Long quotation from a great person. Long quotation from a great person.
</blockquote>
The browser may not display the value of the cite attribute.
You most remember this: with HTML5 all the text of the name of the element and the names of attributes should be in lower case, as we have been doing. The name of the element in the start and end tag, should be in lower case.
Conclusion
In this article, we 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 never be omitted. In the next part of the series, we shall see interesting elements, under the topic of HTML5 Text Formatting.
See you then.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT