Currently set to Index
Currently set to Follow
Lagos, Nigeria

When to use the HTML div and span Elements/Tags.

When to use the HTML and Elements/Tags post thumbnail.

The purpose of HTML is to markup page contents. What this means is that, HTML is meant to provide a container for every webpage content imaginable.

These containers are what is called HTML Elements or HTML tags.

For example, when you want to add a paragraph made up of only text, you use the HTML <p> tag. When you want to add an image to a webpage, you use the HTML <image> tag. When you want to create a navigation bar, you should use the <nav> tag.

See also: How to Lazy Load Website Contents with HTML.

So when should you use the <div> or <span> tags?

In HTML, both the <div> and <span> tags are what is called, generic tags. What this means is that they are general purpose containers.

In other words, both the <div> and <span> tags, should be used, only when there is no HTML tag/elements that is meant to house the content you want to add to the webpage.

See also: Explanation on HTML Semantics.

Why is this so?

In HTML, there is a principle called HTML Semantic. What this mean is that, every HTML tag have a purpose. Hence, they should be used for their specific purpose, so that the various contents of the webpage will be clearly defined to both viewers, robots/browsers, other developers etc.

When you use the HTML <div> and <span> tag, it tells nothing about the content of the webpage it is housing, when someone else is looking at just the codes.

Doing this, is bad HTML coding practice.

So before you use the <div> or <span> tag to markup a webpage content the next time you are coding HTML, ask yourself. Is there not an HTML element that is meant for marking up this kind of content in a webpage?

If your answer is yes, after doing some lookup online, then feel free to use either of them. But if the answer is NO, then please, do not use them.

In other words, use the HTML <div> or <span> element only as the last resort.

Do you find this article helpful? Your Friend might too. So, please Share it with them using the Share button above.
Will you like to get notified when I post new updates? Then Follow me on any of my social media handles: Google News, Telegram, WhatsApp, Twitter, Facebook, Pinterest.
You can also drop your email address below if you wish to be notified by mail.

Tags: , ,

%d bloggers like this: