What is the ideal tag to use when I want to apply a css style to a block of text?

Question

For stylish text, I usually use one of the following:

<span class="header">...</span> <div class="header">...</div> <p class="header">...</p> <label class="header">...</label> 

But does it really matter which tag I use to apply a CSS style to a block of text?

I usually use <div> for everything that should be in one block (for example, headings or footnotes) or <span> for all inline (for example, underlined text in a paragraph), however, I recently discovered that I used <div> to create *Required text, which I thought seemed a little silly as it is one word, and I started wondering if this is the “right” way to do things or if one tag is better than another for a simple text style like to this.

Is there any standard which tag to use when I want to apply the css class to a block of text? And if so, what factors determine which tag to use and when?

Answer 1

All tags that you specify have semantic value.

For example, <p> stands for a text paragraph, <label> is a block of text used to annotate input. In addition, <div> is useful to separate the page in logical sections (divisions, hence the name), and not just text, but <span> usually used to indicate a section of inline text for a particular style (even if the gap can be made to display as block level element, if necessary).

While you do not need to follow the standard of semantics, it is useful when the page should not be interpreted visually, for example, by a search robot that does not "see" the page with human eyes, and you need to know how the page is organized.

Answer 2

Review the semantic definitions for each type of item you have: http://w3schools.com/tags/default.asp

While span and div are semantically neutral, they can be better represented by a class or handle that helps provide value to the user and browser. In addition, you can use a higher-level block or inline element to provide style with CSS, rather than inserting additional elements strictly for display.

This is one area where HTML5 provides some benefits by defining new elements such as article , section , aside , figure , header , hgroup , nav , footer , details and summary . Each of these types of elements and their standard use and accepted meanings in the above link also.

Markup is not an exact science, but adding extra information to the elements used and their implied values ​​will not only help you structure your code better, but also give you more options when it comes to CSS selectors.

Answer 3

 <span class="header">...</span> 

Ideal for editing embedded text.

 <div class="header">...</div> 

Commonly used for blocks, but yes, also a block with text is a block.

 <p class="header">...</p> 

This is for paragraphs. In addition, by default they have an additional margin below it.

 <label class="header">...</label> 

Used only in the context of form elements.

You can use all of them for everything, you can also span it so that it appears as a block element, but you cannot be sure that it will be the same in all browsers. And, as SirDarius already mentioned, this is important for non-visual ways.

Answer 4

"All the tags you specify have semantic meaning. For example, <p> stands for paragraph, <label> is a block of text used to annotate input."

Sir Darius is absolutely right. The tags you use should reflect what they describe.

If you want to know exactly about <div> and <span> than <div> are used for group block elements, which are usually used for formatting with css. A <span> used for inline elements (for example, for a single word in a sentence).

Contact here for more information on all tags.