Hi everyone,
It’s been a while since I’ve been around the forums, glad to see that most of the old timers are still here. I tried to log in to my old account (Rayzur), but it looks like my old password is too short.
Now that all the dust has settled from the html5 and RWD changes it’s time to get my old site updated. It’s probably good that I waited so long, modern browsers should be up to speed with all the changes by now.
I have managed to replicate the old 2-column layout into a visually working RWD layout. My main goal was to preserve the header’s saw blade ( sawdust on hover) logo for desktops and tablets. My small screen media queries do away with the logo and stack the columns as blocks with a cheeseyburger menu under the header.
Currently I am using display:table; for the equal height columns effect. I would welcome input on using flexbox to place main content first in the source order while keeping my nav under the header visually when queries kick in. Is flexbox safe to use now?
As far as my thread title “html5 markup” my specific questions are as follows.
Site Title in header as h1, should I find another tag for that banner heading? Old site has h1 in header (sitewide) and h2 on all page headings.
Sidebar will have other content below nav links. That content would fall under optional <aside> content. It feels dirty nesting that inside the <nav>. Feel like I need <div class="sidebar"> with <nav> and <aside> nested within, then dump <aside> with media query.
Here is the new markup that I am scratching around with (Ignore the <hr> tags , they are just to separate un-styled elements)
Thanks in advance, and for reading this far!
Ray
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title of given site page</title>
</head>
<body>
<div id="wrap">
<header role="banner">
<div id="logo">
<a href="index.html" title="Link to Homepage">Logo anchor with<br> background image</a>
</div>
<h1>Sitewide Banner Heading<br> <b>Seen On Each Page</b></h1>
<p id="since">Quality Cabinetry Since 1984...</p>
</header>
<hr>
<div class="inner">
<nav>
<button id="toggler">Menu</button>
<ul class="menu">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
</ul>
</nav>
<hr>
<main>
<h1>Page Specific Heading</h1>
<p>main content text</p>
<p>main content text</p>
<p>main content text</p>
<figure class="cover">
<figcaption>Come On In & I'll Show You Around!</figcaption>
<img src="images/cover.jpg" alt="Knotty Alder Kitchen">
</figure>
</main>
</div>
<hr>
<footer>
<p>footer stuff here</p>
</footer>
</div>
</body>
</html>
This article here has been helpful to my “Site Title” question. HTML5 document outline revisited (h1 for the site title?)
Roger’s concluding thoughts are:
For sub pages though, the title of the current page or site section really should be an h1. I’m still a bit on the fence about putting the site title in an h1.
The outlines here represent my current thinking on this. I’m not entirely sure that it won’t change (the h1 around the site title could very well go at some point)
I really don’t want my Site Title tags changing from page to page.
Maybe just a <p> tag styled would be best.
I’m not sure what you are asking here as flexbox obviously doesn’t change the source so firstly you would need the html in the order that you want it. You can then visually arrange things with flexbox so sections can appear in different places (structure allowing).
I’m guessing you meant you want it look your old site where the content comes before the navigation in the html?
You could do that with flexbox and just change the order property to switch columns into position. Flexbox is supported quite well now as long as you aren’t worried about ie10 and under. You can usually create a fallback of display:inline-block for the flex items but it does depend on layout a bit as inline-blocks will need a width while flex probably won’t need widths on everything but usually you can manage both.
For company sites I feel the the company name should really be the h1 on each page but its one of those things that can be argued every which way.
Hi Paul,
Thanks for replying, nice to see that your still here!
Yes that’s what I meant, I would markup the main content first and visually display the nav above it with media queries for small devices.
Right, I remember this being debated every which a way with html4. The advantage now is that html5 allows more than one h1 (when used responsibly).
Your company site point of view is interesting and helps push me that direction. I was using role="banner" on the header tag to help lower the h1’s importance, if that makes any sense.
Still need help marking up the sidebar with something other than just <nav> so I can nest optional content in there while preserving the <nav> when queries kick in.
Yes, I believe that was supposed to be the case but I did read the other week that it has come full circle and they are again recommending only 1 h1 per page again (in most cases). Something to do with the fact that browsers didn’t/won’t update the document outline to the new specs (I couldn’t find the article otherwise I would have linked to it).
Yes I think you will need to wrap the nav and the aside in a parent div to achieve what you want.
Divs are not as evil as people make out and an extra wrapper or 2 is fine if it makes things easier to manage.
A lot of this is still debatable ( and still changing as has happend with aside and the deprecated hgroup) so i ten to keep things simple and straight forward much as the old days
Thanks Ryan![quote=“PaulOB, post:3, topic:229526”]
Flexbox is supported quite well now as long as you aren’t worried about ie10 and under. You can usually create a fallback of display:inline-block for the flex items but it does depend on layout a bit as inline-blocks will need a width while flex probably won’t need widths on everything but usually you can manage both.
[/quote]
I’ve put together a flexbox demo that does everything I need in good browsers. My browser stats show that 23% of my visitors are using IE. That breaks down like this for IE versions.
ie 11 - 0.5 %
ie 10 - 0.5 %
ie 9 - 14 %
ie 8 - 8 %
There’s no way I can tell were those ie8/9 users were coming from, probably china. Regardless, bet I never made a dime from them.
I hate to allow old IE to still cause problems for me in this day and age. I don’t have a problem giving it some workarounds for working page but if I do main content first it would be a deal breaker.
Maybe not worry about content first, and just stick with my working display:table page.
I remember the old “Content First” quiz but that used AP as the solution if I remember right.
That seems exceptionally high and generally IE10 and under usage is down to 3% for the whole lot and expected to fall off dramatically this year. I don’t really cater for Ie10 and under unless the client specifically requests. You have to weigh up supporting the old browsers with the number of new browsers that you may harm (mobile users have overtaken desktop users now).
I’m not a big fan of content first as I believe it makes little difference to seo these days but if you must go that route then I would do something like this:
The fallback for browsers that don’t understand flex is display:table and table-cell (they get those automatically because they don’t understand flex). Flex items (direct children of the flex container) can’t have their display property changed (apart from none) so the display:table-cell has no effect on flex items.
The above gives older browsers the menu on the right instead of the left whereas new browsers get it on the left as you wanted.
I also removed the absolute positioning form the bottom of the column as we don’t do that these days :). Instead just use margin-top:auto on a flex item to move the item right to the bottom.
Also remember IE8 doesn’t support media queries so you would need to use something like respond.js to get media query support. These days as mentioned above I really only support ie11+ and give minimal support to IE9.
The old versions of IE are now unsupported and insecure and some developers believe those users should be actively discouraged from using broken browsers because of the security issues. In the end though its your choice and if you can trust your stats (as browsers lie) then you may need to put in minimal support for the older browser.
It seems that my stats are wrong. After digging through my C-panel AWstats, I found a lot of bugus traffic from referrer spam out of Russia. I suspect this is connected to my outdated IE visitors.
I’m going to disregard my stats and move forward.
I guess I was thinking about accessibility more than seo. I’m going to do away with the content first markup and let the <main> element do it’s job for screen readers (should I ever have any). Most of my visitors go straight to my gallery to look at pictures of my work.
I’m going to drop unsupported browsers altogether, move forward with flex and let html5 elements serve their purpose. When I start building my img gallery flexbox would help with that too. This flex layout is all new to me so I’m sure I’ll be back with more questions and a new thread later on.
If you think the markup below is suitable, I’ll take this revised example and start building a working page from it.
Thanks for your help Paul, I’ve gained insight from your replies.
<div class="wrap">
<header>
<h1>H1 Business Name Heading</h1>
</header>
<div class="inner">
<div class="sidebar">
<nav>Nav @ Top</nav>
<aside>aside content in flow</aside>
<aside class="bottom">aside content at bottom</aside>
</div>
<main>
<h2>H2 Page Specific Heading</h2>
<p>main content text</p>
<p>main content text</p>
<p>main content text</p>
</main>
</div>
<footer>
Footer
</footer>
</div>
