Jump to content
Saeed

Different Tags Seemingly Doing The Same Thing!

Recommended Posts

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.

Share this post


Link to post
Share on other sites

<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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...