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

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.

Answer 3

I use a when I want inline rendering changes, or I need to change the text from javascript. A span tag, by default, won't introduce line breaks and such, while a div tag will. So if, for instance, I need

<div>Welcome to my site, <span id='name'>Matt</span></div> 

to be changeable via Javascript.

$('#name').html('vantrung');

I also use a span tag if I want to add borders or other highlighting around some words, or change the font, or sometimes alter the top positioning. But it's always for inline text changes. I've had instances where I had an image and text inline, but needed to move the text up a little. I use a span for that:

<p><img src='some.png' /><span style='position:relative; top:-3px'> Some</span></p>

Answer 4

This all has to do with semantics. Basically, if you enclose something in "<b>" tags, it ought to "mean" bold not simply "be" bold. While it's true that you can style most tags however you like, life is easier for everyone involved if you use tags as they were meant to be used.

On the difference between "spans" and "divs," spans are inline level while divs are block. This means that elements that are "spans" shouldn't cause a line break. A common use would be to style some small amount of text in a paragraph.

Divs on the other hand, being block level elements should cause a line break and imply semantic separation from the surrounding content.

All these things considered, you really shouldn't be using "b" or "i" tags to visually affect how content is displayed. Use spans instead...

Answer 5

If I remember correctly, the CSS specification contains a default, or "user agent", stylesheet for HTML. You can confirm this by opening Google Chrome (which has built-in developer tools), opening the following HTML document:

<html>
<head></head>
<body>
<div></div>
<span></span>
<b></b>
<i></i>
</body></html>

then clicking the wrench, then Tools, Developer Tools, then Elements.

Select body, div, span, b, and i in turn. Note that the browser applies a "user agent" stylesheet to each element. For example, the user agent stylesheet for body is:

body {
display: block;
margin: 8px;
}

and the user agent stylesheet for b is:

strong, b {
font-weight: bolder;
}

Note that span has no user-agent stylesheet; this is so because, at least for Google Chrome, the default value for display is inline or inline-block (I'm not sure).

If a span is used like a div, it can result in invalid HTML, but that's practically the only disadvantage.

Answer 6

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 7

From the wikipedia page for HTML:

HTML elements represent semantics, or meaning. For example, the title element represents the title of the document.

Different tags have different meanings. For example, li represents an item in a list. You are allowed to make this look anyway you would like through css but it is still meant to indicate an item in a list.

To the average browser, an li may look like a div depending on what css you apply. But consider someone who cannot see. A program which reads a page to them may make a distinction between items in a list and divs.

Answer 8

(X)HTML is a rule-based system, therefore you must follow the rules...block level elements like <div> and <p> can't go inside inline elements like <span> it's simply a rule of the (valid) language.

Also, HTML is totally independent of CSS so the ability to change the display behaviour of an element doesn't, and shouldn't, have any effect on how that tag can be used validly in the HTML itself.

Answer 9

From the HTML 4.01 Specification

Content model Generally, block-level elements may contain inline elements and other block-level elements. Generally, inline elements may contain only data and other inline elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.

The P element is a block-level element and the SPAN element an inline one.