The essential difference among HTML tags?

Question

The <b> tag make texts bold, but if assigned with CSS "font-weight:normal;" then it's absolutely like a normal tag. On the other hand, the <i> tag can be styled to display the text inside like a <b> tag:

<i style="font-style:normal; font-weight:bold;">

Yeah, I'm talking about the interchangeability of HTML tags, so we can have fewer tags.

And 2 of the most famous tags turn out to be "div" and "span" which are discussed in this SO Question : What is the difference between HTML tags DIV and SPAN?

I want to know what is the essence of the <div> tag that makes a span tag like this:

<span style="display:block;"></span>

cannot be a replacement for div? By another respect, what's the deep reason behind make these code become "invalid" (X)HTML:

<span style="display: block"><p>Still wrong</p></span>

Thanks!

---

For the scenario, I'm building a so-called "HTML-CSS-Generator", which requires deep knowledge of HTML tags. I want to filter the sets of all valid HTML tags to make a set of "major tags". Then I'm asking for the interchangeability of the tags.

---

Update (the ultimate goal of this question)

I wonder if the difference was that the tag is natively "block-level" (like div,p) or "inline-level" (like span) ?

Is there any other kind of "native property" (that CSS or JS cannot change) like "block/inline-level" for the HTML Tags ?

Answer 1

Don't go checking on how things render or how they look (even though this is part of the HTML specification). HTML is all about meaning.

What do the tags <u>, <i>, <b> mean? Right, they mean nothing! They only define how things look. That's exactly the reason why they were removed from the specification in HTML5 (or actually deprecated).

Of course, you can style a <div> as a <span>, hell you could style an <div> as an <input type="text">. But that's not what it's about, it's all about meaning.

According to the HTML spec, a <div> is a divider. It divides certain parts of a website, certain sections as an Header or a Content Box go inside a <div>.

A <span> is used to specify something that's inline. Like the following

<div class="Location">    
   Currently I'm living in <span class="Country">The Netherlands</span>
</div>

Don't compare HTML tags based on how they render. Also always choose the HTML tag that most closely resembles the data that's displayed, even if it renders completely different than what you want.

---

The difference is not about whether they are block or inline (even though that's an effect of it). The difference is the data they represent.

Answer 2

Consider form versus function. The DOM is a structure. It's an object model. <div>s are block-level elements, and they have rules applied to them. <span>s are inline-level elements and have different rules applied to them.

Stylistic elements such as <u>, <b>, <small>, <i>, <em> etc., are being phased out in HTML5 anyway in an effort to abstract form from function which is why you should rely on CSS to style <span> elements for you instead.

CSS has a responsibility, which is to style the page render for the user. It can tell the browser to treat block-level elements like inline-level elements and vice versa for display purposes.

Answer 3

the question is already answered, but I just wanted to add:

For people who used early versions of HTML, it might be confusing at first, because they might think and have meaning -- but that was just direct hard-coded "in-line" styling in the HTML document in the times before there was CSS.

CSS was invented to separate the styling from the document structure.

Now that we have the styling separated in the CSS, it's up to the developer how they style their HTML tags -- completely independent of the document structure and much more flexible.

The HTML defines the structure of the document, the CSS defines it's styling.