Hey guys sorry this might sound stupid but when i learned HTML i used <p> tags never saw a <div> tag no one told me what it was i search the and no one has a good answer is it for SEO? So can someone please tell me what the <div> tag is used for i also saw <div id="header"> does that mean it has more value.
A div tag defines a division or section of a page. Div tags can be positioned as an object on the page. The id = is one of the properties of the div tag. It allows your code to locate a specific div tag when you have more than one. Div tags can be used for formatting (in place of tables). Div tags can be used around an area on the page in ASP or PHP to hide/unhide it etc....
As far as I know, it won't have much of an effect on SEO except: 1) If you use a hidden div tag to populate content that the SE will see but not visitors your site might get penalized or banned. 2) Div tags can be easier for SEs to read your content in the right order (if done properly) than a table based layout (especially if you use nested tables). That's not to say never use tables. Beyond that, I don't know of anything else. Anybody else have thoughts on this? Here's some: http://forums.digitalpoint.com/showthread.php?t=391129
divs are used for controlling page layout. You should look in to learning CSS. Theres plenty of sites that will teach you from the ground up.
As already mentioned, divs are used to divide a page up into the relevant sections and therefore to control layout. I would disagree that they help search engines to read content as they can be miss used in exactly the same way tables were and therefore be just as good or bad - like anything, it has a purpose but if not used correctly causes problems. Whilst someone mentioned asp and divs that was the case with classic asp but with .Net you would normally use a <asp: panel> control instead but these render into a html <div> tag
As AstarothS implied - the problem is almost any tag can be misused - but I'm seeing a LOT of posts here that say things about both <p> and <div> that actually apply to BOTH - like Bluegrass Special's comment about being positioned as an object - you can do that with ANY tag, not just DIV's - this is the thinking that leads to extra pointless wrappers and classes that serve no purpose. (you see this with UL based menus all the bloody time!) DIVs are just generic meaningless 'block level' containers - best used for grouping semantic tags just as a SPAN is a generic 'inline level' container... and remember, while the default behavior for inline-level and block-level match display:block and display:inline respectively, they are NOT the same thing - no putting block level elements inside inline ones!!! Paragraphs exist to mark PARAGRAPHS. Ask yourself "Is this a paragraph?" - if the answer is no, using a <p> is probably WRONG. (I don't care what some SEO zealot that never bothered to TEST any of this stuff tries to tell you - I swear something's in their kool aid these days... Maybe it's MJ's Jesus Juice) I use DIV's in the following conditions: 1) To group other semantic tags so I can use one class to style them all sensibly. 2) for short phrases or sentences that are NOT enough to be considered a paragraph IF they are not part of document flow and IF they should have a different styling. 3) to apply a presentational element or styling that has no actual 'meaning' in the content. example: <div class="drop_shadow"> <div class="news_item"> <h2>Today Sucks!!! <span>7/31/2007</span></h2> <img src="images/news_generic.png" alt="" class="news_icon" /> <p> Yes, that's right, today officially sucks. One could say that is nothing new really, but I found it particularly significant and worthy of a post. </p><p> As to why it sucks, well... I'll leave that for you to decide. <em>Quando omni flunkus moritati.</em> </p><p> - Jason M. Knight (aka deathshadow) </p> </div> </div> Code (markup): .drop_shadow is a flat colored background .news_item is the actual 'content box', I'd use position:relative and a negative top and negative left position to 'slide' the content away from the dropshadow - making the dropshadow. H2 for the header with a span to position or style the date as needed paragraphs for... you guessed it, the actual PARAGRAPHS (The horrors!!!) - that last paragraph does NOT qualify as an actual paragraph per se, but it's part of document flow, and would not be styled different - so it's ok.... Very simple, very quick, very minimalist (all things considered) and EXACTLY what is meant when people say 'use semantic markup'. (well, except the one extra container, but being a div has no meaning - who cares) - no wasted classes either... If you were 100% certain you weren't going to be using any other images, you could even lose that class on the img. When using ANY tag, ask yourself 1) is there a tag who's meaning matches this content. If so, use that tag, if not, use a generic (DIV or Span) 2) do I NEED this extra tag to make the presentation or apply my class/id, or can I apply it to the tag inside it. WAY TOO OFTEN you see people wrapping single UL's or a table in a DIV to apply a class when that extra DIV is applying NO STYLING THAT COULD NOT BE APPLIED DIRECTLY TO THE INNER TAG ITSELF. This is kin to using a table for a single TD or single column, which is also a total /FAIL/ (unless using vertical positioning) 3) does this tag need a class, or can I style it and it's kin off the parent container. Too often you see: <ul> <li class="linkitem">Link #1</li> <li class="linkitem">Link #2</li> <li class="linkitem">Link #3</li> </ul> Code (markup): Which is utterly silly since this could have the same functionality in less code: <ul class="linklist"> <li>Link #1</li> <li>Link #2</li> <li>Link #3</li> </ul> Code (markup): You follow those guidelines, you'll end up with cleaner, clearer, smaller code. Basically, if you don't know what's wrong with this: <div class="my_header"><p class="header_title" style="float:left;"><b>Today sucks!!!</b></p><p class="date" style="float:right;"><b><font color="red">7/31/2007</font></b></p></div> Do the world a favor and back away from the keyboard now. (I wish that last example was fiction - but I've seen it done... I see that nonsense in live code, I feel like taking a brick upside someone's head)
Well, that gets into the difference between a block level element and a inline level one. Block level elements 'by default' are display:block - they also can contain almost any other tag regardless type (with a few exceptions like TD, TR, LI when not also wrapping a table or UL)... display:block means it's a block - by default it will fill the available width. This means it also can function as a carriage return/linefeed on content. For example: <div>test</div><div>test</div> would render test test A span is a inline level element, so it's default state is display:inline. Inline level elements are NOT supposed to contain anything but other inline level elements (with a few exceptions like 'replaced' elements like img and the various oddball inlines like inline-table, inline-block, run-in, etc) The difference between a display:inline and display:block is readily apparant: <span>test</span><span>test</span> which would render testtest You can override the behavior of either type - but the rules for which can go inside which remain. For example: <span><p>Test content</p></span> is invalid HTML, <p> is a block level element, it cannot (well, should not) go inside a SPAN. Spans are a good way to apply styling that you don't want to disrupt flow, that other semantic tags like EM and STRONG might not be appropriate for - especially in the case of people viewing your page WITHOUT CSS. Search engine sees a block level element it assumes this is a new section of code - that's what block level 'means' semantically... Span being a inline element is ignored - but both can be used to apply visual styling. For example, let's say you have text that on mouseover is going to show an image. CSS off you want the text to appear, css on you only want it to show up when the mouse goes over it. <p>This is a sample text section that has a <span class="mouseover">Mouseover Section <img src="images/test.png" alt="" /></span> which only shows the image when you put the mouse over the span.<p> You would then use the css :hover state (probably with a .htc to support IE6/earlier) to make the image show/hide itself. .mouseover { position:relative; } .mouseover img { display:none; position:absolute; top:1.2em; /* same as line-height */ } .mouseover:hover img { display:block; } Quick, simple and it should (should) work. In reality there are issues cross-browser that would take a LOT more CSS to function - Opera having issues with relative/absolute on inline elements, IE well, just being IE... Still in FF the above code makes a halfway decent example of a good time to use a span. Is it a hyperlink? No... is it something you might reference as an anchor in the URL? No... so that shouldn't be an anchor (which is what most people would try to use there) Another use would be if making a page that has search results in it. Let's say you searched for the word test: <p> A search for the word <span class="search_result">test</span> would likely want to show the resulting word with a different background color and text... Since you might be using all four other inline 'styling' tags (B, I, EM, STRONG) or don't know what your <span class="search_result">test</span> page would be using for HTML, interjecting a SPAN with a class on it ensures compatability AND does not put an extra semantic meaning on a word that should not actually have one. </p> Code (markup): Bottom line - DIV's are best used for grouping any type of tag together or for any 'block level' styling, while SPAN's are best used on a limited basis to mark up a few words without breaking flow. Though some advanced image replacement techniques can make some really 'abusive' use of SPAN... mostly because SOME block level elements (or close relatives to them) like header tags (H1, H2) do not allow block level elements inside them.
According to the W3C the div tag is special in that it can contain both block and inline elements. My point about the positioning had more to do with the fact that the div tag is the only block element, besides pre, that doesn't alter the content that is placed in it (the p tag essentially wraps the content in br tags, h tags change the font size, blockquote indents the text, etc...). But deathshadow is correct that you can position any tag. As for not using div tags in ASP.Net, I work in an all ASP.Net shop and we use the div tag much more frequently than the asp: panel tag. I don't know why, we just do. As for helping the SEs read content, that comment was directly regarding using tables (and particularly nested tables) for layout purposes. This is my reasoning (and I admit I have no specific evidence of this): I am postulating that SEs render pages in the same way as a browser. If that is indeed the case, there could be a situation where one has a keyword phrase that is split across two cells in separate tables. To a person, after the page loads, the phrase can clearly be seen. To a browser, and thus the SEs if they render pages the same way and read content in the order that it is loaded, the words that make up the phrase would be seen, but the entire phrase may not be picked up because nested tables don't render in the order that the content is coded. Div tags, however, would be picked up in the order they appear in the code. Thus, if you used div tags with positioning and coded them in the same order you would want people to read them, then the SE would pick up the phrase. Granted, I made some assumptions with that idea, and it would only affect a small portion of sites. Also granted, as Astaroth said, both tables and divs can be used incorrectly. I'm just saying that in some cases you might get better results with divs as opposed to nested layout tables. I mostly code sites that do not need SEO as they are web based programs for a specific audience rather than websites for the public. So I'm just starting to pick up on SEO for my personal sites.
Huh? The content is not altered?!? Do you mean the presentation of the content? Huh? Huh? <p> is functionaly identical to a DIV, it just happens to start out with a default margin around it top/bottom... (which goes away if you null your margins with the universal selector) Presentational, Default behavior, can be overridden at any time. again default behavior.... again can be overridden via CSS at any time. I'm really not quite following what you mean by the above. Closer to your final output - why use a tag that doesn't exist in HTML when you can use one that does Best way to think of it an analyze your content for how a search engine sees it is to completely delete all inline presentation (which you probably shouldn't have in the first place) then turn CSS and javascript off. Ooh, now that's a BAD idea. There is no reason one should ever split content between cells - that's what a rowspan is for. As long as you can get your source in the order you want the search engine to see, and don't split content between separate table cells (which I can't ever imagine doing) there really should be no difference.
So here's another stupid question (but even fools can learn): You wouldn't normally stick a div around a table... but let's say you have a whole page with various content and in the middle of the page you have a little table. You want the table to be page-centered. You search teh Internets and teh Googles and you find why margin-left:auto; margin-right:auto; is working great in FF and Opera and Safari but not in IE. You find someone saying "put text-align:center" in the body (in the <style> area, not the <body> body), but that affects the whole page. (Isn't align:center deprecated?) Would one then put a div around a table in order to center only the table for IE?
Because it isnt a tag but a .Net control which is rendered into a <div> tag. As to which to use? A asp: Panel is a control and so adds load onto the server to render it. For pure layout elements then we would certainly also use a standard <div> tag as what you can do with .skin files with Panels is no different to what can be done with CSS - obviously with more complex controls like gridviews then .skin is much quicker as you set the skin once in the control rather than having to set a CSS class for each of the different elements If you are dynamically changing the Div with .Net then this naturally lends itself to using a Panel
No, then you add a valid doctype with no XML declaration, taking IE out of quirksmode - end of problem because then margin:auto works just FINE on the table element when not in quirks mode. Something one should probably do in the first bloody place and avoid 95%+ of the need to hack IE.
... and people wonder why .asp crapplets are bloated, slow, non-semantic and overburdened with excess classes, ID's and containers.
Slow? a little odd given that all benchmarking I have ever seen shows .Net to be the quickest of serversides (namely because it is precompiled) Any allegation of excess containers or classes is down to poor coding not the framework itself - the statement is same as saying that tables are rubbish because people used to nest them to create layout