Should I be using span style, or div style?

HTML & CSS
1

I’m confused about when to use div, and when to use span.
https://jsfiddle.net/m6nzgt6b/2/

Would you use span on these or div? I know you use span for inline elements, but you can also use div.

<div style="width:266px" onclick="myDiv=document.getElementById('myDiv'); myDiv.style.display='block'; this.style.display='none'">

<span style="display:inline-block; width: 256px; height: 330px; cursor: pointer; background-color:#000000;border-radius: 50px; border: 5px solid #0059dd;">
 
 <span style="display:table;margin: auto;font-family: New Times Roman; font-size: 20px;color: #0059dd;position: relative;bottom:-50px;"> [ ENJOY THE MUSIC ] 
</span> </span></div>

<div id="myDiv" style="display: none;">

</div>
3

I’ve unlisted this topic because it appears to be a duplicate of this:

Further relevant information was also given to you here:

4

It’s a little different cause I’m asking specifically about when to use span and when to use div.

5

<span> is an inline element, while <div> is a block element. @PaulOB explained the difference to you yesterday. Does and should [display values] be put on every style tag? - #5 by PaulOB

See also this part of the article: https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements#Block-level_vs._inline

As far as the original question goes:

Should I be using span style, or div style

the answer (as you’re well aware) is “neither”. Using inline styles is an outdated practice. You should b using the appropriate HTML element with external CSS styling.

6

I read that inline-block should be with span, if I have the displays set correctly…

7

Where did you read that? It would be useful to see the context before commenting.

8

Here: http://stackoverflow.com/a/1611079

9

Maybe I should be using, div style display:block instead, I have no idea. These things are confusing.

10

You’re getting confused between HTML block/inline elements and CSS display properties.

Whether you choose to use <div> or <span> depends on the structure of your page and the context in which you are using it.

You are making them more confusing than they need to be because you are trying to run before you can walk. You need to take the time and make sure you understand the basic concepts first.

Yet again, go back and reread your thread from yesterday about display values. A <div> is a block element by default and therefore does not require display:block. Please read this:

See also

https://www.w3.org/wiki/HTML/Elements/div

and

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
https://www.w3.org/wiki/HTML/Elements/span

3 Likes
12

That’s not correct I’m afraid and shows a lack of understanding.

The display property can be used on any element and it all depends on context as to what property you want to apply to the element concerned.

I explained in the other post where I specifically went into detail about the differences between block elements and the display:block properties (and inline etc). Please re-read the answer if you are not sure.

CSS is about how things look and html is the structure you use.

Spans are inline elements and used for marking up inline fragments.

e.g.

<p>This is a paragraph where I've used a span <span class="highlight">to highlight this text</span></p>

CSS:

.highlight{color:red}

Html expects a structure.

This is very bad html:

  <span This is a heading</span><br> 
  <div>Hello this is really a paragraph<br>and this is another paragpraph</div>
 <span> and this is just some more text on another line</span>

You need to think about the content and then apply the correct tag. The above should be marked up like so.

<h1>Main Heading of page</h1>
<p>Hello this is really a paragraph etc. etc ...</p>
<p>This is another paragraph etc... etc..</p>
<p>This is more stuff to read <span>but his part is styled differently using a span</span> because its an inline fragment</p>
6 Likes
13

<div style" here would be the container, with display:block; and <span style=" would be the heading cause it’s only a small fragment of text. Do I have this right? And if I had a paragraph of text I would use <p style=" instead of span? https://jsfiddle.net/6x8wg27f/

<div style="display:block; width: 256px; height: 330px; cursor: pointer; background-color:#000000;border-radius: 50px; border: 5px solid #0059dd;">
 
<span style="display:table;margin: auto;font-family: New Times Roman; font-size: 20px;color: #0059dd;position: relative;bottom:-50px;"> [ ENJOY THE MUSIC ] 
</span></div>
14

No .A heading would be <h1> <h2> <h3> <h4> <h5> or <h6> - never anything else.

You should only ever use <span> or <div> when there is no more appropriate tag to identify what the content is.

1 Like
16

What do you do in the scenario when <p style=", <div style=" and <span style=" all work? Which one do you go with? https://jsfiddle.net/d6wsgyu8/6/

17

You go with the semantically correct one, as was explained in the post above yours by felgall.

18

felgall said: You should only ever use <span> or <div> when there is no more appropriate tag to identify what the content is.

And you use p when there’s a paragraph. And what I’m using it for is only a fragment.

19

In your example, neither the text nor the context is shown, so it is up to you to choose the best element based on your knowledge of HTML and experience.

A beginner’s course in HTML/CSS would be the place to start. :slight_smile:

1 Like
20

What do you mean, the text is right there. [ ENJOY THE MUSIC ], that’s the text. https://jsfiddle.net/d6wsgyu8/4/

<div style="display:block; width: 256px; height: 130px; cursor: pointer; background-color:#000000;border-radius: 50px; border: 5px solid #0059dd;">
 
<div style="display:block; font-family: New Times Roman; font-size: 20px;color: #0059dd;text-align: center; line-height:122px;"> [ ENJOY THE MUSIC ] 
</div></div>
21

If it is just a text fragment then span is the appropriate tag.

1 Like