what html tags is it legal to nest within themselves?

Question

It's obviously OK to nest a <div> tag within a <div> tag and likewise <span>. However what about <b> and <i> or if you are pc <strong> and <span style="font-weight:bold;">.

And even if it's syntactically correct what does <b>one <b>two </b>three </b>four mean?

If I'm removing tags should the one </b> close or preceding <b> and so it becomes: <b>one two </b>three four or should they pair to become the equivalent of <b>one two three </b>four.

(Note please no comments about <b>. The reason I'm cleaning it up is to remove as many characters as possible because the html can only be 200 characters long. And what is more, I know what bold means, my PC knows what bold means and you know what bold means - so why waste 5% of space with "trong"?)

Answer 1

The question “what html tags is it legal to nest within themselves?” needs to be interpreted as relating to nesting of elements, since tags can never be nested.

The answer depends on HTML version (you need to check the content models of elements to find the answers) and partly on your definition for “legal”, too. For example, <abbr><abbr>X</abbr></abbr> does not violate any conformance requirement, but such nesting makes no sense. Checking the nesting rules is nontrivial, since the syntactic requirements are presented partly in rather complicated ways.

The i, b, strong, and span elements may be nested freely, and this includes nesting i inside i, etc.. The same applies to most of the text-level markup.

What such nesting means has always been vague and obscure. Early HTML specifications said that browser should honor nested emphasis but did not explain what it means. For example, you cannot make italic text more italic (instead, it has been argued that in an i element inside an i element, text should be upright), but you could make bold text more bold under some conditions.

Browsers treat markup like i and b in a simple manner. Their effects are idempotent: an i inside an i has no effect on rendering by default. But it does create an element, and this may matter in styling, and in scripting. And, in principle, browsers might some day get fancy ideas about it (especially if they ever take HTML5 “semantics” for i seriously, they could really make the inner i look different from the outer).

The question does not quite specify the practical context, but there seems to be an implied assumption that when an element is nested in an element of the same type, the inner markup can be removed. While this is debatably true for b and i for example, it is generally false. For example, <div>foo<div>bar</div></div> produces two lines; if you remove the inner div tags, it produces “foobar” on one line.

Answer 2

What html tags is it legal to nest within themselves?

There's no list, so you'll have to look for yourself. Look at the "content model" sections of every element in the spec. It won't explicitly say that you can't nest a certain element within itself, so you'll have to dig.

Please no comments about <b>.

Read what the HTML5 spec has to say, especially the second paragraph:

The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.

The b element should be used as a last resort when no other element is more appropriate. In particular, headings should use the h1 to h6 elements, stress emphasis should use the em element, importance should be denoted with the strong element, and text marked or highlighted should use the mark element.

It's not invalid markup to have nested b elements, but there is no definitive answer to what nested b elements would actually mean.