In this post we’re discussing about HTML tags, attributes and elements and see some examples to make the concept clearer. Before we proceed, let’s review our previous sessions.
Session 1: Tutorial Text – HTML Getting Started, MCQ Questions
Session 2: Tutorial Text – HTML Document Structure, MCQ Questions
In our last session, we were introduced to the document structure. We came to know that every HTML document should start with <!DOCTYPE> – the Type Definition. It is to declare the document type and the HTML version. There is only one kind of doctype for HTML 5 but version 4 has 3 different kinds for HTML. Also you learned that <html> is the root element which is not inside any other element. <html> element contains the <head> and <body> parts.
HTML Tags
In our discussion, I’m using the terms surrounded by angle brackets <> such as <html> <head> <body> and so on and you may be wondering what they are and why they are surrounded by angle brackets?
Well, in HTML they are called Tags. A tag is a label that defines the content in it. There is an opening tagsuch as <head> and an associated closing tag such as </head>. Whatever written in between <head> and </head> are the content of Head element. Look at following example:
<title>HTML Tags Attributes and Elements</title>
In above example, the <title> is the opening title tag. The ‘HTML Tags Attributes and Elements‘ is the content of title. And, </title> is the closing title tag.
The opening tag marks the beginning of an element and the closing tag marks the ending. In above example <title> tells that the title begins from here and </title> tells the title is ended from here.
However, a point to be noted here – not every tag has closing tag. Some tags such as line break <br>, image <img>, horizontal line (rule) <hr>. These tags do not have closing tags because there is no content to enclose. So, they sit alone!
Tags that have closing tags are known as “paired tags” while the ones that do not have are “single tags”.
You might come across “self-closing” tags, whereby a BR tag, for example, will look like “<br />” instead of simply “<br>”. This is a remnant of XHTML, a form of HTML based on another markup language called XML. HTML5 is much more chilled out than XHTML and will be happy with either format. Some developers prefer one way, some prefer the other.
I’ve collected a complete list of HTML tags and it is ready to download. Though you don’t need all the tags, but it can be a good reference when you need.
Right click the link below and choose ‘Save link as’ option to download the PDF file in your chosen folder.
Complete List of HTML Tags (pdf)
Attributes
Attributes are the extra bit of information to add to html tags. They appear inside the opening tag and their values sit inside quotation marks. They look something like <tag attribute=”value”>the element contents</tag>. We will come across various tags with their attributes later. However to clarify your concept right now, let me put some examples here.
Let’s suppose you wish to display a horizontal line in your html page and you know <hr> is the tag to create it. Now, what if you need only the half line? I mean a line that is drawn only half of the page width? You should specify the width of the line. Here comes the role of attributes. Look at the example below:
<hr width=”50%”>
In above example width is an attribute of HR tag and 50% is the value of width attribute.
Another example, you need a paragraph and you know <p> is the tag to markup a paragraph. Now what if you need a paragraph aligned right? The align attribute can add more information to P tag. So,
<p align=”right”>This is a sample paragraph aligned right on browser</p>
Here, align is the attribute and right is the value.
Did you notice the values are enclosed within double quotes? Though it is not mandatory to write values inside double quotations, it is a good practice to follow standards. HTML is so friendly that it accepts single quotation – apostrophe ( ‘ ), double quotation ( ” ), and also no quotation at all! So all of following is valid
align=right
align=”right”
align=’right’
Elements
Well, we talked a lot about elements in our previous section too and I guess I don’t need to say anything more. However because now you know tags and attributes, it will be more easier to define elements.
Tags tend not to do much more than mark the beginning and end of an element. Elements are the bits that make up web pages. You would say, for example, that everything that is in between (and includes) the<body> and </body> tags is the body element. As another example, whereas “<title>” and “</title>” are tags, “<title>Tags Attributes and Elements</title>” is a title element.
MCQ Questions from this chapter
I’ve composed 20 multiple choice questions from this chapter you can visit the link below to get those questions. I’ll answer these questions in next session. However, I’ve presented the correct answers of previous set in that page.
Your Questions & Confusions
- Visit following link
/website-designing/ - Log in using your Facebook, Google, Yahoo accounts. (Use the Log in buttons on right sidebar. If you are viewing this page in mobile device, you’ll find the login buttons below)
- Post your questions or confusions. You are equally welcomed to answer other member’s questionsthere.
Comments, Suggestions & Feedback
We’ve a comment form below this post. You’re most welcome to write your comments, suggestions or feedback. They are highly appreciated.
Leave a Reply