Tips on reducing wrapper DIVs?

Unfortunately this seems to be true and only the other day a simple <h1>header</h1> was transformed in html5 to a div wrapper holding a header tag holding a header group tag and finally holding an h1. An increase of about 500% in mark up.

It’s not the first time I’ve seen structures like this and I don’t see the logic in replacing:


<h1>Article title</h1>
<h2>Article subtitle</h2>
<p>Content&#8230;</p> 

With something like this:


<div>
    <article>
        <header>
            <hgroup>
                <h1>Article title</h1>
                <h2>Article subtitle</h2>
            </hgroup>
            <p>Some content</p>
        </header>
        <p>Content&#8230;</p>
    </article>
</div>



In a large page that’s an accident waiting to happen. Too much code and too much complexity in my mind.

Where’s the eyebleach? omigod.

As Crusty likes to say, the more code there is, the more code there is to break.

And I am not wholly convinced that any semantics added be “hgroup” are worth the extra bytes. Which is why there was strong discussion to remove it… unfortunately, it already had too many fanbois. It’s likely to stay in the spec.

The whole article bit can be worthwhile if that article chunk is likely to be syndicated though (stuffed randomly into many other pages).

I think you have a point, but this is an extreme case. And you certainly shouldn’t need that div, with all the other tags available.

Yes it is an extreme case but I’ve seen similar many times already.:slight_smile:

I’m now seeing more badly written code than I did before so it’s just an observation. It’s the same thing that happened in the late 1990s and eventually it all began to get cleaned up but it looks like a return to the bad old days in some cases.

Hopefully it won’t go as bad as it did then but I do have concerns.:slight_smile: Its like the waters have been muddied and no one is sure which way to swim.

I’d even argue against that H2 Paul… well, depending on the page. Is that the start of a new subsection, or is it part of the same heading.

You see that with taglines all the time, where someone will use two different level headings back to back for what is in fact the heading to a SINGLE section… which means it should either be a SPAN, or as used to be suggested SMALL. If you’re not starting a new subsection and aren’t going to have multiple subsections, it’s improper to use two headings.

As is said in many places like the WDG reference, “Since HTML 4 has no element to indicate de-emphasis, SMALL is often useful for this purpose” – a tagline below a heading could be considered de-emphasized, making “small” the correct semantic choice.

Though if that h2 is indeed the start of one of many subsections of the h1, then it does make sense.

h1 h2 p h2 p h2 p – good.

h2 h3 p h2 h3 p h2 h3 p – bad… and I’m surprised how often I see people do that.

If that “subtitle” is like a tagline, I’d have that:


<h1>
  Article title<br />
  <small>Article Subtitle</small>
</h1>
<p>Content</p>

as that is not a seperate heading, it’s PART of the heading.

Though on a related note, I’m starting to get really annoyed with the SEO abuse dimwits who have lately been telling people to use h3 instead of p for everything.

Yes I’d go along with that as it seems to make sense.

That’s the point of the hgroup, though, isn’t it? To allow a subtitle to be marked up with a separate tag but to be clearly linked to the tag used for the title. Semantically, a subtitle isn’t part of the title; it’s a linked item, of subsidiary importance. It doesn’t imply a new section, but clarifies the meaning and content of the current section. In HTML4 you have no semantic way of stating all of this information about the relationship between the tags. In HTML5, the hgroup creates that semantic relationship, and in any case, headings don’t create the document structure in HTML5, so the H2 wouldn’t by necessity imply a new section.

Now, hgroup might not be the best way of achieving this relationship, but I think it’s an improvement over any hacking that HTML4 requires.

Semantically, a subtitle isn’t part of the title;

I’d argue that it is.

After all, the title of the book is “Collapse: How Societies Choose to Fail or Succeed”. Sure, people may say or type “Collapse” for brevity, but surely the book’s title is not just “Collapse”… that is only part of the title.

A true tagline isn’t part of a title, true, but I would argue a true tagline is a tagline and not any type of header. Instead, as you say, a clarifier of the preceding header. If they’re going to make new tags on us, they should give us <tagline>, with the associated semantic meaning of “clarifies and expands upon the header, rather than simply being plain content who is merely headed BY the header”.

To me that’s a PERFECT example of “what’s wrong with HTML 5” – throwing another tag in there to justify using the WRONG tag in the first place – sheer lunacy at best!

But then I consider HTML 5’s approach to heading tags a complete atrocity – one that stems from the fact that NOBODY seems to grasp what heading tags are, how to use them or what a proper heading order even IS!!!

Headings, at least prior to HTML5’s turning them into a jumbled mess, should fan out like a tree – it’s WHY one H1 per page, it’s WHY it’s improper going down your heading orders to skip over numbers. Lower order (higher numbered) headings are by definition the start of SUBSECTIONS of the higher order (lower numbered) heading preceding it. If you aren’t starting a new subsection, you shouldn’t be using a heading tag – and that’s what’s wrong with the hgroup/h1/h2 ‘grouping’ – if you need to ‘group’ heading tags, you’re using the heading tags wrong in the first place. It’s also what’s COMPLETELY WRONG with using a second heading tag for a tagline – as you are creating a new subsection when it isn’t the start of a subsection! If anything it’s part of the SAME heading.

HTML 5’s combination of HGROUP, use as many H1’s as you like, and all these extra ALLEGEDLY semantic elements just look like spaghetti code to me – and after over three decades of programming, much of it spent cleaning up DiBol and Clipper code (or porting it to more modern platforms) I know spaghetti code when I see it. Sometimes I wonder if these new kids are getting paid old-school style, by the K-Loc given the tendency to use CTC ratio’s of 10:1 on something that inherently should never break 2:1 once you have more than 10k of plaintext content.

With all the existing tags the majority of developers don’t even seem to realize exist (DEL, COL, COLGROUP, THEAD, TBODY, TH, FIELDSET, LABEL, LEGEND, CAPTION) throwing more tags at it instead of educating people on how to use the ones we already have is NOT the answer!!!

More code is NOT simpler, new tags to do the same job we can already do is NOT simpler – no matter how hard people try to sell it as such.

It’s why to me, HTML 5 just looks like it’s undoing ALL the progress STRICT offered us turning something simple into an unnecessarily complicated and bloated mess - the mess compounded even further by the loosening of what’s valid and what isn’t to the point that any “validation” becomes meaningless drivel.

Which is probably why to make it actually look good they had to slap a bunch of stuff under the HTML 5 banner that have absolutely jack {multiple expletives omitted} to do with HTML!

LITERALLY the target audience for HTML 5 seems to be the people who still just write presentational HTML 3.2, slap a tranny doctype on it and call themselves up to date… Or the people who write polished turds – where content is the last concern after all their pointless bling bling bull!

It sure as shine-ola wasn’t made for anyone who understands the point of strict, semantic markup or separation of presentation from content.

Well, you won’t have me disagreeing about the decision to abandon all the STRICT requirements. It feels like giving in to bad coders and just throwing up our hands. I hate to think of how hard it’s going to be to deal with code that has been through the hands of several incompetent developers who’ve all used different ‘valid’ methodologies of coding HMTL.

I think in that case that the whole thing would be marked up with an H1. It clearly is all a single title. Whether or not people choose to shorten it, it’s still the complete title.

But not all titles fit that pattern. Take this title (of a book sitting on my shelf next to me): ‘Sir Gregor MacGregor and the Land that Never was’. It is subtitled, ‘The Extraordinary Story of the Most Audacious Fraud in History’. That subtitle is clearly not part of the title. I know this, because the main title page of the book only includes the first title. This would probably be a case where your TAGLINE tag would make sense, rather than an H2.

But consider another example: ‘A Dance with Dragons. Book 5 of A Song of Ice and Fire’. The title is ‘A Dance with Dragons’. But the ‘Book 5…’ is not a tagline, and it is not part of the main title. It’s clearly an independent subtitle.

So, I think there are different types of ‘subtitles’, which should be handled in different ways.

Now, I’ve said that I don’t think HGROUP is necessarily the best way to indicate the linking of the subtitle with the title. It would probably make more sense to use something like the way we link labels to form fields with FOR, and / or to use a SUBTITLE role. All IMHO.

I have to agree also (and as I mentioned above that seems to be what I’m seeing more and more of in peoples code these days).

I don’t know if I’d say “these days” – its true of any field and has been true of web development from the beginning. There will always be those who sleaze through on as little effort as possible – often making MORE WORK for themselves in the long run. I’ve seen it for forty years now.

Sherry Bobbins said it best:
[i]If there’s a task that must be done, don’t turn your tail and run, don’t pout, don’t sob… just do a half assed job!!!

If you cut every corner, it’s really not so bad, everybody does it, even Mom and dad. If nobody sees it, then nobody gets mad!

It’s the American way![/i]

I think a lot of it stems from literacy LEVEL being at a all-time low, despite the more popular literacy RATE being at an all time high. People just don’t take the time to understand things, even their own work!

“Oh, but I have to feed my family” – sure, and you’d be able to feed them better if you did some real work, instead of sleazing by on no effort so you get sacked next week.

Several years ago Roger Johansson made a decent blog entry on the topic… lemme find it here…
Lame excuses for not being a Web professional | 456 Berea Street

Sums it up VERY well. Everything on that page is as true today as it was four years ago!

Much of it can also be blamed on the fact that 90% of web tutorials and 90% of books on shelves are outdated rot… It’s like in Ian Lloyd’s video pimping 2nd edition of [url=http://www.sitepoint.com/books/html2/]his book, where he talks about going into a bookstore and browsing what was on the shelves, and being aghast at what the books were promoting as proper coding techniques – and I quote:

… and really apart from his book (and I even disagree with some bits of that) little if anything has changed.

Overall, I often get the feeling people never heard Pattons ideal of “A pint of sweat now saves a gallon of blood later.” – see the practice of whitespace stripping to hide bloated code, vomiting up presentational markup, PHP and ASP programmers who don’t know enough HMTL or CSS to actually do their job properly, and the tendency to try and build sites on nothing but copypasta instead of learning how to do the job properly.

Cut every corner and sleaze it out any old way – do just enough work you don’t get fired but not enough work to actually be successful or promoted. Go team! That way you have more time to blog, tweet, text, and sit around playing Farmville on company time. Of course, I’m the jackass who when running my own business fired an employee for his needing to be on the phone to his wife 6+ hours a day… and after visiting a friends work told him to fire half his production staff for sitting there texting on the job when there was work that needed to be done.

It’s like people think work is the same thing as high school study hall – but of course with our delaying childhood into the mid-20’s nowadays through paying for school that these kids don’t need, aren’t learning jack, and is bankrupting the economy putting these poor kids DECADES into debt before the age of 24 – this is hardly a shock.

here is one for you…how about

LOGO:MOTTO

This seems obviously wrong: <h1>My Company<br>I do stuff.“</h1>
This IS off the mark <h1>My Company</h1><h2>I do stuff.”</h2>
This ends up reacquiring the same # of tags as hgroup but w/o the TRUE semantic implications: <div id=“logo”><h1>My Company</h1><em>I do stuff."</em></div>

so in a sense the HTML5’s hgroup IS logical and semantic that some “coders” dont know how or when to apply it is not the fault of the markup language itself at least not anymore that it is HTML4’s fault when someone does this:

<div>
<h1>some head<h1>
<span>some line</span>
<div><div><ul><li>a singe list item</li></ul></div></div>
</div>

for deathshad:

“Oh, but I have to feed my family” – sure, and you’d be able to feed them better if you did some real work, instead of sleazing by on no effort so you get sacked next week.

I don’t think you understand… a client/boss may INSTRUCT YOU to do things the wrong way. As a prfession I always respond by recomending the RIGHT way. but the sad truth about any economic system and in any profession is that the peroson paying has teh final say.

I ask you, what would would be the “professional status” of a coder who has the knowledge and ability to make 100% semantic lean code, but because of his unwillingness to “take client direction which is contrary to what he knows is technically right” loses 100% of his clientele? believe it or not this happens quite often in a free ( buyer driven) market economy and not just just in web development , but in just about ANY and ALL disciplines.

If the illiterate where also poor… maybe this wouldn’t be happening …lol. Still, what I am saying is… some of the bad coding is teh result of client request not just ignorant coding.

Just on a side note, I LOVE Dreamweaver ( I miss GoLive tho)… as a text-editor and FTP app. In other words, I agree with your take on such “helper” apps, but it has been a question posed to me by EVERY INTERVIEW I have ever had…“how well do you know/ how good are you at Dreamweaver”… this is even if I am enthusiastically pointing at the VIEW SOURCE display of my sample sites…

so in reply to your Patton reference… the soldiers have and live by it, but the generals seem to WANT/ and gauge the soldiers by the gallon of blood.

INHO, the problem stems from people determining authority by reasons other then education and knowledge. For his $x/hour pay rate the clients/bosses demand a level of control that should be exclusively the domain of the initiated or better yet experienced. Really the issue is… and just about everyone is guilty of this… the lack of appreciation of value. Coders don’t value artists, artist don’t value coders, coders, writers dont value artist or coders and clients/bosses dont feel like valuing anyone; of course corners are going to end up getting cut!

You missed one way of doing it.


<h1>My Company</h1>
<div id="tagline">I do Stuff</div>

One LESS tag than HTML 5’s way… Though I still say this:
<h1>My Company <small>I do stuff</small></h1>
makes more sense as that’s ONE heading. It’s a heading – the description of a section. In that way I’ll often put the date and author inside the heading.


<h2>
  <span>4 June, 2011 <span>-</span></span>
  We did something different today<br />
  <small>By Jimbo</small>
</h2>

(the inner span is display:none, it’s there for CSS off users as a divider)

That’s a heading. ALL of it is a heading… a section of the data describing that which follows situated at the top and/or front. It often seems that people think that because headings can only contain inline level elements it should only be the line of text describing it – if that were true why are line-breaks legal inside them?

It does often come down to “then why did you hire me?” in many of those cases. I’ve never had a client balk when I say “taking technical advice from Forbes is like taking financial advice from Popular Mechanics” – and when you coach it in those terms they typically finally “get it”.

I wouldn’t know – since usually I’m cleaning up the messes made by inept coders that the client wants fixed. That was actually my specialty so far as clients went, taking people who had either micromanaged their site to death or been led down the garden path by some dimwit still vomiting up HTML 3.2, and fixing everything.

Though that has to be dealt with up front; Clearly defined roles for both developer and client HAVE to be discussed before the first line of code is laid down.

Maybe it’s the engineering background, but when someone hires an engineer, usually you leave it to the engineer to do the job RIGHT – since the client usually lacks the knowledge to make logical choices of vendor, materials, or personnel – if they did they wouldn’t have hired the engineer and his crew. What you’re describing sounds more like hiring an interior designer or personal shopper.

Which is when you have to tell them “Just what the *** did you hire me for then?”. Always worked for me…

So… a couple grand for crappy text editor that locks everything into a single window (useless) and a really mediocre FTP app… Oh yeah, that’s SO great.

That’s what I keep saying about it – by the time you have the skills to use it properly you shouldn’t need it and it’s massive over the top hour and a half load time bloated idiocy anymore.

Eh, maybe I just like the look on people’s faces when I say “I’ve used it enough to know to stay the **** away from it!” – and then proceed to list every single thing wrong with it. Usually if you start listing the reasons for your statements, the argument actually has weight.

Well, George was a bit unique – he and Rommel both led from the Front. Usually you don’t see Generals in the field.

That’s just letting them push you around and/or not explaining things well enough to them… Though yes, EVENTUALLY you do often have to cave and say “Fine, but if it fails it’s on your head, not mine!” – and get it in writing… and sometimes you really do have to tell them “look, just exactly what did you hire me for? You think you can do better, let’s see you do it!” – and I’ve never once lost a client from doing that.

Though even in those cases it’s STILL no excuse for invalid buggy broken non-semantic code a decade out of date – no client is going to tell you to do that… Most clients aren’t even smart enough to know what that means.

<small>!!! As always …Am still learning, Shadow.
But it does sound weird when you apply it: <h1>GE <small>We bring good things to life</small>"… still, best solution I seen thus far!! I will begin implementing it.

I did miss :<h1>My Company</h1> <div id=“tagline”>I do Stuff</div>… but that goes back to the my response to the OT.

You think you can do better, let’s see you do it!" – and I’ve never once lost a client from doing that.Though even in those cases it’s STILL no excuse for invalid buggy broken non-semantic code a decade out of date – no client is going to tell you to do that… Most clients aren’t even smart enough to know what that means.

I have been hemorrhaging do to a more polite version of what you just said… :confused:

That’s what I keep saying about it – by the time you have the skills to use it properly you shouldn’t need it

YUP. I am not defending DW as holding the ultimate text editor; just the one I have been given… and apparent the ones clients ask for by name, in which I can type code just as well as TextEdit. But it doesn’t mean using DW make u a bad coder IF you KNOW how to code well in the “code view” mode. Thus my point DW doesn’t make bad coders… bad coding practices make bad coders. But maybe you are right, the problem with DW is that it makes people FEEL they can code even when they are just using WYSIWYG. But thats not the software’s fault is the need for people to feel.

the reason I brought up the source view, was that that I was trying to point out how my sites would not only looked nice but were well structured and “minimal” ( I try to get better everyday) code, but that they didn’t care. As future bosses they want it done THEIR WAY ( or at least in a way they “feel” understand). another great reason for the DW code mode. Boss feels he’s looking at DW and thus doesn’t pursue it further … coder codes properly in code mode.

My father is a retired civil engineer, and while he would support you point in the execution of things, he mention the frequent faux pas in the direction of projects caused by DIRECT and FORCEFUL client intervention. So it does happen the difference is most client of civil engineers lack the math and equipped to actual affect the execution … it doesnt mean its not heading that way like in every other field. The old art directors/creative Directors here still talk about what it was like before the mac when a client could NOT DEMAND a funeral poster done in COmic Sans because that how HE mocked it up in MS WORD so we could see what he wanted us to DO; another of my coworkers check’s HER DOCTORS diagnoses against Web MD!!! It’s really not that difficult to see how a web design a client could jump on a design forum and develop the position that he knows enough to “guide” developers.

I hold your posts in hard regards, but your ire seems misplaced. The big downfall is that people hate admitting ignorance… "I bought a mac so now am a graphic designer since I can DO anything a GD can ", “I bought DW, so am a developer since it lets me DO anything a WD can”, etc; when it fact “just because you CAN DO something doesn’t mean you SHOULD” is a cardinal rule in engineering, as it is or should be in every other discipline.

Maybe I am just unlucky, but I have notice that the an ever increasing number of client/bosses feel just knowledgeable enough to cause trouble. People with no knowledge of code or intent in fully immersing themselves on it have access to sites forms and opinion and can pull $4!+ like saying " I looked at your code you have “divitis” the only time you didnt use a div was for the navigation list…" ( yes, that didnt make sense to me either). in another word, clients that come in the door with the desire to submit to a professional’s expertise ( tested or other wise) are few and far between. What does come through the door are folks that reason if you aren’t doing something their way is because you arent clever enough to figure out a way to make it work, not because that’s NOT the way or BEST WAY to achieve their goal.

Back to the OT, the goal should not be decreasing the # of divs. it should be MAKING SURE every tag is efficient. for that you need to know the structure and maybe the content to be provided and the intended support. so as much I hate buzz phrases, because lift just isnt that simple, the best way to REDUCE UNNEEDED WRAPPERS ( divs or otherwise) is: code from the inside out.

It’s why I suggest actually taking the time to read through ALL the tags on a site that organizes them well… Like the WDG reference:
HTML 4 Reference

If I hadn’t read that end to end, I wouldn’t be as proficient with HTML as I am. I prefer it to the sitepoint reference for it’s simplicity and that it LITERALLY takes the specification and turns it into plain English instead of design by committee legalese.

There are a lot of tags like DEL, SMALL, BIG that most developers don’t even know are there; or tags like KBD, SAMP and CODE that even if they are aware of them, they don’t use them properly. (code goes inside PRE, not instead of… and PRE’s NOT presentational as you’re saying what it is, pre-formatted text.)

Most unusual, but it can hinge on the client base – As I’ve said before I know what works for me here in New England would leave me with no clients in Florida - and the mannerisms of your average millivegan tofu loving PETA card carrying west coast emo would be dumped out on their ass before more than four words escaped their lips here.

Regionalism, Gotta love it.

The problem with it isn’t just not using only code-view though – EVERY example template and auto-generated code even outside the WYSIWYG just mucks up everything. I have sites that all you have to do is load it into DW, do nothing but hit save, and it breaks the entire blasted layout – that’s just screwed up right there.

It’s a steaming pile of crap we need to start campaigning to have stamped out as wasteful, irrelevant and doing NOTHING but teaching bad coding habits. there is NOTHING you can learn from it that’s any good – and that you basically have to ignore 90%+ of it’s functionality to even work with it in a professional manner is reason enough not to waste your time with it – or to allow people to so much as THINK it’s a useful tool.

As Dan used to say, the only professional grade tools in Dreamweaver are the people promoting it’s use.

The great thing about it is itmakes people who have no business building web experiences create them. Then when they have issues because of it come onto a forum like this one were have people such as yourself promote their incompetence by helping them. So by helping them and giving them an answer you essential are promoting its use!

Not if you start with “Well there’s your problem” and tell them WHY they can’t use that steaming pile, and your “help” involves throwing that bloated overpriced heap of dung in the trash.

You know that about 99% of people posting for that “type” of help don’t listen to you. They are merely looking for a fix and forget it solution and could care less about anything regarding DW being a pile of trash. On top that you always have a designer here or there join in the conversation and well… you know.