Elements and attributes are the building blocks of HTML. We have discussed about the elements in our HTML introduction post, but that was in general. In this post we will discuss in detail about elements and attributes. Element consists of the starting and closing tags with desired content inside them. Elements helps the browser to understand the content and helps in generating preview according to the element used. For better understanding, if we use the following example:
“<p>This paragraph is all about the elements and attributes.</p>”
In the above example, we use paragraph tag which has both starting and closing tags, with the content in between it. This complete section from starting of paragraph tag, then content in between it, and then closing tag, completely is known as Element. There are two types of elements in HTML. One with content inside it, and other with no content inside them. Elements with no content inside them are known as empty elements. Lets understand html elements and attributes with the help of examples.
In the above window, there are various elements are used in a single document. Here we have used elements under the elements. This term of using elements under elements is known as nested elements. Now lets discuss the function of each elements.
- <html> element: <html> element is used to define the whole document of the file. All other elements defines under this element. We start html document with the start tag <html>, and close the document with </html> tag. This element content has important element defined inside it, i.e. <body> element.
- <body> element: <body> element is used to define how the body of the document will look like. This element plays an important role in the appearance of our document. The content present in this element is the only thing that is being visible on the browser. This element content contains three other elements inside it, i.e. <h1>, <p> and <br> elements.
- <h1> element: <h1> element is used to define the heading of the document. This element has a content,”This is a paragraph.” followed by closing tag </h1>.
- <p> element: <p> element is used to define a paragraph in the document. The content in this element has, “This is a paragraph.”and “This is another paragraph.”, with a closing tag </p>.
- <br> element: <br> element is used to break the line of the paragraph. This element has no content inside it, hence it is known as empty element.
Is it Necessary to use end tags?
We have described above that element is defined as the open tag with content inside it and then end tag. The main question arises here is what if we don’t use the end tag? Will there be any problem in not using this end tags?
The answer is Yes and No both.There will and there will not be any problem if we don’t use close tags for some elements. But in some elements, using close tags are necessary, as will show error if no close tag is used. Lets look at the following example.
There are some elements which shows the exact results when we forget to use end tags or close tags. As in the example above, we forget to use end tag </p>, still it is showing the same result as that of with end tags. Lets look at another example.
Did you notice the difference between the previous and the above example?. You got it right, the size of the paragraph is same as the size of the heading. Why is this happened? Because we forget to use end tag</h1>, because of which browser not able to distinguish between the heading and paragraph element. Therefore, to avoid these type of errors, we recommend you to use end tags every time.
Elements are generally accompanied by the attributes. Attributes provides the additional information about the used elements. They are always used in the form of name and its value. In detail, we use a particular attribute that we want to add in our element and then we assign value to it, such that to what extent we want to modify. Each attribute is always used in starting tag with its name first, then “=” sign and then value is assigned under single or double quotes. Lets discuss some frequently used attributes to have some better understanding.
The language Attribute (lang):
The language attribute is used to define the language of the document. It generally helps the reader and in particular the search engine to while searching for a document in required language. We can use lang attribute either under <html> element or individually under <p> or <h> elements. Lets understand the use of lang attribute with the help of an example.
In the above picture we have used lang attribute in <html> element. Similarly we can use lang attribute in paragraph tag also. Lets see in the below example:
The Title Attribute:
The title attribute is used under <p> element. This attribute is used to display tooltip on a paragraph when someone hovers mouse over it. Tool tip is defined as the short information about any line or paragraph. Lets see how we use title attribute with the following example.
You can clearly see when i hover my mouse on line, there appears a tool tip, which suggests me the answer about the it is written about.
The Style Attribute:
This attribute is used to add styles to our paragraph, such as changing text color, size etc to make it attractive. Look at the following example for better understanding.
Changing the color of the text is that much easy when using style attribute.
The href attribute:
Suppose you are writing an article for your paragraph and in between comes a topic that you don’t want to explain much or don’t have much knowledge. But, you deep in your mind you also want your readers to understand that topic. Hence, you added that topic with the link of website explaining it beautifully. In this case, links can be added in html document with the help of href attributes. Lets understand how with help of following example.
The href attribute always comes under <a> tag.
The “src” Attribute:
The src attribute is used to define filename of the image source which has to be imported in our html document. In general, it directs html to look for for the image source with the given filename, and add it to present document. Have a look at the following example.
The Size attribute (Width and Height):
In the above example, when we use src attribute inserting image, the image is inserted with its original size. Suppose you just want a small size in your article, in that you can use width and height attribute. Width and height attribute is used to give desired width and height to the inserted image in our article. Lets see how can we use this attribute.
The “Alt” attribute:
The alt attribute is used to provide the alternate text for the image which defines what our image is all about. But the question is why do we use alt text? We use alt text attribute for our image for the case, if internet speed is slow or image is not loading, if a person is visually impaired and he is using screen reader. Some times the slow speed of website also results in slow or no loading of images. In this alt text about the image gives the user general idea that what that image is all about. Look at the following example.
So, these were some common elements and attributes which are used frequently. Did you notice we used double quotes for assigning the values after the name of the attributes. Don’t you have question in your mind that is it compulsory to use double quotes, can’t we use single quotes? Well, we can use single quotes also and we will get the same result as we are getting with double quotes.
Another thing that you have noticed is that we have used lower cases in all our examples. You might came across this question using lower cases only, not a upper case, once in your mind, don’t you?. Well, we can use upper cases also and it will produce the same result, as html is not case sensitive. But, we suggest you to use lower case always, so as to avoid any confusion and for better results. For further information on elements and attributes, you can check this website for more and online practice.
If you have any query or any doubt about elements and attributes, feel free to leave your comment below.
Thank you and keep practicing 🙂