-
1. Re: html5 section vs article vs div?
sinious Feb 5, 2014 8:20 AM (in response to westwm)While we're steadily moving towards compliance, browsers like IE8 that do not understand HTML5 should be considered. Knowing HTML rendering engines will simply ignore elements it does not understand and HTML5 will gladly let you structure with <div>, you're free to mix them to suit all needs. Structure using div but inside those structures you can wrap your content with the appropriate tag (article, aside, footer, etc). Best of both worlds.
If IE8 or users with older browsers are of no concern, which part of the interior page is going wrong, outside the images in the gallery are 404s (don't exist) and the main menu (which doesn't work on the front page either) is spilled out (e.g. the nav JS isn't happy).
The structure of the interior page itself is similar to the front page. Header is the same, content area vertically adjusts with the gallery aside, the bottom tan note area and memorial aside line up (the memorial aside is padded a bit different though), the footer is the same, etc.. It looks like script errors from missing images and perhaps a structure issue with your nav code as clearly the subnav isn't being properly initialized by your menu script.
-
2. Re: html5 section vs article vs div?
Nancy O. Feb 5, 2014 9:43 AM (in response to westwm)Your menu's legal notice needs to be inside the <script> tag like this.
<script type="text/javascript">
/***********************************************
* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
In HTML5, I prefer to organize my basic semantic structure like this:
- article = main content for that document or section.
- section = a region in the document or article -- a sub-topic for example.
- aside = content that may or may not be related to the article but nevertheless stands on it's own. I often use asides for sidebars.
- header, footer & nav are self explanatory
http://www.w3.org/html/wg/drafts/html/CR/sections.html#the-section-element
Nancy O.
-
3. Re: html5 section vs article vs div?
westwm Feb 7, 2014 9:33 AM (in response to sinious)Hi there thanks for your reply
I've made some small Adjustments and uploaded a new interior page at
The main problem is how do I get my "hero" div to maintain an area of 710px x 355px so that my prettyPhtoto gallery thumbnails don't spill out Behind my hero article "memorials gallery" link image? My intention was to maintain an area similar to the slider gallery on the home page only now with the interior pages they would house 12 thumbnails for my pretty photo is gallery. As you can see though, the thumbnails are spilling behind the hero article link. I don't know how to contain the thumbnails.
I don't know why my blurb (article "main") area is spilling out So far.
I have no idea why my nav menu disappears on my home page but is displaying fine on my interior page from above. They dont behave this way in IE8 and IE11. I've been coding and previewing my pages in IE since IE is the pickiest. I hate IE but yes, I'm trying to cater to an older audience who might still be running IE8.
Boy do I hate IE!
Please help!!
-
-
5. Re: html5 section vs article vs div?
Herbert2001 Feb 10, 2014 2:02 PM (in response to Nancy O.)Be careful: sidebars are not the same things as aside elements.
According to the official w3c definition:
The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.
I think this article makes it quite clear how and when to use asides:
http://www.aastudio.fr/Sidebar-and-Aside-are-different.html
The key to its application in html lies in the "content that is tangentially related to the content around the aside element" bit and can also be found in how it is used in speech and theater:
- a remark or passage by a character in a play that is intended to be heard by the audience but unheard by the other characters in the play.
- a remark not intended to be heard by everyone present."“Does that make him a murderer?” whispered Alice in an aside to Fred"
- a remark that is not directly related to the main topic of discussion."the recipe book has little asides about the importance of home and family"
Aside should only be used as structural and semantic sidebar tag if and when there is some contextual link within the scope of its nested parent tags.
So it can be used for advertising, IF the content of those advertisements is targeted at the overall context of the other content within the parent element in which both the content and asides are used.
For example, you might have a blog about cultural traveling, and an article about Yucatan's Maya. Banners that are trying to sell holiday packages to Mexico would fit inside that article, and an aside can be used to hold those banners. The aside would be added in the article.
If, however, you create a <main> tag that contains the main content for your web page, and inside you have several sections with articles, and then nest an aside tag with unrelated content (such as random banners) you would be doing it wrong, and a regular division would be the correct choice.
Looking at your web code, when we take the above into account, I think the "Memorial Gallery" should NOT be an article tag (it is not an article), but an aside, since the memorial gallery is somewhat linked to the content of the div#hero.
The aside you used for the sidebar lower in the page is incorrect: it is part of a general div#wrapper, but that wrapper has no meaning. The aside#sidebar is too generic and could be part of the content on the side, though in that case it would be wise to nest both in a separate section tag. Though I do feel in this case the welcome message and the associations box have no tangible connection. If it had been an "about Westwood Memorials" box, then: yes: a connection between the two is made.
In short the aside tag is rather confusing. If you are uncertain about the use of an aside tag, leave it out.
Some other comments about the overall structure:
- add a class or id to your page footer. <footer class="page-footer">. The footer tag can be used for other footer instances as well: for example, article footers, or section footers.
- try to avoid id selectors as much as you can. Classes can be reused, and it is far easier to write short and efficient css code.
- <article id="main"> could be improved as well. There is a <main> tag that could be used to surround all the page's main content instead. Then write the welcome message in a article class="welcome-message", or something along those lines.
- avoid generic selector names like "wrapper", "main", "sidebar", "top". More semantic labels are preferable.
- be careful when to use and when not to use an article tag.
-
6. Re: html5 section vs article vs div?
westwm Feb 12, 2014 2:56 PM (in response to sinious)hi thanks very much for your help
I copied and pasted the article with our Memorial Gallery passage, ahead of the div class "gallery clearfix" and saved the page. Oddly it makes no difference in the page, the article still comes after clearfix galley with the article id= "main" staying on the left of it. why is this so?
I'm uncertain what you mean for your second set of instructions:
"float the gallery right" which gallery are you takling about, the <div class="gallery clearfix">? how is this done?
"dont flat the hero or article..." you are saying i shouldnt float <div id="hero"> and <article id="main"> ?
thanks for any further input!
this is very confusing. I've since update the above links the new interior pages can be found here.
It doesnt have the changes you suggested. To see the gallery in action just goto page 2 onwards. not sure why the images for page 1 arent there.
-
7. Re: html5 section vs article vs div?
sinious Feb 13, 2014 11:26 AM (in response to westwm)Yes I'm loosely referring to it as the gallery (confusingly) because that div has a class named 'gallery'.
Are you using any developer tools as you work? They make everything much easier to fix. You can change rules in the browser to overrride your CSS and witness the changes before you commit them to your actual files. I changed some CSS rules around as well as re-ordered the content to achieve what you see in my screenshot.
One thing many people may not be aware of is a useful 3D perspective that FireFox's developer tools offers. It lets you view the page as a hierarchy, literally, visually. Viewing your page I immediately saw some of these issues. If you don't already have FireFox, grab it here.
Here's a 3d view of the issue:
Press Shift+F2 (Win) to open the developer tools and then click the wrench icon on the right if they don't expand. Then click the 3D button I had drawn a quick red box around. Use your mouse to move/pan/tilt your design to see exactly what is nested and what the CSS rules are controlling.
As mentioned, you're using an <article> for what would better be an <aside>. That has already been explained above so I'll go past that.
The <article> you define has a float:none; applied to it (this is default). Here's the firebug of it, exactly as you have it now, expanded:
We can see the float:none applied to the article (the object you really actually want to float to the right side). This object also exists, together, in the div of id="hero". If you want the child gallery to float to the right, just change the rule so the content (article as you have it, or aside if you change it) for Memorial Gallery floats right of the list.
On main.css (line 58) I removed #hero position:relative;. I changed the article to be the first child inside #hero as I depicted above. I then removed main.css (line 74) position:absolute from #hero article. I removed the unnecessary clear:none and added float:right.
You can see the article is first and the gallery (div with class gallery) is 2nd. By floating the first child right (article) it jumps to the right of the list of pictures and you can see it respecting the boundary:
This is just to illustrate a few things. Floating the object you actually want to float, ordering the structure so it abides by your flowing rules, editing rules real-time with a developer tool like firebug or firefox developer tool.
That said, this does not fix the entire page. There are structure issues with it that exceed just what I've mentioned. What you should do is use these tools to tweak the CSS until the content flows how you want it and then commit the changes you make back to your CSS. It's very easy to experiment and tweak with the developer tools.











