"Section" closing tag found, but there were open elements

Asked

Viewed 47 times

0

Good afternoon guys, I am trying to master the use of HTML5, and during the attempt to correct errors of my HTML5 page I find myself in the error described in the page title and I can’t understand what it is, as I understand it as an open statement of error. Here is the code:

    <div class="under">
      <section>
        <div class="slides2">
          <div class="bar3" id="bar3"></div>
          <div class="bartxt3" id="bartxt3">
            <legend>Mais Procurados</legend>
          </div>
          <div class="bubblebox">
            <div id="bubbles">
              <div onclick="bubbles(0); clearInterval(intrvl);" style="background:#999;" active></div>
              <div onclick="bubbles(1); clearInterval(intrvl);" style="background:#999;"></div>
              <div onclick="bubbles(2); clearInterval(intrvl);" style="background:#999;"></div>
              <div onclick="bubbles(3); clearInterval(intrvl);" style="background:#999;"></div>
            </div>
            <hr>
            <div id="bubblecontent">
              <h1><span class="badge badge-secondary">Mais procurados</span></h1>
              <p>Confira os produtos mais procurados na loja Plug!</p>
              <script>
                function _(x){return document.getElementById(x);}
                // Variables for bubble array, bubble index, and the setInterval() variable
                var ba, bi=0, intrvl;
                // bca - Bubble Content Array. Put your content here.
                var bca = [
                    '<h2>Galaxy S5</h2><p style="margin-left:1px;">R$0000,00</p><img src="c1.jpg" alt="test" style="margin-left:1px;" active>',
                  '<h2>Asus Zenfone GO</h2><p style="margin-left:1px;">R$0000,00</p><img src="c2.jpg" alt="test" style="margin-left:1px;">',
                  '<h2>iPhone X</h2><p style="margin-left:1px;">R$0000,00</p><img src="c3.jpg" alt="test" style="margin-left:1px;">',
                  '<h2>iPad 2019</h2><p style="margin-left:1px;">R$0000,00</p><img src="d2.jpg" alt="test" style="margin-left:px; width:200px;">'
                ];
                // This function is triggered by the bubbleSlide() function below
                function bubbles(bi){
                  // Fade-out the content
                  _("bubblecontent").style.opacity = 0;
                  // Loop over the bubbles and change all of their background color
                  for(var i=0; i < ba.length; i++){
                    ba[i].style.background = "rgba(0,0,0,.1)";
                  }
                  // Change the target bubble background to be darker than the rest
                  ba[bi].style.background = "#999";
                  // Stall the bubble and content changing for just 300ms
                  setTimeout(function(){
                    // Change the content
                    _("bubblecontent").innerHTML = bca[bi];
                    // Fade-in the content
                    _("bubblecontent").style.opacity = 1;
                  }, 300);
                }
                // This function is set to run every 5 seconds(5000ms)
                function bubbleSlide(){
                  bi++; // Increment the bubble index number
                  // If bubble index number is equal to the amount of total bubbles
                  if(bi == ba.length){
                    bi = 0; // Reset the bubble index to 0 so it loops back at the beginning
                  }
                  // Make the bubbles() function above run
                  bubbles(bi);
                }
                // Start the application up when document is ready
                window.addEventListener("load", function(){
                  // Get the bubbles array
                  ba = _("bubbles").children;
                  // Set the interval timing for the slideshow speed
                  intrvl = setInterval(bubbleSlide, 5000);
                });
              </script>
            </div>
          </div>
        </section>

Reinforcing that the error accused is about Section

  • Guy here made no mistake, what I noticed is that you have two <div> which are not closed. Usually the Browser itself closes those open Ivs but may give some error... Now speaking Semantically to your <section> should be out of the div under or you can turn it into <article> to see if it solves.

2 answers

1


You didn’t close the <div class="under"> (which was opened before the section) and the <div class="slides2"> (right after the opening of the section).

View the indented code correctly and with the appropriate divs closed:

<div class="under">
   <section>
      <div class="slides2">
         <div class="bar3" id="bar3"></div>
         <div class="bartxt3" id="bartxt3">
            <legend>Mais Procurados</legend>
         </div>
         <div class="bubblebox">
            <div id="bubbles">
               <div onclick="bubbles(0); clearInterval(intrvl);" style="background:#999;" active></div>
               <div onclick="bubbles(1); clearInterval(intrvl);" style="background:#999;"></div>
               <div onclick="bubbles(2); clearInterval(intrvl);" style="background:#999;"></div>
               <div onclick="bubbles(3); clearInterval(intrvl);" style="background:#999;"></div>
            </div>
            <hr>
            <div id="bubblecontent">
               <h1><span class="badge badge-secondary">Mais procurados</span></h1>
               <p>Confira os produtos mais procurados na loja Plug!</p>
               <script>
               function _(x){return document.getElementById(x);}
               // Variables for bubble array, bubble index, and the setInterval() variable
               var ba, bi=0, intrvl;
               // bca - Bubble Content Array. Put your content here.
               var bca = [
                  '<h2>Galaxy S5</h2><p style="margin-left:1px;">R$0000,00</p><img src="c1.jpg" alt="test" style="margin-left:1px;" active>',
                  '<h2>Asus Zenfone GO</h2><p style="margin-left:1px;">R$0000,00</p><img src="c2.jpg" alt="test" style="margin-left:1px;">',
                  '<h2>iPhone X</h2><p style="margin-left:1px;">R$0000,00</p><img src="c3.jpg" alt="test" style="margin-left:1px;">',
                  '<h2>iPad 2019</h2><p style="margin-left:1px;">R$0000,00</p><img src="d2.jpg" alt="test" style="margin-left:px; width:200px;">'
               ];
               // This function is triggered by the bubbleSlide() function below
               function bubbles(bi){
                  // Fade-out the content
                  _("bubblecontent").style.opacity = 0;
                  // Loop over the bubbles and change all of their background color
                  for(var i=0; i < ba.length; i++){
                     ba[i].style.background = "rgba(0,0,0,.1)";
                  }
                  // Change the target bubble background to be darker than the rest
                  ba[bi].style.background = "#999";
                  // Stall the bubble and content changing for just 300ms
                  setTimeout(function(){
                     // Change the content
                     _("bubblecontent").innerHTML = bca[bi];
                     // Fade-in the content
                     _("bubblecontent").style.opacity = 1;
                  }, 300);
               }
               // This function is set to run every 5 seconds(5000ms)
               function bubbleSlide(){
                  bi++; // Increment the bubble index number
                  // If bubble index number is equal to the amount of total bubbles
                  if(bi == ba.length){
                     bi = 0; // Reset the bubble index to 0 so it loops back at the beginning
                  }
                  // Make the bubbles() function above run
                  bubbles(bi);
               }
               // Start the application up when document is ready
               window.addEventListener("load", function(){
                  // Get the bubbles array
                  ba = _("bubbles").children;
                  // Set the interval timing for the slideshow speed
                  intrvl = setInterval(bubbleSlide, 5000);
               });
               </script>
            </div>
         </div>
      </div>
   </section>
</div>
  • that’s right, thank you!

0

Try that code

    <section>
        <div class="slides2">
            <div class="bar3" id="bar3"></div>
            <div class="bartxt3" id="bartxt3">
                <legend>Mais Procurados</legend>
            </div>
            <div class="bubblebox">
                <div id="bubbles">
                    <div onclick="bubbles(0); clearInterval(intrvl);" style="background:#999;" active></div>
                    <div onclick="bubbles(1); clearInterval(intrvl);" style="background:#999;"></div>
                    <div onclick="bubbles(2); clearInterval(intrvl);" style="background:#999;"></div>
                    <div onclick="bubbles(3); clearInterval(intrvl);" style="background:#999;"></div>
                </div>
                <hr>
                <div id="bubblecontent">
                    <h1><span class="badge badge-secondary">Mais procurados</span></h1>
                    <p>Confira os produtos mais procurados na loja Plug!</p>
                    <script>
                        function _(x) { return document.getElementById(x); }
                        // Variables for bubble array, bubble index, and the setInterval() variable
                        var ba, bi = 0, intrvl;
                        // bca - Bubble Content Array. Put your content here.
                        var bca = [
                            '<h2>Galaxy S5</h2><p style="margin-left:1px;">R$0000,00</p><img src="c1.jpg" alt="test" style="margin-left:1px;" active>',
                            '<h2>Asus Zenfone GO</h2><p style="margin-left:1px;">R$0000,00</p><img src="c2.jpg" alt="test" style="margin-left:1px;">',
                            '<h2>iPhone X</h2><p style="margin-left:1px;">R$0000,00</p><img src="c3.jpg" alt="test" style="margin-left:1px;">',
                            '<h2>iPad 2019</h2><p style="margin-left:1px;">R$0000,00</p><img src="d2.jpg" alt="test" style="margin-left:px; width:200px;">'
                        ];
                        // This function is triggered by the bubbleSlide() function below
                        function bubbles(bi) {
                            // Fade-out the content
                            _("bubblecontent").style.opacity = 0;
                            // Loop over the bubbles and change all of their background color
                            for (var i = 0; i < ba.length; i++) {
                                ba[i].style.background = "rgba(0,0,0,.1)";
                            }
                            // Change the target bubble background to be darker than the rest
                            ba[bi].style.background = "#999";
                            // Stall the bubble and content changing for just 300ms
                            setTimeout(function () {
                                // Change the content
                                _("bubblecontent").innerHTML = bca[bi];
                                // Fade-in the content
                                _("bubblecontent").style.opacity = 1;
                            }, 300);
                        }
                        // This function is set to run every 5 seconds(5000ms)
                        function bubbleSlide() {
                            bi++; // Increment the bubble index number
                            // If bubble index number is equal to the amount of total bubbles
                            if (bi == ba.length) {
                                bi = 0; // Reset the bubble index to 0 so it loops back at the beginning
                            }
                            // Make the bubbles() function above run
                            bubbles(bi);
                        }
                        // Start the application up when document is ready
                        window.addEventListener("load", function () {
                            // Get the bubbles array
                            ba = _("bubbles").children;
                            // Set the interval timing for the slideshow speed
                            intrvl = setInterval(bubbleSlide, 5000);
                        });
                    </script>
                </div>
            </div>
        </div>
    </section>

The issue with Section is solved, but this tag cannot be placed inside a tag .

Browser other questions tagged

You are not signed in. Login or sign up in order to post.