7 Replies Latest reply: Feb 13, 2014 11:26 AM by sinious RSS

    html5 section vs article vs div?

    westwm Community Member

      I'm having a fundamental block in trying to choose whether to use a div, section or article in my new html5 page for our buisiness.

      By going through the build your first website tutorials i've basically altered that design to try and fit it to our company  website.

       

      for the our  home page i've basically removed several elements from the tutorial page an inserted my own conent into it. This consists of :

       

      body

         wrapper

          header

          nav

          hero - containing slideshow

          article  - link to gallery of more prestigous work

          article - "main" blurb/iinfo about products

          aside  - links to other affiliations

         footer

       

      i've managed to move everything around to where it should be by using floats,margins etc.

       

      BUT my interior page showing products has falled to maintain those spatial relationships. Should i  remove the aside, hero  and article designations and replace with divs intead? I simply wanted to create an area with clickable links for our gallery ( this is in the hero article) , links to our company memberships (in the aside) and an area for the  jqeury prettyPhoto slideshow  to showcase all our products (placed in the hero section) along with an area beneath it (article "main") for a blub describing said products. am i using these html5 areas correctly? How do you know when to use a section, article or diff to house your information?

      I dont want to use AP divs but do want to maintain the dimensions and placements of each section as a visitor goes through our product offerings starting from the homepage. How do i accomplish this? by using css? do i make all the blocks static or something?

       

      additionally, my prettyPhoto js loads incredibly slow in IE, are my code declarations off?

       

      thanks any help or opinions would be greatly appeciated

        • 1. Re: html5 section vs article vs div?
          sinious CommunityMVP

          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. CommunityMVP

            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 Community Member

              Hi there thanks for your reply

              I've made some small Adjustments and uploaded a new interior page at

              interior page

              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!!

              • 4. Re: html5 section vs article vs div?
                sinious CommunityMVP

                On certain engines the linear order of HTML can matter quite a bit. Put your <article> before your <div class="gallery clearfix">, e.g.:

                order.png

                 

                Float the gallery right and don't float the hero or article, no need for clearing etc etc. The memorial will then push those gallery links away in that order:

                 

                push.png

                • 5. Re: html5 section vs article vs div?
                  Herbert2001 Community Member

                  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:

                   

                  1. 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.
                  2. a remark not intended to be heard by everyone present."“Does that make him a murderer?” whispered Alice in an aside to Fred"
                  3. 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 Community Member

                    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 CommunityMVP

                      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:

                       

                      cap.png

                       

                      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:

                       

                      css1.png

                       

                      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.

                       

                      css2.png

                       

                      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:

                       

                      css3.png

                       

                      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.