Should I be using span style, or div style?

HTML & CSS
22

Would span be appropriate just for a sentence also, or would that be different? or, if it’s longer than a few words, a sentence or two, then use div?

23

I will respectfully disagree with @felgall on this point. A text fragment is a grammatical construct. I would argue that text fragments commonly serve as headers or titles and are encased within header tags. Therefore, the apporpriate tag to use depends on the purpose of the text on the page and its context. It depends on usage on the web page.

24

If it’s left alone, without any header tag, then what? All the header tag does is make the font bold.

25

Does the text serve a purpose beyond decoration? Could the same text appear randomly on any of the boxes or does it serve to identfy the target of a link?

If it’s only for decoration, then <span> tags should be satisfactory, unless it needs to behave like a block then <div>s or a more semantic block element would be appropriate. Again, it depends on the context.

26

This would be the context:

27

That doesn’t show the context at all - what is the surrounding content? Most content gets its context from what it is compared to the rest of the content it is with so you need to show ALL the content of the page in order for us to even start working out what tags should be used to mark it up in HTML.

28

It’s sitting in the sidebar with nothing else in its box, by itself.

29

So that’s the entire page? If so then span will do as it doesn’t have any meaning.

1 Like
30

That is merely it’s visual appearance. A <h1>, <h2>, <h3>, <h4>, <h5>, or <h6> tag has a semantic meaning that allows screen readers and search engines to determine the proper structure of a document. They are an extremely important ‘roadmap’ for those tools to determine what is important of a web page. Even if you were to change the look of a <hx> tag, its semantic meaning would remain intact.

1 Like
31

What’s an hx tag?

32

I used the ‘x’ to refer to any one of the 1-6 numbers that usually come in a header tag, rather than type them out all over again.

33

ok…

34

@felgall, you’ve been fished and rewarded for giving the “sought after” answer with a “like”. :slight_smile:

@asasass, you ignored the best practice advice to use block elements where block behavior is desired, if possible. Using a span and declaring it to have block behavior for no practical reason is counter to that advice.

div {
    width: 256px;
    height: 150px;
    cursor: pointer;
    background-color:#000000;
    border-radius: 50px;
    border: 5px solid #0059dd;
}
span {
    display:block;
    font-family: New Times Roman;
    font-size: 20px;
    color:#0059dd;
    text-align: center;
    line-height:117px;
}

<div>
    <span> [ ENJOY THE MUSIC ] </span>
</div>
35

How come you don’t put a display property on div, I thought they are required to have one?

And then I read this:

So, I guess the div tag in this code doesn’t need a display value then.

1 Like
36

Correct. The user agent style sheet already assigns it that display property. You’d only assign a display property if you needed to change the <div> from ‘block’ to something else.

3 Likes
37

The only reason why I need to assign display block to span is cause without it text-align: center; wouldn’t work.

38

So, would the rule of thumb be, if everything works how it’s supposed to without adding a display property, then it doesn’t need one?

39

The appropriate way to center a span is to assign text-align:center to the parent <div> (the containing element).

1 Like
40

How are you supposed to know which goes where?

41

A HTML/CSS 101 course would help with that.

For the sake of adding some context here, I have never attended a face to face course on anything other than a 2-day JavaScript course I did last year. All my learning has come from books or more recently the internet (MDN particularly).

My approach has usually been, buy the Dummies guide for anything I know nothing about, then get an O’Reilly book on the subject when I want something more in depth. That said, what I know about HTML5 and CSS3 came from these two books:

I worked through both of those books from end to end, making sure to type out every line of coded needed for the sample web site. I did not just cut & paste things. Everytime I had a problem, it was then my own typing that was at fault, and I was forced to debug things - exactly as you would if you were doing this for a living. The only time that didn’t work, was when I discovered a could of errata in the books, which I made a point of communicating to the authors concerned.

1 Like