Can anyone tell me what the practical difference between <div> and <p> is when you are writing CSS code?
Difference between <div> and <p>...?
Elegance. <p> tags are for displaying text, <div> tags are for placing and marking up elements.
You could indeed make a <p> tag float to the right, have a background image etc etc, but <div>s are made for that. There's no real reason aside from creating readable, logical code...
Greetz,
Arno
You could indeed make a <p> tag float to the right, have a background image etc etc, but <div>s are made for that. There's no real reason aside from creating readable, logical code...
Greetz,
Arno
Thanks for your help.
the style-sheet definition of <div> is as simple as:
whereas <p> has all sorts of other attributes like margin info and font info (as far as i know)[/code]
| Code: |
| div {display: block;} |
whereas <p> has all sorts of other attributes like margin info and font info (as far as i know)[/code]
| LukeakaDanish wrote: | ||
the style-sheet definition of <div> is as simple as:
|
even <p> is a block level element. <span> on the other hand, is an inline element.
simply put, <div> contains text and all that. <p> is the text and all that. basically.. with <div> and <span> and CSS you can do everything you want... rest all things like <b>,<p>,<i> or whatever.. is not at all necessary.. but it adds to the convinience of the coder and the reader too (if somebody wants to read ur code).
| rohan2kool wrote: |
| rest all things like <b>,<p>,<i> or whatever.. is not at all necessary.. but it adds to the convinience of the coder and the reader too (if somebody wants to read ur code). |
I personally like using <p> around my paragraphs - eventhough i dont use the preset styles for <p> - it makes the code look clean (as you say), and also makes it easy for other people to modify (most people witrh any html knowledge know what a <p> tag is...)
| LukeakaDanish wrote: | ||
the style-sheet definition of <div> is as simple as:
whereas <p> has all sorts of other attributes like margin info and font info (as far as i know)[/code] |
You can include margin and font attributes in the <div> definition
| DoctorBeaver wrote: | ||||
You can include margin and font attributes in the <div> definition |
Of course - I was just saying what style a <div> starts of with - before you apply any yourself!
div is a layer:)
DIV's are alternative to table-based layouts (bleh).
You use div's for code Your www (layout)
p, h1-6 are for text.
SPAN does nothing , you may use it if You need
It is inline obiect and if i remember... it ignores things like width or height css atributes
DIV's are alternative to table-based layouts (bleh).
You use div's for code Your www (layout)
p, h1-6 are for text.
SPAN does nothing , you may use it if You need
It is inline obiect and if i remember... it ignores things like width or height css atributes | b4r4t wrote: |
| div is a layer:) |
no. it ain't. If you mean in the terms NN4 implemented, then it is not. In those terms, this is a layer:
| Code: |
|
<div id="example" style="position: absolute; left: 10px; top: 20px"> This is a lyer as NN4 implemented it </div> |
| b4r4t wrote: |
| DIV's are alternative to table-based layouts (bleh). |
Nope. it wasn't meant to be that. It's just a division in your document, in which all content is stored. Basically that's the way most tags like <b>, <p> etc. behave and hence you can make a tableless layout even with <b> and <p> (makes it a bit sticky and unreasonable.. so it's not recommneded). This model is completely revamped in XHTML 2.0.
| b4r4t wrote: |
| You use div's for code Your www (layout) |
yep u can. as u can use <p> and even <b> for layouts.
| b4r4t wrote: |
| p, h1-6 are for text. |
Yep. right. But <p> and even <h1>-<h6> can have images in between them, and it is allowed in XHTML 1.0 Strict and Transitional.
| b4r4t wrote: |
| SPAN does nothing , you may use it if You need
It is inline obiect and if i remember... it ignores things like width or height css atributes |
precisely. It does ignore width and height attributes. Also, you cannot use <span> as 3rd level in heirarchy (i.e directly under <body>). They must be contained in a parent <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <div>, <pre>, <address>, <fieldset>, <ins>, <del>
@all: If u think me crazy for saying that u can use <b> for layouts, here's a thing:
| Code: |
|
<style type="text/css"> <!-- .b_to_div { font-weight: normal; background: #000000; color: #FFFFFF; } --> </style> <b class="b_to_div"> Now this bold element behaves like :div: </b> |
here, <b> behaves like a div. You can do whatever u want with it. Similarly, you can even change the behaviour of <p> like this. However, do note that <b>, like <span> ignores width and height too.. so it's particularly not useful, but <p> acknowledges the height and width attributes from CSS.
rohan
i know i can use b, p, h etc for layout ... but why ...
In HTML 4.0.1 i think i can even define my own obiects like <stupidword class="class"></stupidword>
then
stupidword.class {atributes}
But normaly - we use DIV's for layout and b (or STRONG ...) , h, p etc for text
I see that U're better than me ... I'm still learning
In HTML 4.0.1 i think i can even define my own obiects like <stupidword class="class"></stupidword>
then
stupidword.class {atributes}
But normaly - we use DIV's for layout and b (or STRONG ...) , h, p etc for text
I see that U're better than me ... I'm still learning
| b4r4t wrote: |
| i know i can use b, p, h etc for layout ... but why ...
In HTML 4.0.1 i think i can even define my own obiects like <stupidword class="class"></stupidword> then stupidword.class {atributes}
But normaly - we use DIV's for layout and b (or STRONG ...) , h, p etc for text
|
that ain't the point i was debating against you on. It is perfect on ur part to say that it's pointless using p,b and h etc. for layout as they were not meant for it. I was just terming that in the *practical* sense.. it all works.
and yep.. as u said <stupidworld></stupidworld> wud work too (just needs to be defined in the XHTML DTD.. lol)
as for the 'why'.. there's no answer there. The naswer is simple: don't use <p> for layouts, use <div>. No no.. i don't meant to contradict myself. What i mean is like, web standards have voted for tableless layouts, but even if you have a table layout, the XHTML validator validates it (if it's proper XHTML).. so it's allowed using tables, but not recommended.
similarly, what i meant to say in a nutshell is that, using <div> and <p> interchangeably is allowed, but not recommended.
| b4r4t wrote: |
| I see that U're better than me ... I'm still learning
|
no harsh feelings there man.. didn't mean to be rude.. sorry if i was so
regards,
rohan
| rohan2kool wrote: |
|
as for the 'why'.. there's no answer there. The naswer is simple: don't use <p> for layouts, use <div>. No no.. i don't meant to contradict myself. What i mean is like, web standards have voted for tableless layouts, but even if you have a table layout, the XHTML validator validates it (if it's proper XHTML).. so it's allowed using tables, but not recommended. |
I used bad word - not why -> what for
English Isn't my primary language
And bout table based layout ... i don't use them ... I'm using div's and float
| rohan2kool wrote: |
| here, <b> behaves like a div. You can do whatever u want with it. Similarly, you can even change the behaviour of <p> like this. However, do note that <b>, like <span> ignores width and height too.. |
Don't let that stop you...
| Code: |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>B used as DIV</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style type="text/css"> b { display: block; width: 500px; height: 400px; position: absolute; left: 40px; top: 40px; background-color: #ff0000; font-weight: normal; text-align: center; } </style> </head> <body> <b>My b-div</b> </body> </html> |
Works, and the only thing that keeps it from validating is that <b> is defined as inline in the (X)HTML recommendation, and hence can't be a child of <body>.
Nothing keeps you from turning <b> entirely into <div>-behaviour through CSS. Except common sense and good practices (and the fact that it's still defined as inline in the recommendations)
hey that's cool.. maybe i missed out something.. silly me 
neways, thanks for pointing that out. I think it's the 'display: block' that made it behave properly. maybe it's gonna be the same with span. [edit] yep it is same even with span.
neways, thanks for pointing that out. I think it's the 'display: block' that made it behave properly. maybe it's gonna be the same with span. [edit] yep it is same even with span.
Use <p> to create a paragraph of text.
Use <div>'s to group other elements and position them.
But if you want to put one paragraph of text somewhere in your page, DO NOT USE <div>!
If you want to create a menu, use <ul>, NOT <div>!
And so on.
When style sheets are enabled, this all doesn't matter too much.
But on screen readers, text browsers, braille displays, web crawlers (like Google), ... this is very important for the proper display of your page!
Use <div>'s to group other elements and position them.
But if you want to put one paragraph of text somewhere in your page, DO NOT USE <div>!
If you want to create a menu, use <ul>, NOT <div>!
And so on.
When style sheets are enabled, this all doesn't matter too much.
But on screen readers, text browsers, braille displays, web crawlers (like Google), ... this is very important for the proper display of your page!
| Stubru Freak wrote: |
| But on screen readers, text browsers, braille displays, web crawlers (like Google), ... this is very important for the proper display of your page! |
excellent point frm ur side...
| rohan2kool wrote: |
| hey that's cool.. maybe i missed out something.. silly me
neways, thanks for pointing that out. I think it's the 'display: block' that made it behave properly. maybe it's gonna be the same with span. [edit] yep it is same even with span. |
Yeah, it works for all elements - just as you can make a <div> or <li> inline (the latter being more useful - for horizontal menus). Making <img> "display: block" is also one of the useful examples.
There's also "display: inline-block" ("display: -moz-inline-box" for Mozilla-based browsers), which makes the item display inline, but allows you to set width and height (like standard <img>-behaviour). Only works for elements which are inline by default in IE6, though.
Anyway, yes, as Stubru Freak says, always use elements as they're intended, if nothing else then to make non-styled parsers (screenreaders, crawlers etc.) happy.
<h1>-<h6> (not <p> or <div> or (shudder) <font>) for headlines.
<ul>/<ol> + <li> for lists (including menus and anything else that's conceptually a list).
<table>/<tr>/<td> for actual tables.
<abbr>, <acronym> for abbreviations and acronyms (<abbr> doesn't actually do anything in IE pre-7)
<dl> + <dt>/<dd> for lists that are really definitions (this would really include FAQ's etc.)
<address> for addresses.
<p> for paragraphs - rather than two <br />'s.
<div> for content divisions.
<blockquote> for long quotations
<code> for code
etc. etc. - and style your way out of the standard display of the items, if it doesn't fit your intentions
<div> wasn't made to replace all other block elements, and it does nothing special that the others don't, other than make the markup actually tell something about the structure of the content
Even the <title> (and other elements) in the <head> element isn't special (in most browsers) - other than defining structure that's used by the browser (like, show title in caption bar).
Try doing:
| Code: |
|
head, title, style, script, meta { display: block } |
in a stylesheet and open the page in Firefox.
Bottom line: There's not really a single difference between any elements that you can't style your way around - except for their structure-defining names - which are in some cases used by the browser (there's only one element that can define a link to another page directly in HTML, for example
), and in many more cases by crawlers etc.
You can style <html> too (and you'll mostly have to, in the case of serving XHTML as XML, where <body> has no special meaning, and is displayed just like a containing <div>, not filling the browser window).
wait I though <p>*text here*</p> was html and not css?
| b4r4t wrote: |
| SPAN does nothing , you may use it if You need It is inline obiect and if i remember... it ignores things like width or height css atributes |
span is best to replace <font> so you could make like different font/size/color/bold/etc. font. It's inline but it doesn't do nothing.
One of the W3Cs requirements is that your (X)HTML is semantic and well-formed.
This means that you use elements logically. <div> to group things together that go together. <p>for paragraph. <ul>and<li> for items in a list.
Even if something else would do from a layout perspective.
A well formed document doesn't just look good on the page. It makes sense when you look at the code.
Developing the habit of writing well formed (X)HTML actually takes care of a lot of problems with alignement and cross-browser 'incompatibility'. So, even though it takes a little getting used to, it is worthwhile!
This means that you use elements logically. <div> to group things together that go together. <p>for paragraph. <ul>and<li> for items in a list.
Even if something else would do from a layout perspective.
A well formed document doesn't just look good on the page. It makes sense when you look at the code.
Developing the habit of writing well formed (X)HTML actually takes care of a lot of problems with alignement and cross-browser 'incompatibility'. So, even though it takes a little getting used to, it is worthwhile!
Just to add something :
div is the only block element with no semantic (an span is the only inline element with no semantic).
Whereas p is a block element with semantic ("this is a paragraph"), and which cannot have block children.
div is the only block element with no semantic (an span is the only inline element with no semantic).
Whereas p is a block element with semantic ("this is a paragraph"), and which cannot have block children.
As far as CSS is concerned , P and DIV are the same .
Both can be made to behave the same , when CSS is used .
But when PURE HTML is concerned , P tag is for text , concerned with holding of paragraphs . Just loads of text .
Div , is a division tag , that can hold anything between them , to close as a group inside them .
Both can be made to behave the same , when CSS is used .
But when PURE HTML is concerned , P tag is for text , concerned with holding of paragraphs . Just loads of text .
Div , is a division tag , that can hold anything between them , to close as a group inside them .
Is there any tutorial sites which is about CSS codes ?
Any help ?
Any help ?
| alkutob wrote: |
| Is there any tutorial sites which is about CSS codes ?
Any help ? |
http://www.google.pl/search?hl=pl&q=css+tutorials&lr=
Search ...
You can compare html-tags with clothes:
While <p>, <h*>, <ul> etc. is especially meant for paragraphs, headings, unordered lists etc, div is just a box (yes you can style it like you want it, but it is still not <p>, <h*> or <ul>.
Likewise; a hat is for the head, socks are for the feet. A box is a box (div). You can stand in the box and say; "hey! Look at my cool shoes! But both you and I know; it is not shoes. You can draw laces on it - still not a shoe! You can put your socks on your hands; "Look at my gloves!". No! It is still socks, and they are ment for your feet!
While <p>, <h*>, <ul> etc. is especially meant for paragraphs, headings, unordered lists etc, div is just a box (yes you can style it like you want it, but it is still not <p>, <h*> or <ul>.
Likewise; a hat is for the head, socks are for the feet. A box is a box (div). You can stand in the box and say; "hey! Look at my cool shoes! But both you and I know; it is not shoes. You can draw laces on it - still not a shoe! You can put your socks on your hands; "Look at my gloves!". No! It is still socks, and they are ment for your feet!
The diffrence is that <p> has set padding or margin by default. <Div> has nothing set.
Using powerful CSS you can do bassically everything using any HTML tag. You can make <table> from <b> and <p> from <div> both way around and such similar things.
But it's good to look at standards made by W3C organisation or others, so i.e. use <div> for layers, <p> for text formating, and <hx> for headers.
Using powerful CSS you can do bassically everything using any HTML tag. You can make <table> from <b> and <p> from <div> both way around and such similar things.
But it's good to look at standards made by W3C organisation or others, so i.e. use <div> for layers, <p> for text formating, and <hx> for headers.
Both the P(paragraph) element and DIV(divider) element are block-level elements.
However <P> isn't allowed to contain block-level elements, only inline -- unlike <DIV> 's.
However <P> isn't allowed to contain block-level elements, only inline -- unlike <DIV> 's.
do DIV & TABLE tags are similar except well DIV has no borders,no rows & no columns?
fadirocks, please read the thread...
Related topics
 |