Confused with the Div being a child of "a"

Question

After checking my code through a validator, the validator error states that on the div id='carousel-custom' class='carousel slide' data-ride='carousel' data-interval="3000" Element div not allowed as child of element a in this context. (Suppressing further errors from this subtree.)

The rest of the code is the page code

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=dvice=width, initial-scale=1">

    <meta name="keywords" content="Contect Free Art, Design, Grammer">
    <meta name="description" content="Art Created with CDFG">
    <meta name="author" content="Dakotah Hutchinson">

    <title> O'sullivan Clemens</title>

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIIj8LyTjo7mOUStjskKC4pOpQbyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/CDFG.css" rel="stylesheet">
    <script src=" https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/lightbox.js"></script>

    </head><body>

<div class="navbar navbar-default" role="navigation">
        <div class="navbar-header">

        <button type="button" class="navbar-toggle"
        data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

        <h1> O'sullivan Clemens </h1>
        </div>

        <div class="container">-

            <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">

            <li><a href="index.php">Home</a></li>

            <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Galleries... <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="guest_art.php">Guest Art
                    </a></li>
                    <li><a href="carousel.php">Carousel
                    </a></li>
                    <li><a href="contribute.php">Contribute Art
                    </a></li>
                    <!--links.php -->


                </ul>




            <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Resources<b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="links.php">Suggest a Link
                    </a></li>
                    <li><a href="Location.php">Location
                    </a></li>
                    <li><a href="news.php">News
                    </a></li>


                </ul>
            <li><a href="#contact" data-toggle="modal">Contact... </a></li>
            </ul>

            </div>

        </div>


    </div>

Code block location

    <div class="container">
<div class="main">
    <h1> Lawyers <b> Slideshow </b> | <a href="lightbox.php"> Lightbox 
    <!-- Light Box code used from http://bootsnipp.com/snippets/featured/bootstrap-lightbox -->
            <div id='carousel-custom' class='carousel slide' data-ride='carousel' data-interval="3000">

<div class='carousel-outer'>

<div class='carousel-inner'>

<div class="item active">
<img src="images/website1/carousel1.jpg" alt="">
</div>

<div class="item">
<img src="images/website1/carousel2.jpg" alt="">
</div>

<div class="item">
<img src="images/website1/carousel3.jpg" alt="">
</div>

<div class="item">
<img src="images/website1/carousel4.jpg" alt="">
</div>

</div>

<a class='left carousel-control' href='#carousel-custom' data-slide='prev'>
<span class='glyphicon glyphicon-chevron-left'></span>
</a>

<a class='right carousel-control' href='#carousel-custom' data-slide='next'>
<span class='glyphicon glyphicon-chevron-right'></span>
</a>
<!-- Controls -->

</div>

<div class="indicators">

<ol class="carousel-indicators">
<li data-target="#carousel-custom" data-slide-to="0"class='active'><img class='little' src='images/website1/carousel1.jpg' alt="" /></li>
<li data-target="#carousel-custom" data-slide-to="1"class='active'><img class='little' src='images/website1/carousel2.jpg' alt="" /></li>
<li data-target="#carousel-custom" data-slide-to="2"class='active'><img class='little' src='images/website1/carousel3.jpg' alt="" /></li>
<li data-target="#carousel-custom" data-slide-to="3"class='active'><img class='little' src='images/website1/carousel4-old-house.jpg' alt="" /></li>
</ol>

</div>
</div>

</div>

</div>


<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">

        <div class="container">
            <div class="navbar-text pull-left">
                <a href="#"><i class="fab fa-twitter" aria-hidden="true"></i> </a>
            </div>

            <div class="navbar-text pull-right">
                GTT 20XX (CC BY-NC-NC 4.0)
            </div>

        </div>

    </div>

 <!-- Video Sending Email - Form Reset -->

<div class="modal fade" id="contact" tabindex="-1" role="dialog" aria-labelledby="contact" aria-hidden="true">

        <div class="modal-dialog">

            <div class="modal-content">

                <form method="post">

                <div class="modal-header">
                    <button type="button" class="close"
                    data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">

                <h1> Contact </h1>

                <p><span class="error">* required field. </span></p>

                <p>Either <a href="mailto:name@gmail.com">
                email me</a> directly or fil in the form below...</p>

                <p>
                    <b>Name<sup class="error">*</sup>:</b><br/>
                    <input type="text" name="name" size="25" value="" required />
                </p>



                <p>
                    <b>Email<sup class="error">*</sup>:</b><br/>
                    <input type="email" name="email" size="25" value="" required />
                </p>


                <p>
                    <b>Comment<sup class="error">*</sup>:</b><br/>
                    <textarea name="comment" required 
                    ></textarea>
                </p>

                </div>

                <div class="modal-footer">

                    <button class="btn btn-success" type="submit" name="submit">Send</button>

                    <a class="btn btn-warning" data-dismiss="modal">Cancel</a>
                </div>

                </form>

            </div>

        </div>

    </div>

It always helps people trying to answer your questions if you submit the minimum of code that displays your problem and that you format it well. I suspect your problem lies in the first few lines of "**Code block location**". Where are the closing `<\div>` tags for `
` and `
` and why is the first one indented WRT the second? — pjaj, Oct 26 '19 at 14:01
Can you please format your code properly especially when you decided to copy paste your whole HTML? — yqlim, Oct 26 '19 at 19:31

pjaj · Answer 1 · 2019-10-26T19:29:48.717

You do not appear to have closed the 'a' tag on the previous line

<a href="lightbox.php"> Lightbox

Which makes the subsequent div a child of the 'a' tag which is not allowed in most circumstances.

It should probably be

<a href="lightbox.php"> Lightbox </a>

Have a look at the following answer to see what you can and cannot do.

I also don't see where you have closed the <h1> tag on the same line. I know that many browsers are tolerant of unclosed tags but it's bad practice and can lead to unexpected results. If you use a code prettifier (such as the one embedded in editors like Sublime Text) you will see that the indent levels do not line up in your code. Adding the </h1> and </a> tags cures this and gives you

<div class="container">
    <div class="main">
        <h1> Lawyers</h1> <b> Slideshow </b> | <a href="lightbox.php"> Lightbox</a>
        <!-- Light Box code used from http://bootsnipp.com/snippets/featured/bootstrap-lightbox -->
        <div id='carousel-custom' class='carousel slide' data-ride='carousel' data-interval="3000">
            <div class='carousel-outer'>
                <div class='carousel-inner'>
                    <div class="item active">
                        <img src="images/website1/carousel1.jpg" alt="">
                    </div>
                    <div class="item">
                        <img src="images/website1/carousel2.jpg" alt="">
                    </div>
                    <div class="item">
                        <img src="images/website1/carousel3.jpg" alt="">
                    </div>
                    <div class="item">
                        <img src="images/website1/carousel4.jpg" alt="">
                    </div>
                </div>
                <a class='left carousel-control' href='#carousel-custom' data-slide='prev'>
                    <span class='glyphicon glyphicon-chevron-left'></span>
                </a>
                <a class='right carousel-control' href='#carousel-custom' data-slide='next'>
                    <span class='glyphicon glyphicon-chevron-right'></span>
                </a>
                <!-- Controls -->
            </div>
            <div class="indicators">
                <ol class="carousel-indicators">
                    <li data-target="#carousel-custom" data-slide-to="0" class='active'><img class='little' src='images/website1/carousel1.jpg' alt="" /></li>
                    <li data-target="#carousel-custom" data-slide-to="1" class='active'><img class='little' src='images/website1/carousel2.jpg' alt="" /></li>
                    <li data-target="#carousel-custom" data-slide-to="2" class='active'><img class='little' src='images/website1/carousel3.jpg' alt="" /></li>
                    <li data-target="#carousel-custom" data-slide-to="3" class='active'><img class='little' src='images/website1/carousel4-old-house.jpg' alt="" /></li>
                </ol>
            </div>
        </div>
    </div>
</div>

for the first half of Code block location

Confused with the Div being a child of "a"

1 Answers1