Well, learning it to understand it is good -- if for no other reason than to understand why it's total bloated garbage. I learn things before I reject them -- it's why my comments often piss off fanboys; I learn where to stick the knife and twist before I badmouth things.
Let's review what you have:
Ignoring the HTML 5 shiv crap, uselessly vague head and meta tag that nothing actually uses -- many of the problems I'm seeing would be just as bad if you weren't using HTML 5. The presence of the HEADER element is simply an extra unnecessary wrapper in most layouts -- the same as the wasteful "<div id="header">" nonsense many people practice. You have a invalid/inaccessible/malformed form using a h1 to do LEGEND's job, no fieldset, some garbage empty section inside the form for christmas only knows what (probably scripting in which case the script should add the element to the DOM)... Of course with the use of section tags you can now use multiple H1's.... but the presence of the aside directly after the H1 when it doesn't appear to be the content for that heading (hence the aside tag), aside tag wrapping an OL that STILL ends up with a class on it (meaning I'd either move the class to the aside or not bother wasting the extra pointless wrapping tag around it), header tag for what should be a HEADING tag... results in a list when you have block level children meaning it probably should NOT be considered list items (ordered OR unordered)...
To me I just see bloated/pointless extra markup for nothing... about the only element you are using that even offers a code improvement to me would be the MARK tag... and honestly I'm not sure why we needed a new tag for that since DFN could fill that job rather nicely.
It is indeed an excellent example of why I think HTML 5 is a bunch of unnecessary fat bloated bull -- entirely typical of what I'm used to seeing from it and my own experiences in playing with it.
I mean, if that code isn't reason enough to kick it to the curb, I don't know what is...
Header, nav, footer -- Redundant and pointless bloat. If they wanted to give us that stuff, it would have been a hell of a lot more useful if it was just an attribute added to all tags... like recycle "scope" or make "rel" useful or something.
Oh, and just because they're "ordered by weighting" is no reason to throw them into an OL. Or even a UL. I draw the line at using lists the moment they have their own structure; that's what numbered heading tags and source order are for; and why the constant list abuse is little more than wasted markup.
But to be fair, you have to compare them apples to apples -- by coding it both ways to compare.
Doing what you are using HTML 4.01 Strict, I'd end up with this:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
>
<meta
http-equiv="Content-Language"
content="en"
>
<meta
name="description"
content="HTML 4 Strict Search Results"
>
<link
type="text/css"
rel="stylesheet"
href="/theme/screen.css"
media="screen,projection,tv"
>
<title>
HTML 4.01 Search Results
</title>
</head><body>
<!--
I'd have the outer div#pageWrapper in either HTML 4 or 5 for semi-fluid or other hooks
-->
<div id="pageWrapper">
<h1>Site or page title of which ALL OTHER HEADINGS are subsections</h1>
<ul id="topSearch">
<li>Content</li>
<li>Images</li>
<li>Media</li>
</ul>
<form id="search" method="post">
<fieldset>
<legend><span>Search Query</span></legend>
<!-- span inside legend is due to legend being unreliable on taking CSS styling -->
<label for="topSearchText">Enter Search Term Here...</label>
<input type="search" name="search-text" >
<input type="submit" value="Search" class="submit">
<a href="#">Advanced Search</a>
</fieldset>
</form>
<div id="contents">
<div id="textResults">
<h2>Text Search Results for "<dfn>Stripped</dfn>"</h2>
<h3>Title Of Result</h3>
<p>
Put content into a paragraph <dfn>stripped</dfn> probably tag stripped and truncated at 256 characters. (seems the current trend). Yes, I realize this is technically DFN abuse... but using the "defining instance" as what the search is for makes some sense.
</p>
<h3>Title Of Result</h3>
<p>
I wouldn't even bother with making these a list as these are not "bullet point" items the moment you have more than one set of block level containers inside them. If you can put a heading tag on it, that's when you stop using lists IMHO. List <dfn>Stripped</dfn> we still have semantic meaning by just using heading tags properly!
</p>
<h3>Title Of Result</h3>
<p>
Which is how the code can be <dfn>stripped</dfn> down so much.
</p>
<ul class="pagination">
<li>1</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">Last</a></li>
</ul>
<!-- #textResults --></div>
<div id="imageResults">
<h2>Images Search Results for "<dfn>Stripped</dfn>"</h2>
<ol><!-- these items are small enough to be list items -->
<li>
<a href="#">
<img src="http://www.sitepoint.com/forums/images/result1Thumb.png" alt="thumbnail description" >
Brief text describing this
</a>
</li><li>
<a href="#">
<img src="http://www.sitepoint.com/forums/images/result2Thumb.png" alt="thumbnail description" >
Brief text describing this
</a>
</li><li>
<a href="#">
<img src="http://www.sitepoint.com/forums/images/result3Thumb.png" alt="thumbnail description" >
Brief text describing this
</a>
</li>
</ol>
<ul class="pagination">
<li>1</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">Last</a></li>
</ul>
<!-- #imageResults --></div>
<div id="mediaResults">
<h2>Media Search Results for "<dfn>Stripped</dfn>"</h2>
<ol><!-- these items are small enough to be list items -->
<li id="imageResult1">
<a href="#">
<img src="http://www.sitepoint.com/forums/images/result1Thumb.png" alt="thumbnail description" >
Brief text describing this
</a>
</li>
<li id="imageResult2">
<a href="#">
<img src="http://www.sitepoint.com/forums/images/result2Thumb.png" alt="thumbnail description" >
Brief text describing this
</a>
</li>
<li id="imageResult3">
<a href="#">
<img src="http://www.sitepoint.com/forums/images/result3Thumb.png" alt="thumbnail description" >
Brief text describing this
</a>
</li>
</ol>
<ul class="pagination">
<li>1</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">Last</a></li>
</ul>
<!-- #mediaResults --></div>
<!-- #content --></div>
<div id="advertisingResults">
<h2>Advertisements</h2>
<!--
adverts go here, I would NOT put them before actual content in source order as that just pisses off people on small screen, NOR would I put a ordered list around them.
-->
<!-- #advertisingResults --></div>
<div id="footer">
© Some Random Search Engine
</div>
<!-- #pageWrapper --></div>
<script type="text/javascript" src="js/scripts.js"></script>
</body></html>
To make that HTML 5 as I understand using HTML 5... we have to throw in header tags around a bunch of semantic tags for no good reason, swap DFN for Mark, use the footer tag but still have to add block level containers inside footer since it's apparently not ENTIRELY block level (still not sure I understand that!) anything remotely resembling lists of links gets nav thrown around it. (nav being a nice descriptive name with every link on a page being navigation), lip service doctype and a character encoding meta older browsers don't even understand (so they fall back on the http headers), the need for that scripting shiv idiocy that breaks most of the time anyways... Oh, and of course since we're using sections EVERYTHING becomes a H1, because that makes it so much clearer what's going on...
Code:
<!doctype html>
<html lang="en"><head>
<meta charset="utf-8">
<meta
name="description"
content="HTML 4 Strict Search Results"
>
<link
type="text/css"
rel="stylesheet"
href="/theme/screen.css"
media="screen,projection,tv"
>
<!--[if lt IE 9]>
<script
type="text/javascript"
src="http://html5shiv.googlecode.com/svn/trunk/html5.js"
></script>
<![endif]-->
<title>
HTML 5 Search Results
</title>
</head><body>
<!--
I'd have the outer div#pageWrapper in either HTML 4 or 5 for semi-fluid or other hooks
-->
<div id="pageWrapper">
<header>
<h1>Site or page title of which ALL OTHER HEADINGS are subsections</h1>
<nav>
<ul id="topSearch">
<li>Content</li>
<li>Images</li>
<li>Media</li>
</ul>
</nav>
<form id="search" method="post">
<fieldset>
<legend><span>Search Query</span></legend>
<!-- span inside legend is due to legend being unreliable on taking CSS styling -->
<label for="topSearchText">Enter Search Term Here...</label>
<input type="search" id="topSearchText" name="search-text" autocomplete="off" list="search_list" autofocus required aria-required="true">
<datalist id="search_list">
<option>Suggested Text1</option>
<option>Suggested Text2</option>
<option>Suggested Text3</option>
</datalist>
<input type="search" name="search-text" >
<input type="submit" value="Search" class="submit">
<a href="#">Advanced Search</a>
</fieldset>
</form>
</header>
<div id="contents">
<section id="textResults">
<header>
<h1>Text Search Results for "<dfn>Stripped</dfn>"</h1>
</header>
<section>
<header>
<h1>Title Of Result</h1>
</header>
<p>
Put content into a paragraph <dfn>stripped</dfn> probably tag stripped and truncated at 256 characters. (seems the current trend). Yes, I realize this is technically DFN abuse... but using the "defining instance" as what the search is for makes some sense.
</p>
</section>
<section>
<header>
<h1>Title Of Result</h1>
</header>
<p>
I wouldn't even bother with making these a list as these are not "bullet point" items the moment you have more than one set of block level containers inside them. If you can put a heading tag on it, that's when you stop using lists IMHO. List <dfn>Stripped</dfn> we still have semantic meaning by just using heading tags properly!
</p>
</section>
<section>
<header>
<h1>Title Of Result</h1>
</header>
<p>
Which is how the code can be <dfn>stripped</dfn> down so much.
</p>
</section>
<footer>
<nav>
<ul class="pagination">
<li>1</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">Last</a></li>
</ul>
</nav>
</footer>
<!-- #textResults --></section>
<section id="imageResults">
<header>
<h1>Images Search Results for "<dfn>Stripped</dfn>"</h1>
</header>
<ol><!-- these items are small enough to be list items -->
<li>
<a href="#">
<img src="http://www.sitepoint.com/forums/images/result1Thumb.png" alt="thumbnail description" >
Brief text describing this
</a>
</li><li>
<a href="#">
<img src="http://www.sitepoint.com/forums/images/result2Thumb.png" alt="thumbnail description" >
Brief text describing this
</a>
</li><li>
<a href="#">
<img src="http://www.sitepoint.com/forums/images/result3Thumb.png" alt="thumbnail description" >
Brief text describing this
</a>
</li>
</ol>
<footer>
<nav>
<ul class="pagination">
<li>1</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">Last</a></li>
</ul>
</nav>
</footer>
<!-- #imageResults --></section>
<section id="mediaResults">
<header>
<h1>Media Search Results for "<dfn>Stripped</dfn>"</h1>
</header>
<ol><!-- these items are small enough to be list items -->
<li id="imageResult1">
<a href="#">
<img src="http://www.sitepoint.com/forums/images/result1Thumb.png" alt="thumbnail description" >
Brief text describing this
</a>
</li>
<li id="imageResult2">
<a href="#">
<img src="http://www.sitepoint.com/forums/images/result2Thumb.png" alt="thumbnail description" >
Brief text describing this
</a>
</li>
<li id="imageResult3">
<a href="#">
<img src="http://www.sitepoint.com/forums/images/result3Thumb.png" alt="thumbnail description" >
Brief text describing this
</a>
</li>
</ol>
<footer>
<nav>
<ul class="pagination">
<li>1</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">Last</a></li>
</ul>
</nav>
</footer>
<!-- #mediaResults --></section>
<!-- #content --></div>
<section id="advertisingResults">
<header>
<h1>Advertisements</h1>
</header>
<!--
adverts go here, I would NOT put them before actual content in source order as that just pisses off people on small screen, NOR would I put a ordered list around them.
-->
<!-- #advertisingResults --></section>
<footer id="pageFooter">
<p>
© Some Random Search Engine
</p>
</footer>
<!-- #pageWrapper --></div>
<script type="text/javascript" src="js/scripts.js"></script>
</body></html>
Oh yeah, that's SUCH an improvement... No wait, not an improvement... what's the word I'm looking for? I can't even do it with one word... "Idiotic stupid asinine pointless useless bloat" works... Maybe an acronym for that? ISAPUB? I like that... ISAPUB.
I mean other than the autocomplete thing and mark... the rest of it is just stupid. When/if I use HTML 5, it will be for those and you will not find header, section, nav or any of the rest of that pointless non-semantic bloat in my code... though really that's why I'm using XHTML 1.0 Strict for now with NO plans to migrate. HTML 5 is "cute" ... but ultimately 90% of it is crap that just seems to exist to revert coding practices back to 1998 and/or amounts to throwing our hands up and saying "oh well, people are just going to vomit up code any old way to hell with the rules, so lets just pretend STRICT never existed and just slap some lip-service header on HTML 3.2" It LITERALLY seems to exist just for the people who want to slap extra wrappers around everything for no good reason -- the same people who missed the point of strict, don't understand semantics, proper heading orders, or any of the other good coding practices of the past decade.
Basically, Mr. Peabody wants his keys back.
Reply With Quote
Originally Posted by bar338
Joking -- <ducky>it's called a sense of humor, you should try one, it's nice!</ducky> -- I'm saying that if for semantic reasons you are using headings, the presence of heading, section, footer, and article reset them all into being H1's instead of maintaining the cascade that actually made numbered headings make SENSE... NOT that anyone actually bothered using them properly which is probably WHY HTML 5 took that route... at which point ditch the numbered heading tags alltogether as they no longer serve a purpose; Just use HEADER instead. Header vs. Heading -- redundant pointless BULL.
Bookmarks