Different Tags Seemingly Doing The Same Thing!

[Saeed]

Good day,After more than 12 years, I've been thrown back to website design and maintenance. So a lot of newer HTML constructs are, well, new to me! I'd very much appreciate your support in getting up to speed. Here's my question:It seems to me that <div>, <span>, <class>, <id> (missed any?) do more or less the same thing, namely formatting the text following them. <div>, <span> are apparently local; the other 2 rather global. Is it so?Could you please describe the differences? What are the criteria for picking one over the other?Thanks.

[Ingolme]

<div> is a box, <span> is a container for text. There's no such thing as an <id> element.A <div> simply is used to divide the content of the page into portions (often separating navigation, header, footer and content). The <span> element is used to style a piece of text that's usually within a larger text.

[Saeed]

You're right, there's no such a thing as <id> or for that matter <class> element; they are both attributes, sorry. Thank you for the explanation about <div> & <span>. Please explain as well the different usage of <id> & <class>. The explanations on w3schools.com read rather similar. They both can be used by a JS script as well as styles.

<div> is a box, <span> is a container for text. There's no such thing as an <id> element.A <div> simply is used to divide the content of the page into portions (often separating navigation, header, footer and content). The <span> element is used to style a piece of text that's usually within a larger text.

[Ingolme]

A class will apply a CSS rule to all the elements that have the class. The usage is pretty clear. When parsing CSS rules, those that use the ID selector have more priority than those that use a class selector:For these selectors:

#box { background-color: red; }.color { background-color: blue; }

The following element would have a red background:

<div class="color" id="box"></div>

An ID can only be used on an element once in the whole document, that's why people use classes more often. Usually you want to apply a style to several different elements.As for Javascript, the ID is a very easy way to access an element you need to modify:

document.getElementById("box").innerHTML = "Some text"

In Javascript it's rare to look for elements by their class name because there's a lot more code required to find the specific one. An element may have more than one class name.

[Synook]

Note that in the default CSS stylesheet for HTML, <div> is a block element and <span> is an inline element. Semantically, they both have no meaning.