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 ?
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 followingDon’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.