HTML: Elements and Attributes

Elements

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.

Elements and attributes: Elements

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.

  1. <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.
  2. <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.
  3. <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>.
  4. <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>.
  5. <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.

Elements and Attributes: No close tags

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.

Elements and Attributes: No end tags with heading.

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.

Attributes

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.

Elements and Attributes: Lang attribute

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:

Elements and Attributes: Lang attribute

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.

Elements and Attributes: Title attribute

Elements and Attributes: Tooltip

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.

Elements and Attributes: Style attribute

Elements and Attributes:  style attributes

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.

Elements and Attributes: href attribute

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.

Elements and Attributes: src attribute

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.

Elements and Attributes: Alt Attribute

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 🙂


8 Comments

why not find out more · August 17, 2019 at 9:18 pm

I just want to mention I am just beginner to weblog and actually savored this web page. Most likely I’m going to bookmark your site . You definitely come with incredible articles and reviews. Thanks for sharing with us your blog.

reincarnation · August 23, 2019 at 10:37 am

This page makes me think of the other page I was seeing

skylinetix · August 27, 2019 at 2:35 am

This web site definitely has all the information I wanted concerning this subject and didn’t know who to ask.

wricefinancial · August 29, 2019 at 4:12 pm

I have to thank you for the efforts you have put in writing this blog. I’m hoping to view the same high-grade blog posts from you later on as well. In fact, your creative writing abilities has inspired me to get my own site now 😉

Tractor Workshop Manuals · August 30, 2019 at 5:02 pm

As a web site owner I believe the subject matter here is reallyexcellent. I appreciate it for your efforts. You should keep it up forever! Best of luck…

oflewskii · August 31, 2019 at 10:38 pm

Spot on with this write-up, I truly feel this web site needs much more attention. I’ll probably be returning to read through more, thanks for the information.

golden goose · September 13, 2019 at 8:32 am

My spouse and i have been quite thrilled that Louis managed to deal with his preliminary research from the ideas he made from your very own web pages. It’s not at all simplistic to just be freely giving tips and tricks that many the rest have been making money from. And we also acknowledge we’ve got the blog owner to thank for this. The entire illustrations you have made, the straightforward web site menu, the friendships you can aid to promote – it is mostly exceptional, and it’s aiding our son in addition to our family understand this situation is enjoyable, which is certainly exceedingly essential. Thank you for all the pieces!

Jasa video animasi 2D · September 21, 2019 at 4:34 am

Awesome post. I am a normal visitor of your blog and appreciate you taking the time to maintain the nice site. I will be a regular visitor for a really long time.

Leave a Reply

Your email address will not be published. Required fields are marked *