I have a box I am creating using a < div >
Is it acceptable to drop text inside the div, or must it be wrapped in a < p > or < span > or whatever?
(The text is some simple thing like, “We save you time!”)
<p>We save you time!</p>
No need for the div.
1 Like
There is a need. The div is my box!
Make the <p> your box.
That assumes I always have a < p >
Boxes can have different content, and it is not always text, so defaulting to a < p > as my box would be wrong in this case.
To be a purist, I assume you should always wrap text in a < p > or the like.
So I guess < div > < p > is the safest way to go.
Just trying to clean up my code today. 
Hold on a minute…
What do you mean to say by " We save you time"? That MEANING is what truly determine what tag you use. Let us consider some possibilities:
Lets say the section or page is SPECIFICALLY about who/why/etc you save someone time, then you may want to use a Hx tag.
<h2> We save you time!</h2>
<p>... some stuff about time saving... of sorts.</p>
If you have a list of things you save ( or do , or whatever) then you need a UL/LI combo, or OL/LI if you have a specific order to the list
<ul><li>We save you money</li> <li>We save you grief</li> <li>We save you time</li> </ul>
If you have specific explanations as to HOW the time is saved, then maybe using a DL is in order:
<dl>
<dt> We Save you time</dt>
<dd> Because we are so awesome </dd>
<dd> We are masters of temporal economy</dd>
<dd> Time savings of 33% per hr</dd>
<dl>
You can also use a DIV as suggested, but all that means is : “this text has no semantic significance; it’s purely decorative” Which is OK, when used sparingly… but if you merely use it because you can’t decide what you are meaning to say or because “the sentence is short” then you are heading down the slippery slope of DIVITIS and unsematic markup.
2 Likes
Thumped by @dresden_phoenix!! 
The website I am working on has boxes (~200x200px) that have short advertising/catch-phrases in them (e.g. “We save you $$$”, “Call for a Free Estimate”, “We save you time”, “ASE Certified”)
I see these as more than decorative, because the call out to people and tell them what the owner offers. (Almost like merit badges in Cub Scouts!!) 
If the owner doesn’t pull the plug on me this week, ultimately I would like to link some of these to articles, but for now each is free-standing.
I don’t think using headings makes sense, since I have enough levels as it is.
Each of these “blips” isn’t a paragraph, but < p > seems to be the closest semantically that I can think of. And to your DIVITIS comment, why do you think I pushed back to Paul and Ryan above?
Think of each box as module… (BTW, designing fixed size site…ie.:200px x200… might pain you in a corner later). If your module only has a heading for now, than thats ok… it still saying the thing it needs to say in the WAY it needs to be said.
but if all you have is a ‘series’ of these ‘blips’ then what you have on your hand is a LIST.
It often helps me is to (temporarily) CLEAR my mind of how am planning to style my content and write the mark up as an outline. In this way you can focus more on the relative meaning/importance of each block of text.
I am adding these boxes to the right left margin as useful message fillers.
(The tilde was meant to imply 200px fixed width by 200px expanding.)
My right and left columns don’t have a heading and are just like a newspaper with extra info.
I might by that as far as semantics. Although when I have disparate things like a Google Map, Featured Article, and a Merit Badge then maybe not so much so.
True.
So if having a box div and then a < p > so horrible if I didn’t go with the list idea?
My problem with a list is that it might be imposing order on things which do not necessarily belong together…
As Dresden implies above it’s the content that determines the mark up so should never really design mark up first and then try to massage your content into it.
They they most likely need different tags based on what the content is. It really is as straight forward as that.
Obviously sometimes you have to add extra tags to make things more modular but they should not detract from the semantics of the page. An extra p tag inside a div is no great shame but having phrase content not inside the appropriate container is not semantically correct.
1 Like
So what would these snippets of text be semantically? I think of <p> (paragraph) as being for body text, they are not <h#>. How about <aside>?
This topic seem to be an off-shoot/continuation of this one:
(I thought it might help the discussion if participants had the background.)
The p element is for ‘phrase’ content which could be a couple of words to a whole paragraph but that doesn’t mean that all text is suitable for the p element as the text could be a heading, a list, a dl etc… It all depends on context.
Aside would determine that the block is secondary content but you would still need the appropriate tags inside that aside to mark up the content. (This is one of the tags that html5 invented to mimic the use of .sidebar but then redefined it into something that nobody wanted and then changed their mind and redefined it again!).
Are you sure about that? Phrase would describe what he’s putting in the boxes, but I’m sure p stands for paragraph.
Me too… 
I meant to say the p element is for containing phrase content.
Permitted contents #
Phrasing content
The p element is of course a paragraph element but that doesn’t preclude it from holding short bursts of text (phrase content).
I misunderstood, I thought you were correcting me, saying that <p> stands for Phrase, not Paragraph.
No sorry, I wasn’t very clear 
Most people thing that a paragraph is a collection of sentences but it doesn’t have to be. It can be a short phrase.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.