Invalid HTML Unclosed Element
Question
I am getting the following validation errors:
Line 63, Column 7: End tag for body seen but there were unclosed elements.
</body>
Line 19, Column 25: Unclosed element section.<section id="content"
I am using a HTML5 validator and I suspect this error is why my sidebar is not aligning.
CSS:
html{
height:100%;
}
body{
width:960px;
height:100%;
margin:0 auto;
}
p,h1,h2{
margin:25px;
}
header{
width:100%;
border-bottom:1px solid green;
}
header #logo{
height:90px;
width:150px;
border:1px solid red;
}
header nav{
width:100%;
height:45px;
border:1px solid red;
}
header nav ul{
float:left;
}
header nav ul li{
display:inline;
}
header nav li a{
float:left;
text-decoration: none;
margin-left:15px;
}
#content{
float:left;
width:705px;
height:100%;
border:1px solid red;
}
#showcase{
position: relative;
width:705px;
padding:20px 0px 20px 20px;
}
#showcase ul{
float:left;
display:block;
margin-left:-20px;
margin-bottom:20px;
width:200px;
border:1px solid green;
list-style:none;
}
#showcase ul li h3{
margin: 0 0 0 -15px;
letter-spacing: -0.25px;
margin: 4px 0px 3px 0px;
text-indent: 3px;
}
#showcase ul li h3 a {
color: #010101;
text-decoration: none;
}
#showcase ul li h3 a:hover {
color: #4fbcd8;
}
#showcase ul p {
height:70px;
margin:0 0 0 -15px;
line-height: 1.6em;
padding-left: 3px;
}
#showcase ul img{
width:175px;
height:137px;
background-color:pink;
}
#sidebar{
float:right;
height:100%;
width:225px;
border:1px solid red;
}
#box_one, #box_two, #box_three{
height:100px;
border-bottom:1px solid #ccc;
}
footer{
clear:both;
height:24px;
border:1px solid red;
}
HTML:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Template 2011</title>
<link rel="stylesheet" href="_assets/css/style.css">
</head>
<body>
<header>
<div id="logo">Template Here</div>
<nav>
<ul>
<li><a href="#">Page One</a></li>
<li><a href="#">Page Two</a></li>
<li><a href="#">Page Three</a></li>
<li><a href="#">Page Four</a></li>
</ul>
</nav>
</header>
<section id="content">
<h1>Main Content Section</h1>
<p>Content</p>
<section id="showcase">
<h1>My Work</h1>
<ul><!-- Showcase One -->
<li>
<a href="#"><img src="#" alt="#" /></a>
<br/>
<h3><a href="#">Photography</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem massa, auctor ac tempor at, congue quis erat. Fusce at adipiscing magna. Duis iaculis quam vel ante aliquam eget faucibus nisi pretium. Aenean varius tempus vulputate. Cras ipsum nisi, vehicula id aliquam a, blandit iaculis felis. Sed viverra diam purus. Nam tempor, risus feugiat auctor tristique, arcu massa gravida diam, scelerisque luctus dolor magna eget sapien.</p>
</li>
</ul>
<ul><!-- Showcase Two -->
<li>
<a href="#"><img src="#" alt="#" /></a>
<br/>
<h3><a href="#">Photography</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem massa, auctor ac tempor at, congue quis erat. Fusce at adipiscing magna. Duis iaculis quam vel ante aliquam eget faucibus nisi pretium. Aenean varius tempus vulputate. Cras ipsum nisi, vehicula id aliquam a, blandit iaculis felis. Sed viverra diam purus. Nam tempor, risus feugiat auctor tristique, arcu massa gravida diam, scelerisque luctus dolor magna eget sapien.</p>
</li>
</ul>
<ul><!-- Showcase Three -->
<li>
<a href="#"><img src="#" alt="#" /></a>
<br/>
<h3><a href="#">Photography</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem massa, auctor ac tempor at, congue quis erat. Fusce at adipiscing magna. Duis iaculis quam vel ante aliquam eget faucibus nisi pretium. Aenean varius tempus vulputate. Cras ipsum nisi, vehicula id aliquam a, blandit iaculis felis. Sed viverra diam purus. Nam tempor, risus feugiat auctor tristique, arcu massa gravida diam, scelerisque luctus dolor magna eget sapien.</p>
</li>
</ul>
</section>
<section id="sidebar">
<div id="box_one">
<p>Box One</p>
</div>
<div id="box_two">
<p>Box Two</p>
</div>
<div id="box_three">
<p>Box Three</p>
</div>
</section>
<footer>
<p>This is the footer</p>
</footer>
</body>
2 answers
solution1
1 ACCPTED 2011-09-18 06:29:49
add a </section> closing-tag on line 48 just above the other </section> . it is missing there
solution2
0 2011-09-18 06:29:08
The following portion of code seems to be missing an end section tag:
<p>Content</p>
<section id="showcase">
<h1>My Work</h1>
<ul><!-- Showcase One -->
<li>
<a href="#"><img src="#" alt="#" /></a>
<br/>
<h3><a href="#">Photography</a></h3>
<p>Lorem ipsum...</p>
</li>
</ul>
<ul><!-- Showcase Two -->
<li>
<a href="#"><img src="#" alt="#" /></a>
<br/>
<h3><a href="#">Photography</a></h3>
<p>Lorem ipsum....</p>
</li>
</ul>
<ul><!-- Showcase Three -->
<li>
<a href="#"><img src="#" alt="#" /></a>
<br/>
<h3><a href="#">Photography</a></h3>
<p>Lorem ipsum...</p>
</li>
</ul>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Trouble with Unclosed element form
Fixing unclosed HTML tags
Regex for unclosed HTML tags
How to find unclosed html tags or make the weird styling as a result contained in one element?
Unclosed lateral HTML table border
Java to Find Unclosed HTML Tags
Parsing html with “unclosed tags” in java
unclosed html tag inside xslt
How to ignore unclosed tags in XML or HTML?
Unclosed / misnested HTML tags extend past their parent
Related Tags