1
\$\begingroup\$

Is it considered bad style to always use <div> instead of using, say, <span>? I know that using specific tags like span better convey the purpose of the node, but is it actually frowned upon to always use div instead?

For example, if I were to have an inline style:

<div class="hello">Hello, my name is <div class="name-div">John Doe</div></div>

<div class="hello">Hello, my name is <span class="name-span">John Doe</span></div>

Where the name-div class would have display: inline set. Is either way considered fine or is there a commonly accepted preference?

Edit:

Here is an actual example so that maybe this won't be off-topic:

<div class="online">You have been online for <span class="time">30</span> days.</div>

Where the desired output is something like:

You have been online for 30 days.

(i.e. the 30 has some special styling).

In this case, is it really considered "bad" to use a div with inline styling rather than span? I feel that arguments can be made either way in that span is obviously more accurately describing the function of that node, but you could also say it's preferable to minimize the variety of tags for the sake of consistency across browsers (and choose not to use things like em or strong in lieu of special styling on a div).

\$\endgroup\$
  • \$\begingroup\$ Edited my answer below. \$\endgroup\$ – RoToRa Dec 20 '17 at 13:28
1
\$\begingroup\$

First off, this question is actually off-topic since it doesn't contain real (or realistic) code, but example/placeholder code and text. In this case it's important because the choice whether to use span or div depends on the content (and context) of the text.


One way to think about it, is: Would it make sense, if you don't have your style sheet and only the browser default style sheet is applied.

Using a div it would look like this:

Hello, my name is

John Doe

and using a span it would be

Hello, my name is John Doe

As mentioned above the choice whould depend on the content and context. Let's assume that is example text is an actually real live sample:

If this is the introduction sentence to a text of someone introducing themselves, then it makes sense to interpret it as a continuing sentence, thus you probably should use span.

However if the goal is to simulate a "Hello, my name is ..." sticker where the name is separate from the rest of the text, then it could make sense to use a div.


Another thing you should keep in mind, that div and span are very generic elements and only should be used as a last resort. Instead one should strive to use specific elements than convey a meaning. For example, if this were a quote that some one said, then you should use a blockquote element instead of the outer div. And for the name use em or strong if you want to emphasize it, or just an i, which can be a suitable element for a name.


Regarding your edit:

In this case, is it really considered "bad" to use a div with inline styling rather than span?

In this case it most certainly is. It's part of the surrounding sentence and not a new division.

I feel that arguments can be made either way in that span is obviously more accurately describing the function of that node, but you could also say it's preferable to minimize the variety of tags for the sake of consistency across browsers (and choose not to use things like em or strong in lieu of special styling on a div).

Are you saying you are afraid there are browsers out there, that only know the div element and could be confused by span, or even more "exotic" elements such as em. To be frank, that is absurd. Any reasonable browser out there can handle any element name you throw at them, even if you made them up (within the limits of HTML/XML rules for element names).

The whole focus of HTML is semantic mark-up of documents.

| improve this answer | |
\$\endgroup\$
  • \$\begingroup\$ Could the down voter comment on what is wrong with my answer? \$\endgroup\$ – RoToRa Dec 20 '17 at 13:29
  • 1
    \$\begingroup\$ First off, this question is actually off-topic - knowingly answering an off-topic question. \$\endgroup\$ – t3chb0t Dec 20 '17 at 13:34
1
\$\begingroup\$

The div element, short for division, is a block element mostly used to group larger chunks of HTML, to create CSS-styled layouts.

On the other hand, the span element is an inline element, mostly used to group and stylize text/images. It makes it easy to apply custom styles without changing the general layout.

Also, a div element takes all available width while the span only takes as much width as necessary.

It is certainly not illegal (since HTML5) what you're doing, but to follow semantics I'd use span for what you are trying to achieve.

| improve this answer | |
\$\endgroup\$

Not the answer you're looking for? Browse other questions tagged or ask your own question.