To P or not to P

@SuzanneBAug 21.2004

On the process of formatting, I was reading a book in which it stated that one of the great reasons for CSS was to get rid of tags like <p> and allow full control over formatting. In the subsequent example, all the formatting was achieved using styles applied to div’s. No p tags were used at all.

I am curious about this though, because no web site I have seen exclusively uses the div instead of the p? Do people just use the p because they are used to it? Or because it is convenient? Or is it just it is available – so it is handy to use it?

to post a comment

CSS

18 Comments(s) _↴

@CharlesAug 21.2004 — #Words, words, words - if you have a bunch of words strung together into sentences. And those sentences strung together into paragraphs then you need those paragraphs marked with P elements. In the same way headings need to be marked with the H elements.

Those people who suggest just DIVs and SPANs forget, or would like to forget, that there are people out there quite a bit different from themselves. Some are using lightweight browsers that do not understand CSS. Some are using Braille or audio browsers. Web pages need to make sense without their style sheets.

@SuzanneBauthorAug 21.2004 — #So it's okay not to use them then.

?????

( Snce NONE of the sites I work on would make any sense at all without the style sheet.)

@fredmvAug 21.2004 — #[i]Originally posted by SuzanneB [/i]

[B]NONE of the sites I work on would make any sense at all without the style sheet.[/B][/QUOTE]And that's certainly not something to take pride in. Read Charles' post again and consider fixing your mistakes.

@pawkyAug 22.2004 — #SuzanneB, u want your site to be able to be read even if the css was not there. Sure it will look very plain but it will still be able to be read and understood. You will want to take a look into this w/ your site to see how it looks w/o and the css.

@davidbrentAug 22.2004 — #As Charles said, in not so many words that page formatting can be crucial. You need to consider the minus stylesheet view. To organise a page in all situations regardless of browsers and stlyes is the best way to creating a web page.

Just because you have formatted the divs to break content into the relevant paragraphs and forms doesn't mean theres not point refining the x/html.

Of course you can format P tags and span tags!

Best Wishes,

David

@rhsundergroundAug 22.2004 — #i recommend (for this issue) downloading opera. it has a feature called "author view" which disables the stylesheet.

@David_HarrisonAug 22.2004 — #Use semantic markup where ever possible. What does that mean? It means that even though you could just use a <div> tag for everything, you shouldn't.

You need to build up a basic page structure with your XHTML, that means breaking the page up into paragraphs and lists etc. Take a look at [url=http://www.quiterude.com/]quiterude.com[/url]. There are only four <div> tags on the index page, that's because I have tried to cut out as much uneccesary markup as possible.

Also check out [url=http://www.fsg-uk.com/rjsystems/]RJSystems[/url], There are only four <div> tags on any one page, and they are only there to aid with the construction of the layout.

Basically, when you find yourself using a meaningless tag like a <div> or a <span>, just think, is there a better, more suitable tag that you could be using.

In some respects, a totally <div> layout is worse that a totally <table> layout.

@JonaAug 22.2004 — #[i]Originally posted by rhsunderground [/i]

[B]i recommend (for this issue) downloading opera. it has a feature called "author view" which disables the stylesheet. [/B][/QUOTE]

[font=trebuchet ms]Firefox has a [url=http://update.mozilla.org/extensions/moreinfo.php?application=firefox&id=60&vid=63]Web Developer Toolbar[/url] extension, which you can use to disable cookies, JavaScript, Java, CSS, images, page colors, referrer logging, and image animations within two clicks [i]or[/i] with keystrokes.[/font] ?

@pawkyAug 22.2004 — #[i]Originally posted by Jona [/i]

[B][font=trebuchet ms]Firefox has a [url=http://update.mozilla.org/extensions/moreinfo.php?application=firefox&id=60&vid=63]Web Developer Toolbar[/url] extension, which you can use to disable cookies, JavaScript, Java, CSS, images, page colors, referrer logging, and image animations within two clicks [i]or[/i] with keystrokes.[/font] ? [/B][/QUOTE]

awesome, thx i could definitely use that ? thx jona

@johndoe190Aug 22.2004 — #Does anyone know if that web dev toolbar works with firefox 0.9 as didnt all of the plugins and skins stop working.

@FangAug 22.2004 — #Works perfectly for me.

@VladdyAug 22.2004 — #[i]Originally posted by SuzanneB [/i]

[B] To P or not to P <snip/>[/B][/QUOTE]
? ? ? ... when you gotta go, you gotta go ... ? ? ?

@Stephen_PhilbinAug 22.2004 — #[i]Originally posted by SuzanneB [/i]

[B]On the process of formatting, I was reading a book in which it stated that one of the great reasons for CSS was to get rid of tags like <p> and allow full control over formatting.[/B][/QUOTE]

I'm betting this is not true. I think it's more likely that it said the idea was to remove the need for <font> tags and ya just got it mixed up in yer memory. Either ya just got it muddled in yer memory or the article ya read is totally wrong.

One of the many purposes behind CSS is to remove the need for presentational markup (such as <font>) and re-enforce the use of semantic and structural markup (such as <p>).

A <div>s should most certainly vever be used to replace <p>s. I find one of the beauties of using semantic mark up is that even without the slightest whiff of css being implemented into a page, it's already got half of its layout built for ya. All you have to do after that is just link in yer css to make yer already well defined elements their desired shape (which in many cases will eliminate anlmost any need for positioning any way because everything will likely fall nicely into place after that) and then make it look how ya want.

I find thinking about positioning less actually helps to position things better anyway. You should try it. Just mark up your page semantically without even making any css at all. Then after that, give the elements the size and shape they want. THEN after you have done these first two steps, IF anything still needs to be positioned (which a few things probably will, but not nearly as much as you might think.) then try floating yer elements into place. If things still aren't stiing right after that (which I find is rarely the case), then use position:relative; or position:absolute;.

Positioning used to drive me crazy when I started out with css simply because I was thinking about it too much and trying to position everything whilst I was creating the mark up. I've also seen quite a few pages where loads of elements are given an absolute position, when no positioning was actually needed at all. CSS is your friend, there to make you life much more simple and easy. Don't try and wrestle your elements into position and your elements, CSS and yourself will all get along that much better. ?

@JonaAug 22.2004 — #[i]Originally posted by Vladdy [/i]

[B]:D :D :D ... when you gotta go, you gotta go ... :D :D :D [/B][/QUOTE]

[font=trebuchet ms]Ah, the comedian helper, not pleaser... ? [/font]

[i]Originally posted by Sharkey[/i]

[b]Does anyone know if that web dev toolbar works with firefox 0.9 as didnt all of the plugins and skins stop working.[/b][/quote]

[font=trebuchet ms]Should work with every version from Firebird 0.7 and up...[/font]

@davidbrentAug 22.2004 — #WebDevExtSvdMyLfe

@ray326Aug 23.2004 — #
I was reading a book in which it stated that one of the great reasons for CSS was to get rid of tags like <p> and allow full control over formatting. In the subsequent example, all the formatting was achieved using styles applied to div's. No p tags were used at all.[/quote]
Time to throw a book away, Suzanne. A paragraph is a paragraph. There is no structural alternative. A book that has something like that in it cannot be trusted for any of its other content. Maybe you should hit Zeldman's site and pick up the new Castro book he's recommending.

@David_HarrisonAug 23.2004 — #Well since you don't seem to be a complete beginner, I'd recommend a different Castro book, [i]Elizabeth Castro's HTML for the Worlld Wide Web with XHTML and CSS[/i].

I learned HTML wrong the first time around (you wouldn't believe the tables :eek: ) and that book re-taught it me the correct way.

@ray326Aug 23.2004 — #Glad to hear she has another good one.

Also in #CSS _↴

I am really sorry but i need help with this script i ask before !column break P Margin not being recognised

Success!

Help @SuzanneB spread the word by sharing this article on Twitter...

Tweet This

To P or not to P

18 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

To P or not to P

18 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

18 Comments(s) _↴

Also in #CSS _↴