No, I'm not that much of a zealot.Originally Posted by peach
Although I think 4 empty divs is equally bad as 4 wrapping divs.
| SitePoint Sponsor |
No, I'm not that much of a zealot.
Although I think 4 empty divs is equally bad as 4 wrapping divs.
Birnam wood is come to Dunsinane
"Consistency is the Hobgoblin of Little Minds..." - Ralph Waldo Emerson
I just love when people get worked up about this stuff... always a good for a morning laugh! D)
IE automatically hides empty <td> cells as 'normal' browsers do not hide them. If you want to show empty cells in IE, it is then people usually use .
For browsers other than IE you can do this to hide empty cells:
empty-cells: hide;
IE of course will not read this declaration.
Also, browsers other than IE automatically have a default setting of empty-cells: show;
And as computers have exceeding Little minds indeed, we need to be consistent when we tell them what to do.
The difficulty of working with computers is just exactly that it is so hard for humans to think down to their level. If you are unwilling to do that then working with computers is not for you...
Ed Seedhouse
I think wrapping anything inside is a div is not semantic, but more often than not it's necessary.
#news is not semantic in its nature because it has no structural value. Personally, I feel it would be more semantic to do the below. However, the below has positioning limitations.Code:<div id="events"> <h3></h3> <p></p> </div> <div id="news"> <h3></h3> <p></p> </div>
I think creating a relationship through class names is more semantic and results in less mark-up. However, the reality is that this approach is most times not practical when it comes to floating groups of information.Code:<h3 class="events"></h3> <p class="events"></p> <h3 class="news"></h3> <p class="news"></p>
Nesting tags inside one another hold little contextual value in themselves so all markup is really not semantic if you think about it. We nest tags to group related information in order to style it. Really, those group are not needed from a contextual standpoint, therefore, I feel they are not semantic. However, they its necessary given the technology.
Divisions usually save the 'developer' from the redundant class name 'use' as well as being 'used' structurally as a container for the block of code.
I think the 'correct' naming convention gives them a 'semantic' purpose, or at least helps the 'developer' almost in a sense 'index' chunks of related information.
Code:<div id="current-events"> <h2>Current Events</h2> <div id="news"> <h3>News</h3> <p>...</p> </div> <div id="events"> <h3>Events</h3> <p>...</p> </div> </div>
Yesh, so was mine : ) I just happen to know you're an Opera fan.
I just hate smilies for some reason. : ) is ok. Maybe too old-school?
The only type of use of the div element that is correct is #header #main #footer etc.
Would you care to add a motivation for that rather strong and surprising statement?
A div is any sort of 'division' of a page: a group of elements that constitute a unit that is separate from other units. That's all.
Birnam wood is come to Dunsinane
#header and #footer are visual therefore, they aren't semantic either. The #main is really the body tag talking semantics. Every wrapping div placed on a page is not semantic because the information within can exists without it. Proximity plays a larger role in grouping related information than wrapping elements do. Wrapping elements serve no contextual purpose to the viewer. The viewer groups related information through proximity rather than whether the element is contained in another element. The only purpose wraps serve are to make life easier isolating multiple elements. They aren't semantic in the least. However, they are necessary.
I disagree. A header is something that comes before something else (e.g. HTTP headers), while a footer is something that comes after something else. There's a strong coupling to visual presentation – you rarely see a header anywhere else than at the top of the document – but that doesn't mean they're not semantic.
No, the body element comprises all the visible content of the document: header, footer, sidebars, advertisements, articles, images, …
#main indicates the main part of the content (probably excluding header, footer, sidebars, advertising, etc.)
A div that wraps around a group of other elements is semantic, because it indicates that those elements belong together in a stronger way than they belong to other parts of the document.
Okay. How does the following indicate that B and C are a structural unit, i.e., have a closer association than A and B or C and D?
Compare to this:Code:<p>A</p> <p>B</p> <p>C</p> <p>D</p>
Code:<p>A</p> <div> <p>B</p> <p>C</p> </div> <p>D</p>You seem to be confusing structure and semantics with presentation.
Birnam wood is come to Dunsinane
Not that I think Tommy needs any help, but...
So what is the structure of your document? The basic tags of the webpage implement the content, but you have no larger structure at that point, zero; divs give a page semantic meaning and structure in a larger sense. I agree with everything Tommy said about #main, #header, and #footer. Just because these powerful abstract concepts have equally powerful presentation benefits for UI design in no way diminishes their semantic importance.
Further you've poo-pooed using any other div on the page which is where they are much more clearly semantic. My webpage has a series of nested lists. This structure has no semantic meaning until I wrap it in this div
That's the essence of why divs are necessary this structure has no semantic meaning without it. Moreover, the div groups the lists; it forms a clearly modular unit of code. I can move it from the header to the footer to anyplace else on the page and it is still clearly the navbar no matter how it is or is not styled.Code:<div id="navbar"> --- nested lists --- </div>
I think this is completely backwards. It's not just that you can't use CSS on this structure. You've destroyed the modularity of your code. You can no longer decide a particular paragraph is in the wrong section an move it. This also attaches larger semantic value directly to the HTML element, divs group semanticly related content. You can see the difference if you swap the paragraphs...
This result is absurd. That's why you use divs.Code:<h3 class="events">Events</h3> <p class="news"></p> <h3 class="news">News</h3> <p class="events"></p>
Whatever you can do or dream you can, begin it.
Boldness has genius, power and magic in it. Begin it now.
Chroniclemaster1, Founder of Earth Chronicle
A Growing History of our Planet, by our Planet, for our Planet.
If you where all like me, You'd be a designer that doesn't know how to code =D.. So I pretty much only use divs and really, really, really basic coding.. Heres a little peice of my page.
If you guys ever want to code my designs for me thatd be cool! Lol...Code:<div id="apDiv4"> <p align="center" class="style1">We currently have 120 member on the forums<br> 119 registered users & 21 guests<br> </p> <p align="center"><span class="style1">You are not logged in,</span> <span class="style4">Please log in!</span></p> </div> <div class="style2" id="apDiv5"> <div align="center">Please enter your E-mail address to recieve weekly updates and news on Inked-Pixels.</div> </div> <div id="apDiv6"> <div align="left" class="style1">"Where on this site can I access the templates to view them?"</div> </div> <div class="style1" id="apDiv7"> <div align="left">"I'm aware on where to find the free templates but where are the premium?"</div> </div> <div id="apDiv8"> <div align="left">Advertisement Piece</div> </div>
@jburridge - Read this article:
http://www.stuffandnonsense.co.uk/ar..._name_pt2.html
Sure. with my list I tried to explain that divs are used for structural elements. This is clearly stated in w3 standards and technical documents, which Im sure you know so I'm surprised you're surprised.
I disagree that the div element is "any" sort of division because that statement would justify the abuse that this element takes (we've all seen divilitis). Defining the div so broadly would justify wrapping it around any pack of elements in your webpage, but w3 states as follows:
So the purpose is to give structure to documents. Still a definition that is open to interpretation but what I derive from it is that div is used for the parts of your website that form the basic building block of the page, giving it structure.The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents
In practice that means for me that I will want to use div tags only for #header, #main, #navbar, and maybe .sidebar.
Divving a group of content such as for example 3 blocks with 4 text links, I think would only be ok only if these links are unrelated to the #main content or other structural parts of the site.
If these links would be strongly related to the main content I would just add them in the #main div and give more subtle semantic meaning through shared classnames of the ul elements.
Thats my interpretation anyways, Im sure there are many coders who know the standards better than me and Im open to new ideas.
I'm going to agree to disagree.
I don't think this absurd because the implied relationship is kept even when one element is not in close proximity to another.Code:<h3 class="news">News</h3> <p class="news"></p> <h3 class="events">Events</h3> <p class="events"></p>
Implied relationship is semantically maintained, but the presentational relationship is broken.Code:<h3 class="events">Events</h3> <p class="news"></p> <h3 class="news">News</h3> <p class="events"></p>
The presentational relationship is not what the structure is concerned with though so changing the proximity shouldn't matter in theory. Furthermore, one less div to worry about.
There is the needless use of divisions. A unordered list is equally as semantic as a div for this. If you were to use a div you would introducing a presentational element in my opinion because an unordered list can exists independently of the div.Further you've poo-pooed using any other div on the page which is where they are much more clearly semantic. My webpage has a series of nested lists. This structure has no semantic meaning until I wrap it in this div
Code:<ul id="navbar"> <!-- list item --> </ul>
AutisticCuckoo wrote
Positioning relates to presentation.I disagree. A header is something that comes before something else (e.g. HTTP headers), while a footer is something that comes after something else.
AutisticCuckoo wrote
Main content is quit subjective. The concrete content is actually the entire page.No, the body element comprises all the visible content of the document: header, footer, sidebars, advertisements, articles, images, …
#main indicates the main part of the content (probably excluding header, footer, sidebars, advertising, etc.)
AutisticCuckoo wrote
I’ll agree with you there, but its subjective. Using your logic everything can be wrapped in a div and its perfectly fine. However, as we all know this isn’t the case.A div that wraps around a group of other elements is semantic, because it indicates that those elements belong together in a stronger way than they belong to other parts of the document.
You can't define something as being unacceptable when its acceptable. If your going to say that wrapping things inside divisions is acceptable than it can't be unacceptable. As for the depth, that is subjective. Multiple divisions wrapped inside each other are essentially grouping information and are acceptable by your standard.
No, your list said that divs are only to be used for a small number of very specific structural elements.
Please point me to the place in the HTML4 specification that says divs are only allowed for certain specific ID attributes. I've read the spec many times, but it seems I've missed that part.
Of course you're not mean to use a div if there is a more specialised and semantically correct element type available. Divs are the last resort, when you need to group elements that don't make up a paragraph, list, form, table, block quotation, etc.
I think you may have misunderstood what is meant by 'structure'. You are thinking in terms of typical contemporary web sites, while HTML is meant for marking up documents (primarily scientific ones) of information.
The term 'structure' refers to the grouping and nesting of elements within the document, not to arbitrary visual components.
They don't have to be unrelated to the rest of the document. The important reason for enclosing those blocks would be that they have a strong relationship to one another.
Agreed. But who's talking about positioning? I'm talking about logical order.
In an HTTP request, you don't get the content (body) first and then a set of headers as an afterthought saying, 'oh, by the way, what you just received was an HTML document'. You get the headers first, so that you know what to expect.
Similarly, a document header indicates something that should structurally come before the remainder of the page.
No, as I explained above, a div should only be used when there is no semantically correct element type available.
Last edited by AutisticCuckoo; Sep 28, 2008 at 11:40.
Birnam wood is come to Dunsinane
Shouldn't that be "a div should only be used when isn't a semantically correct element type available"?
Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
You left out the word 'there'
We all know what Tommy means.
Thanks cooper. I susperct that I'm upholding the grand tradition of incorporating another mistake when correcting some other one.
Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
Only when you think how the page is displayed with CSS. However without CSS #header is always at the head of the document. #header, #footer define sections of the document, not of the layout you want to do with CSS.
The HTML document should not be written with any correlation to CSS (unless it is absolutely needed.) So for example while in CSS #header maybe come a footer, without CSS it is still a header. CSS should have no bearing on how you structure your document.
HTML defines the structure.
CSS defines the presentation.
A header,footer, masthead,etc are all presentational. They relate to proximity and positioning. They have no bearing on the content itself unless your talking about where it is located on a page – presentation. They don't actually describe content they describe where content is located.
dictionary:
dictionary:footer: a line or block of text appearing at the foot of each page of a book or document.
masthead: the title of a newspaper or magazine at the head of the front or editorial page.
They describe content in relation to a group. They define a structure of a document. Just as books have a header and a footer, the head usually contains Title of the book or current chapter, while the foot may contain a page number or any other information like foot notes. header and footer group relative information.
While yes it could be presentational, because as you put it, header, and footer have position. But they have far more definition then just position.
According to your logic, we could not use the h1-h6 tags because they have a defined position. "Headers are to appear before there block of content" that has a set position.
Obviously thats not what I meant. The "etc." at the end of my sentence implied the list continues with more of similar structural blocks of a document.
The identifiers in my sentence were not to be taken literraly, I just used them to give semantic () context to the words footer and header, implying that Im talking about HTML documents specifically.
Posting Permissions
Bookmarks