What's the ideal tag to use when I want to apply a css style to a block of text? [closed]

Question

To style text, I typically use one of the following:

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

But does it actually matter which tag I use for applying a css style to a block of text?

Usually I use <div> for everything that should be in a single block (like headers or footnotes), or <span> for everything inline (like emphasized text in a paragraph), however I but recently found myself using a <div> tag to style the text *Required, which I thought seemed a bit silly since it's a single word, and I started wondering if this was the "correct" way of doing things, or if one tag was better than another to use for simple text styling like this.

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

Answer 1

Everyone of the tags you quoted has a semantic value.

For example, <p> denotes a text paragraph, <label> represents a block of text used to annotate an input. Also a <div> is useful to separate a page in logical sections (divisions, hence the name), not necessarily text only, while a <span> is usually used to denote a section of inline text for specific styling (even though a span can be made to be displayed as a block-level element if necessary).

While you are not required to follow the semantics standard, these are helpful when the page needs to be interpreted in a non-visual way, for example by a search engine crawler, that does not "see" the page with human eyes, and needs to know roughly how the page is organized.

Answer 2

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

While span and div are semantically neutral, they may be better presented with a class or descriptor that helps to provide meaning to the user and the browser. Additionally, you may be able to use a higher-level block or inline element to provide styling via CSS as opposed to inserting additional elements strictly for the sake of display.

This is one area as well where HTML5 provides some advantages, defining new elements like article, section, aside, figure, header, hgroup, nav, footer, details and summary. Each of those element types and their standard usage and assumed meanings in the above link as well.

Markup is not an exact science, but putting some extra thought into the elements used and their implied meanings will help to not only structure your code better, but also give you more options when it comes to CSS selectors.