33 Replies Latest reply on Nov 1, 2015 3:40 PM by hans-g.

    Need help with HTML5 validation errors

    TheOriginal150mph Level 1

      This page I designed for a school project, so the links don't need to work. The fixes I'm trying keep breaking it. eg, when I change the css and html to  div_breadcrumb and breadcrumb for the ul. It took a long time to get the breadcrumb looking good but it won't validate like this.

       

       

      Screen shot 2015-10-29 at 11.48.22 PM.png

        • 1. Re: Need help with HTML5 validation errors
          osgood_ Level 8

          The first error is saying you have declared the id "breadcrumb" more than once on your page. Usually breadcrumbs (a navigation trail) would only appear once on your page so I'm not sure why you have declared it twice. You could change the id to a class - classes can be used multiple times within a page.

           

          The second error 'header-aside' - I've never come across this tag BUT it obviously does not belong inside the <section> </section> tag. The only html 5 tags I see are the ones listed: HTML5 Semantic Elements

           

          The third warning NOT an error is saying you might want to consider using a heading tag like <h2> <h3> <h4> inside the <section></section> tag - that's up to you it's only a warning not an error. According to W3C's HTML5 documentation: "A section is a thematic grouping of content, typically with a heading."

          • 2. Re: Need help with HTML5 validation errors
            BenPleysier Adobe Community Professional & MVP
            1. Change the ID to CLASS as in <ul class="breadcrumb">. Also change the CSS to reflect the change as in .breadcrumb instead of #breadcrumb.
            2. There is no element called <header-aside>. Just remove the div altogether, it has no effect.
            3. A SECTION must contain a heading such as h1, h2 etc. If there is no heading it cannot be called a section. See HTML section Tag

             

            Not seen by the Validator, but requiring attention. There is a stray </p> tag and no end tag for <span> in the following.

            <span class="bold">A season is a subdivision of the year, marked by changes in weather, ecology, and hours of daylight. Seasons result from the yearly revolution of the Earth around the Sun and the tilt of the Earth's axis relative to the plane of revolution. In temperate and polar regions, the seasons are marked by changes in the intensity of sunlight that reaches the Earth's surface, variations of which may cause animals to go into hibernation or to migrate, and plants to be dormant.</p>

            1 person found this helpful
            • 3. Re: Need help with HTML5 validation errors
              BenPleysier Adobe Community Professional & MVP

              Sorry, I did not realise that there was already a reply which sort of contradicts what I have stated. To avoid confusion, please read section – section (NEW) - HTML5 where it states that

              The section element represents a section of a document, typically with a title or heading.

              • 4. Re: Need help with HTML5 validation errors
                TheOriginal150mph Level 1

                Hi guys Thanks for the reply


                - For the breadcrumb, I couldn't get it styled right no matter what I tried, so I got that setup from an old Stackoverflow post. Changing the ID to a class was the first thing I tried but I see that I didnt change every instance in the CSS. I did it that fixes it good enough for this thanks.

                - Got rid of the aside

                - fixed the missing tag

                - would love to fix the missing section header issue. I think I've been told that just a plain div tag is a not semantic HTML5, so I don't want that.

                Screen shot 2015-10-30 at 12.43.05 AM.png

                I'll get marked off for the way it is now. there are other semantic problems and I'm confused how to fix. The assignment can't have "untitled sections" - which got thrown at us today at the last sec., as defined by https://gsnedders.html5.org/outliner/. Right now it's showing:


                Screen shot 2015-10-30 at 12.48.29 AM.png

                Im just exhausted/going blind trying to figure this stuff out hour after hour. Its due tomorrow Fri. @ midnight.


                Any help you can offfer very much appreciated!!

                • 5. Re: Need help with HTML5 validation errors
                  osgood_ Level 8

                  Just move the <h2> header inside the section tag and change <span> to a paragraph <p></p>: or better still target the paragraph tag in your css file #seasonsintroText p  {font-weight: bold;} then you don't need to clutter up your mark-up with a lot of unecessary classes.

                   

                  <section id="seasonsIntroText">

                  <h2>THE SEASONS: Why they change. How to find yours.</h2>

                  <p class="bold">A season is a subdivision of the year, marked by changes in weather, ecology, and hours of daylight. Seasons result from the yearly revolution of the Earth around the Sun and the tilt of the Earth's axis relative to the plane of revolution. In temperate and polar regions, the seasons are marked by changes in the intensity of sunlight that reaches the Earth's surface, variations of which may cause animals to go into hibernation or to migrate, and plants to be dormant.</p>

                  </section>

                   

                   

                  and get rid of the below - you're just creating more code than you require:

                   

                    <section id="seasonsIntroTitle">

                            <header-aside>

                              <h2>THE SEASONS: Why they change. How to find yours.</h2>

                          </header-aside>

                        </section>

                  1 person found this helpful
                  • 6. Re: Need help with HTML5 validation errors
                    hans-g. Adobe Community Professional & MVP

                    Hello,

                     

                    if I understand you in the correct way, there are problems with your links too. Looking to your source code I fond this:

                     

                    <nav>

                          <ul>

                              <li><a href="index.html">home</a></li>

                              <li><a href="_shop.html">shop</a></li>

                              <li><a href="_about.html">about us</a></li>

                              <li><a href="_contact.html">contact</a></li>

                          </ul>

                        </nav>

                     

                    But your sites are written without these dashes, or?

                     

                    Hans-Günter

                    • 7. Re: Need help with HTML5 validation errors
                      BenPleysier Adobe Community Professional & MVP

                      Looking through the whole document the following remarks,

                       

                      1. <body> is a container, hence div#wrapper is redundant. The style rules applied to div#wrapper can be applied to body and the div element can be deleted.

                       

                      2. div#breadcrumb is technically a nav hence should be nav#breadcrumb or better still

                      <nav aria-label="breadcrumb" role="navigation">

                      The CSS selector can become

                      nav [aria-label="breadcrumb"]

                       

                      ul#breadcrumb can become just ul and the selector will be

                      nav [aria-label="breadcrumb"] ul

                      3. Why do you have the whole document as an aside? An aside should be used where the content can get deleted (such as for mobile devices) without affecting the main content. The image in the sidebar is an example of and aside. But not the whole document.

                       

                      4. As osgood_ has stated, the first section in the document can be renamed section#seasonsintro that contains the heading and a paragraph as in

                      <section id="seasonsintro">

                           <h2>Heading</h2>

                           <p>Content</p>

                      </section>

                      As an aside (pun intended), Have a look at using ARIA, Using ARIA in HTML | HTML5 Doctor, it will surely please your tutor.

                      1 person found this helpful
                      • 8. Re: Need help with HTML5 validation errors
                        TheOriginal150mph Level 1

                        Thanks Osgood. I made these changes and the html validates.

                        Thanks Hans. It's a student project and the links don't need to work yet

                        • 9. Re: Need help with HTML5 validation errors
                          osgood_ Level 8

                          TheOriginal150mph wrote:

                           

                          Thanks Osgood. I made these changes and the html validates.

                          Thanks Hans. It's a student project and the links don't need to work yet

                           

                          Excellent. I hope you get some reasonable marks now for your project. I would just echo what Ben mentioned <aside> is a container which is not supposed to be used for the main content so if your tutor knows what they are doing you will probably get marked down on that one.

                           

                          Ideally you really need to make all those <section> tags <article> tags and the <aside> tag the <section> tag,

                           

                          <section id="seasons">

                           

                            <article id="sectionWinter">

                          WINTER

                            </article>

                           

                            <article id="sectionSpring">

                          SPRING

                            </article>

                           

                            <article id="sectionSummer">

                          SUMMER

                            </article>

                           

                           

                           

                          <article id="sectionFall">

                          FALL

                            </article>

                           

                           

                          </section>

                          • 10. Re: Need help with HTML5 validation errors
                            TheOriginal150mph Level 1

                            Thanks Ben

                             

                            1 - I have a tiled image in the body background and the wrapper keeps the content width at 1024 (part of the assignment requirements). I'm not understanding how I'd get that effect deleting my wrapper.

                             

                            2 - The aria looks interesting* and I'll look into it further later but I'd like to stick to the most basic nav#breadcrumb idea.


                            I struggled with various nav constructions before my original post but couldn't get the breadcrumb to look the way it does now. And just now, I tried a few things with your suggestions, but I don't know exactly what goes where and can't make it work. Would appreciate if you could give me more specific examples


                            3 - The aside tag is because this whole page minus the header/footer is actually a sidebar, without the main content being prepared for this assignment. I think that tag works for what it is...(I hope)


                            4 -  I made this change thanks!

                            • 11. Re: Need help with HTML5 validation errors
                              TheOriginal150mph Level 1

                              I'd still appreciate specific examples of how to eliminate the dreaded Untitled Section, now down to two.

                              I'm not even sure what gsnedders is calling a section, shown here  - my wrapper? the aside?

                               

                              Screen shot 2015-10-30 at 12.55.21 PM.png

                              • 12. Re: Need help with HTML5 validation errors
                                TheOriginal150mph Level 1

                                Ok thanks. I made some more posts before I saw this, I'll see if i can make some changes from home here on my lunch break. Unfortunately cant upload updated pages from work so that'll be after 5:30pst but I'm still working on it at the office.

                                 

                                Hey Osgood did you not receive  the PM I sent on 10/10?

                                • 13. Re: Need help with HTML5 validation errors
                                  osgood_ Level 8

                                  TheOriginal150mph wrote:

                                   

                                   

                                  Hey Osgood did you not receive  the PM I sent on 10/10?

                                   

                                  I just located and read it. I don't look at my PM's that much. It's a very kind and genuinely thoughtful email indeed. I appreciate the offer BUT I'm just happy to have been able to help you out a bit through your project.

                                   

                                  Os

                                  • 14. Re: Need help with HTML5 validation errors
                                    TheOriginal150mph Level 1

                                    Outlines, why I hate them

                                    - Every outlining fix I try to validate wrecks my page

                                    - They're causing me stress

                                    - All my divs have an ID, they're not "untitled"

                                     

                                    gnsnedders won't let my page be free... help!

                                    Screen shot 2015-10-30 at 12.55.21 PM.png

                                    • 15. Re: Need help with HTML5 validation errors
                                      BenPleysier Adobe Community Professional & MVP

                                      1. outlines work with heading elements such as h1, h2 etc.

                                      2. sections REQUIRE a heading

                                      3. nav is considered to be a section which in turn requires a heading. A bit odd but that is what it is.

                                       

                                      Having said that, where is the heading for <section id="seasons">? Fix that and you will have one Untitled Section less.

                                       

                                      You can make an unusual step and  give the nav a heading like <h2>Main Navigation</h2>ul and then hide it using CSS, or just put up with the fact that this is an anomaly.

                                      • 16. Re: Need help with HTML5 validation errors
                                        TheOriginal150mph Level 1

                                        thanks

                                        I know it needs some rethinking but I don't know how to code it, how to style the header tag for a main and a sub. I already have a style on the header tag so i need to make a "child" header tag right?


                                        Do you think the nav is returning the Untitled Section?

                                        • 17. Re: Need help with HTML5 validation errors
                                          BenPleysier Adobe Community Professional & MVP

                                          It looks like you changed the markup which now reads correctly for <section id="seasons">

                                           

                                          Now it <article id="seasonsIntroText"> that has no heading (e.g. h3) tag. Article is similar to Section in that they section a part of the document off to be an independent blob of information. It REQUIRES a heading in the same way that Section REQUIRES a heading.


                                          Unfortunately Nav is also regarded as sectioning off a part of the document and as such it REQUIRES a heading. However, pragmatics dictate that we do not supply a heading to the Nav element, hence the outlining will show an Untitled Section. I am not sure, but I have a feeling that this is an anomaly that has to be fixed. In the meantime, user agents have not caught up with outlining, hence we should not be too bothered about it.


                                          To fix the Nav and remove the Untitled bit, see my previous answer.

                                          • 18. Re: Need help with HTML5 validation errors
                                            BenPleysier Adobe Community Professional & MVP

                                            Further to my reply, remove the Article element from

                                            <section id="seasons"><!-- This doc represents a partial page to show a SIDEBAR about "seasons" -->

                                              
                                              
                                            <img id="mainSidebarImg" src="images/BG_sun-earth_215x704.jpg" width="215" height="704" alt="earth and sun">

                                              
                                              
                                            <h2>THE SEASONS: Why they change. How to find yours.</h2>

                                            <article id="seasonsIntroText">

                                               <p>A season is a subdivision of the year, marked by changes in weather, ecology, and hours of daylight. Seasons result from the yearly revolution of the Earth around the Sun and the tilt of the Earth's axis relative to the plane of revolution. In temperate and polar regions, the seasons are marked by changes in the intensity of sunlight that reaches the Earth's surface, variations of which may cause animals to go into hibernation or to migrate, and plants to be dormant.</p>

                                              </article>

                                            and with the heading in the nav element your outline will look like

                                            mine.png

                                            • 19. Re: Need help with HTML5 validation errors
                                              osgood_ Level 8

                                              Remove the article tag from around your introduction paragrpah text and add the id to the <p id="seasonsIntroText"> - thats not really an article its part of the heading above it - so it should looks like:

                                               

                                              <h2>THE SEASONS: Why they change. How to find yours.</h2>

                                              <p id="seasonsIntroText">A season is a subdivision of the year, marked by changes in weather, ecology, and hours of daylight. Seasons result from the yearly revolution of the Earth around the Sun and the tilt of the Earth's axis relative to the plane of revolution. In temperate and polar regions, the seasons are marked by changes in the intensity of sunlight that reaches the Earth's surface, variations of which may cause animals to go into hibernation or to migrate, and plants to be dormant.</p>

                                               

                                              That will give you 1 less undefined section when 'outlining'. As Ben says it appears that the <nav> element needs a 'heading' which is ridiculous. I would just ignore this.

                                              • 20. Re: Need help with HTML5 validation errors
                                                osgood_ Level 8

                                                Ben Pleysier wrote:

                                                 


                                                To fix the Nav and remove the Untitled bit, see my previous answer.

                                                 

                                                 

                                                display: none; will work, but it will still be 'outlined' as Main Navigation - I guess that's ok though better than undefined.

                                                 

                                                <nav>

                                                  <h2>Main Navigation</h2>

                                                      <ul>

                                                          <li><a href="index.html">home</a></li>

                                                          <li><a href="_shop.html">shop</a></li>

                                                          <li><a href="_about.html">about us</a></li>

                                                          <li><a href="_contact.html">contact</a></li>

                                                      </ul>

                                                    </nav>

                                                 

                                                 

                                                Css:

                                                 

                                                nav h2 {

                                                display: none;

                                                }

                                                • 21. Re: Need help with HTML5 validation errors
                                                  BenPleysier Adobe Community Professional & MVP

                                                  It is too ridiculous for words to include NAV as a sectioning element. Which leads me to wonder if GS Snedders is correct when he reports the outline of the document.

                                                  • 22. Re: Need help with HTML5 validation errors
                                                    BenPleysier Adobe Community Professional & MVP

                                                    A previous answer of mine is still being moderated. Great Improvement to the forum!

                                                    • 23. Re: Need help with HTML5 validation errors
                                                      BenPleysier Adobe Community Professional & MVP

                                                      Still having fun here

                                                      mine.png

                                                      • 24. Re: Need help with HTML5 validation errors
                                                        TheOriginal150mph Level 1

                                                        Thanks you guys. I turned the assignment in at midnight, but I'll still study up on your fixes. Starting tomorrow, I have another.

                                                         

                                                        Yeah that moderator thing can take hours....

                                                         

                                                        ps - Thanks in part to your advice and suggestions, I got an A+ in my last course .  I want an A+ in this one too.

                                                        • 25. Re: Need help with HTML5 validation errors
                                                          BenPleysier Adobe Community Professional & MVP

                                                          osgood_ Will you do me a favour and mark this reply as spam. I have shamelessly added this URL Pleysier Web Solutions

                                                           

                                                          See how long it takes to pull this reply.

                                                          • 26. Re: Need help with HTML5 validation errors
                                                            BenPleysier Adobe Community Professional & MVP

                                                            Fingers crossed mate!

                                                            • 27. Re: Need help with HTML5 validation errors
                                                              BenPleysier Adobe Community Professional & MVP

                                                              I am glad that the answer was not a matter of life and death, but it was too late for your project. Still waiting for the Adobe moderators to wake up. More than 50 minutes and approaching the hour.

                                                               

                                                              I will stop monitoring as it is only making me angry.

                                                              • 28. Re: Need help with HTML5 validation errors
                                                                BenPleysier Adobe Community Professional & MVP

                                                                Applause, moderators took from 5:57 till 7:28 to approve my post, more than 1.5 hours! The OP had until his midnight to hand in his project, which was 6:00 my local time.

                                                                 

                                                                It is NOT the fault of the moderators, it IS the fault of the system.

                                                                • 29. Re: Need help with HTML5 validation errors
                                                                  hans-g. Adobe Community Professional & MVP

                                                                  Hi Ben,

                                                                   

                                                                  there are asked some activities - which are supported from staff member Madison Leupp - Re: why do moderator posts with links need to be moderated? Maybe you can follow these threads too. BUT it's still a long way to achieve results faster. I for my part use  - as you did too - screenshots as a first information for the different posters, such as this How to aktivate my Acrobat Standard 8.0?

                                                                   

                                                                  Hans-Günter

                                                                  P.S. Because of my two links this answer will become moderated too, I'm sure.

                                                                  • 30. Re: Need help with HTML5 validation errors
                                                                    BenPleysier Adobe Community Professional & MVP

                                                                    Hi Hans-Günter,

                                                                     

                                                                    Thank you for your reply. Good to know that others have the problem as well.

                                                                    • 31. Re: Need help with HTML5 validation errors
                                                                      hans-g. Adobe Community Professional & MVP

                                                                      Hello Ben,

                                                                      how does a German phrase say: "Geduld bringt Rosen!" AND because my moderator has acceptet my answer, I could delete my "screenshotish" answer.

                                                                      All the best to you!

                                                                      Hans-Günter, from an area where a great sniffle occurs at the moment.

                                                                      • 32. Re: Need help with HTML5 validation errors
                                                                        BenPleysier Adobe Community Professional & MVP

                                                                        Is the great sniffle the result of Oktoberfest? We've just had ours Oktoberfest in the Gardens – Melbourne | Melbourne .

                                                                         

                                                                        Hoping all is well with you and Barbara.

                                                                        • 33. Re: Need help with HTML5 validation errors
                                                                          hans-g. Adobe Community Professional & MVP

                                                                          OT: Hi Ben,

                                                                          unfortunately not - even if we would prefer your obvious conclusion - it's the normal infection, running through our region, the Alpine foothills, Prost und Hatschi! All the best to you, in this case hoping you could over come Halloween in good shapes. Barbara had to look after some of them in her hospital.

                                                                           

                                                                          ... and you had been there at the Oktoberfest, dancing on the tables with huge beer steins in hand and singing "Atemlos durch die Nacht" or "Ein Stern der deinen Namen trägt"? We did, only 1 h from our house!!!

                                                                           

                                                                          All the best to you and your family

                                                                          Hans-Günter

                                                                          1 person found this helpful