CODEWITHSUNDEEP
htmlcsssemantic-markup
user592638
user592638

Reputation:

should I use span tags or p tags?

I made this sketch in photoshop and I am converting it to HTML & CSS.

enter image description here

HTML: 

<div class="pricebox">
    <p class="price">360kr</p>
    <p class="min">40 min</p>
    <p class="info green">Körlektion</p>
</div>

<div class="pricebox">
    <p class="price">1700kr</p>
    <p class="min">Riskutbildnig 2</p>
    <p class="info yellow">Halkan</p>
</div>  
<div class="pricebox">
    <p class="price">500kr</p>
    <p class="min">Riskutbildning 1</p>
    <p class="info red">Riskettan</p>
</div>

CSS

body {
    font-family: "Myriad Pro",Myriad,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
.pricebox {
    display:inline-block;
    border: 1px solid #EEEEEE;
    border-radius: 3px;
    width: 100px;
    height: 150px;
    margin: 5px;
}

.price{
    font-size: 28px;
    font-weight:300;
    color: #383838;
    padding: 11px;
}
.min {
    font-size: 11px;
    color: #909090;
    padding: 0 25px;
}
.info {
    height: 35%;
    margin-top: 15px;
    color: #EEEEEE;
    font-weight: 600;
    font-size: 11px;
}
.green{background-color: #a7d155;}
.yellow{background-color: #eada42;}
.red{background-color: #e54e4b;}

But I am kinda lost on how to structure everything up, should use span or div tag instead of p-tags.

Check this jsfiddle: http://jsfiddle.net/upas3/1/

Any ideas or solutions are welcome.

Upvotes: 6

Views: 4629

Answers (10)

cimmanon
cimmanon

Reputation: 68319

This looks like tabular data, and tabular data goes in tables. However, that doesn't mean it has to look like a table!

http://jsfiddle.net/jdEP4/

table.prices {
    display: block;
}

table.prices thead {
    display: none;
}

table.prices tr {
    display: inline-block;
    border: 1px solid;
}

table.prices td {
    display: block;
    text-align: center;
}

.info.yellow {
    background: yellow;
}

.info.green {
    background: green;
}

.info.red {
    background: red;
}

The CSS is incomplete, of course, but the baseline is there for reformatting the table.

Upvotes: 2

Charles-&#201;douard Coste
Charles-&#201;douard Coste

Reputation: 1682

I like more semantic solutions:

HTML:

<dl class="pricebox">
    <dt>Körlektion</dt>
    <dd><abbr class="price" title="360 kronor">360kr</abbr></dd>
    <dd><abbr class="min" title="40 minutes">40 min</abbr></dd>
</dl>
<dl class="pricebox">
    <dt>Halkan</dt>
    <dd><abbr class="price" title="1700 kronor">1700kr</abbr></dd>
    <dd><abbr class="min" title="2 FrihDehBiDeUh">Riskutbildnig 2</abbr></dd>
</dl>  
<dl class="pricebox">
    <dt>Riskettan</dt>
    <dd><abbr class="price" title="500 kronor">500kr</abbr></dd>
    <dd><abbr class="min" title="1 FrihDehBiDeUh">Riskutbildning 1</abbr></dd>
</dl>

Inspired by @MaratTanalin solution

In CSS:

Replace .green, .yellow and .red by dl:nth-of-type(1) dt, dl:nth-of-type(2) dt and dl:nth-of-type(3) dt except if the choice of color depends on something else than the position of the pricebox.

Upvotes: 0

Dawson
Dawson

Reputation: 7597

They look like list items to me. Not paragraphs. Programmatically, what you have is fine. Semantically, I'd try to think of them if CSS were shut off (That's why I'd make them a list)

<ul>
    <li><h2>Header</h2></li>
    <li>Price</li>
    <li>Description</li>
</ul>

Couple of things: 1) I try to target the elements, but using ".pricelist" on the <ul> tags would be an option. 2) If I'm correct in thinking that "Header" is important, than you could use positioning on the <ul> and <li> elems to move the header to the last item for presentation, but maintain your semantics.

Upvotes: 0

Marcin
Marcin

Reputation: 49826

Well, div and p are "the same" in that they are block elements, but p has more default styling, so as between them, you will want to use div.

You might use span if you want these blocks to be treated as one line of text, which it kind of looks like you do.

Update: As noted in other answers, you could also use various list tags, and style them to be inline elements, like span. That can be nice for screen readers.

Upvotes: 2

rekire
rekire

Reputation: 47945

Try this one: http://jsfiddle.net/P4xwK/

About your question I think that does not really matter you can convert every that to that you like with display:inline and with display:block. However the order of the tags should be syntactically correct.

Except that little triangle that looks like you want.

body {
    font-family: "Myriad Pro",Myriad,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
.pricebox {
    display:inline-block;
    border: 1px solid #EEEEEE;
    border-radius: 3px;
    width: 100px;
    height: 100px;
    margin: 5px;
}

.price{
    font-size: 28px;
    font-weight:300;
    color: #383838;
    text-align:center;
}
.min {
    font-size: 11px;
    color: #909090;
    text-align:center;
}
.info {
    height: 35%;
    margin-top: 15px;
    padding-top:15px;
    color: #EEEEEE;
    font-weight: 600;
    font-size: 11px;
    text-align:center;
}
.green{background-color: #a7d155;}
.yellow{background-color: #eada42;}
.red{background-color: #e54e4b;}

This here is a trick to paint a triangle with css:

.arrow-up {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid black;
}

Upvotes: 1

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

The only things that really matter here are author convenience and fallbacks.

For convenience, you would use div or span, which have no default rendering except for being block vs. inline, so there are no default settings you need to override.

For fallbacks, i.e. for non-CSS rendering, you would probably want to use p instead of div and span instead of div, since you want the items to be rendered as paragraphs (with empty lines or pauses between them) but internally just as text.

Upvotes: 0

dmi3y
dmi3y

Reputation: 3522

Generally speaking there is no unified format, so you may use just whatever you feel better. Practically I am always trying use elements which will require less workaround. Let's say p tag will require additional margin normalization, so I would use instead divs, if you need inilne element probably better would be use span not div and so on. Just one thing which annoys me a lot it class/id names, always trying avoid somethign like size1, size2, style124 :) and use instead something that makes sense in context and will be understandable by other developers

Upvotes: 1

Marat Tanalin
Marat Tanalin

Reputation: 14123

I would use DL list for each such block and UL list to group them together semantically:

<ul>
    <li><dl>
        <dt>Körlektion</dt>
        <dd>360kr</dd>
        <dd>40 min</dd>
    </dl></li>

    <li><dl>
        <dt>Halkan</dt>
        <dd>1700kr</dd>
        <dd>Riskutbildnig 2</dd>
    </dl></li>

    <li><dl>
        <dt>Riskettan</dt>
        <dd>500kr</dd>
        <dd>Riskutbildning 1</dd>
    </dl></li>
</ul>

Upvotes: 5

Eric Goncalves
Eric Goncalves

Reputation: 5353

I would organize it like so:

<div class="pricebox">
    <ul>
        <li class="price">360kr</li>
        <li class="min">40 min</li>
        <li class="info green">Körlektion</li>
    </ul>
</div>

then style accordingly.

Upvotes: 0

Raul
Raul

Reputation: 1969

Looks like a good place to use ul and li tags. Using paragraph tags can work but is counter intuitive for UI design.

Upvotes: 2

Related Questions