How are different HTML elements equivalent?

Question

Some HTML elements (<div>, <span>, <p>, <h1>, <h2>, ..., <h6> <b>, <i>, and so on) seem to behave the same way except for default styling. For example, <span style="font-weight: bold;"> x </span> seems equivalent to <b> x </b>. Some elements such as <a> have special properties but behave mostly the same way.

Can someone make this precise?

In particular, is there a subset of elements that "covers" all of HTML?

---

Edit: I understand that elements are meant to carry semantics. But suppose that I don't care about semantics, and I only want to deal with the smallest subset of HTML that will give me access to some given browser behavior. I'm wondering how to find that subset.

Answer 1

The main difference between them is semantic. To illustrate, in HTML5 for example, you have div, section, header, footer etc., which are all block elements. In HTML4 you're required to use div for all of those. Which is easier to read, to look at, to style - a page full of div's or something divided into headers, and sections, and footers?

As you state, some elements have attributes that are specific to that element type/or certain types (e.g., a). So there's another difference.

Finally, in your list, you also have some block level (e.g., div, p) and some inline level (e.g., span, b) elements - those have very different default behaviors. See: http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

Answer 2

Some reasons why an element cannot fully be replicated by <span class="..."> ignoring mere semantics and just considering browser or other HTML consumer behaviour:

• The element is the root element.
• The element is a metadata element
• The element is a scripting element
• The element is an embedded content element
• The element is a forms element
• The element is an interactive element
• The element is a links element
• The element is used by the document outline algorithm; including:
  • Sectioning content elements
  • Sectioning root elements
  • Heading content elements
• The element goes in a place in the DOM where a span is precluded from going by the parser
• The element forms part of a specific rendering binding
• The element has a default WAI-ARIA role other than 'no role'
• The element's DOM interface extends beyond that of HTMLElement
• The element is the span element itself.

By my reckoning that leaves abbr, address, b, bdi, bdo, br, cite, code, dd, dfn, div, dl, dt, em, footer, header, kbd, mark, p, pre, rp, rt, ruby, s, samp, strong, sub, sup, u, var and wbr as the maximum list of elements replaceable by span if one ignores semantics. That's 31 out of 107 different elements in HTML5. Of the other 76, each has a specific job in browsers.

I note that of the above list, there are a number where I don't know what the equivalent styling would be, and that in all cases it's less typing to use the correct semantic element than to replace it with a span+class.

Answer 3

HTML is meant to mark up text semantically. That means giving meaning to a piece of text, like this is a headline, this is a paragraph, this is a quote, this should be emphasized. Some/most of them are displayed very similar by default, but that's not the point. The point is to be able to programmatically extract meaning and process elements according to their meaning, for example by styling them. Don't confuse semantics with style.

If you want to leave that aside, you pretty much only need block level elements like a div and inline elements like span, plus anything that has a specific function like links, objects etc.

Answer 4

This depends on what you mean by browser behavior. All browsers will treat e.g. a elements with href attributes in a special way, as links, and this cannot be expressed in CSS. Similarly, form input fields are special, and so is img, even though you can simulate much of its behavior by using a background image in CSS. But what about abbr for example? Although most browsers just apply some default styling to it, some special browsers or assistive tools used with them give the user optional access to the value of the title attribute. Similarly, while most browsers treat h1 and other heading elements just by applying some default styling to them, some browsers have e.g. a mode where the browser only reads the headings to the user.

Similarly, you can create tables using CSS (display: table etc.) without using any table markup in HTML—though older browsers won’t get this right—but then your “tables” will not have accessibility features that HTML tables can have.

Search engines are not browsers, but they may be very important, and they are known to pay attention to HTML markup, though the details have not been disclosed. However, if you start e.g. using styled div elements intead of heading elements, you will probably lose something in search engine friendlyness.

Answer 5

Some elements have a very specific purpose, for example html, head, body, script, meta, embed, object, hr, table, tr, td, form, input. They do things that isn't possible to do by just specifying a style.

The rest of the elements, for example span, div, b, i, u, h1, p, only differ in their default style. You can use a span tag and apply display:block to it, and it works as a div tag.

Note though that there are block elements like div, and there are inline elements like span. You can't put a block element inside an inline element (until all browsers support HTML 5).

So, you strictly don't need all different elements. Some elements are even deprecated in HTML 4, for example b and i, as they are not needed and doesn't follow modern markup usage, so they should be replaced by styling.

You should however consider the semantics that the different elements add. The h1 element for example is important for search engines when they try to find out what the page is about. If you don't use the h1 element for your headline, search engines will rate your page lower.