Question posted in 
I’m new to Spring framework, so I’m using spring-boot.
So a portion of HTML page, homepage.html looks like:
** Update: posting the complete HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<meta name="description" content="A one page template very useful on any kind of website niche"></meta>
<meta name="author" content="Bootstrap Wizard"></meta>
<link rel="shortcut icon" href="img/favicon.ico"></link>
<title>Homepage - Multipage Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet"></link>
<!-- Google Font -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,800" rel="stylesheet" type="text/css"></link>
<!-- Animate -->
<link href="css/animate/animate.css" rel="stylesheet"></link>
<!-- Fontawesome-->
<link rel="stylesheet" href="css/font-awesome.min.css"></link>
<!-- Owl Carousel -->
<link href="css/owl-carousel/owl.carousel.css" rel="stylesheet"></link>
<link href="css/owl-carousel/owl.theme.css" rel="stylesheet"></link>
<!-- Magnific Popup -->
<link href="css/magnific-popup/magnific-popup.css" rel="stylesheet" ></link>
<!-- Main-Style -->
<link href="css/style.css" rel="stylesheet"></link>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- wrapper -->
<div class="wrapper multipage">
<div class="preloader">
<div class="loader-item">
<img src="images/loading.gif" alt="loader"></img>
</div>
</div>
<!-- Navigation -->
<nav class="navbar navbar-custom nav-dark navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/logo.png" alt="bootstrapwizard logo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="top-nav">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="homepage.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="dropdown">
<a href="shortcodes.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Shortcodes <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="shortcodes.html#typo">Typography</a></li>
<li><a href="shortcodes.html#icons">icons</a></li>
<li><a href="shortcodes.html#counter">Counter</a></li>
<li><a href="coming-soon.html">Coming Soon</a></li>
</ul>
</li>
<li><a href="index.html">Back to main</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- ./navigation -->
<!-- Slider -->
<div id="slider" class="fullSection">
<div class="container">
<!-- fullscreen-slider -->
<div id="fullscreen-slider" class="carousel slide wow bounceIn showdelay4" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#fullscreen-slider" data-slide-to="0" class="active"></li>
<li data-target="#fullscreen-slider" data-slide-to="1"></li>
<li data-target="#fullscreen-slider" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="slider-caption">
<i class="fa fa-cogs"></i>
<h2> MultiPurpose Theme</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper diam nec augue semper, in dignissim elit hendrerit. Quisque tempus arcu vulputate metus convallis elementum. Aenean rhoncus rutrum quam ut semper. </p>
<div class="page-scroll">
<a href="#icon-box" class="btn btn-custom btn-lg">Learn More</a>
</div>
</div>
</div>
<div class="item">
<div class="slider-caption">
<i class="fa fa-cogs"></i>
<h2> With LESS</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper diam nec augue semper, in dignissim elit hendrerit. Quisque tempus arcu vulputate metus convallis elementum. Aenean rhoncus rutrum quam ut semper. </p>
<div class="page-scroll">
<a href="#icon-box" class="btn btn-custom btn-lg">Learn More</a>
</div>
</div>
</div>
<div class="item">
<div class="slider-caption">
<i class="fa fa-cogs"></i>
<h2> With LESS</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper diam nec augue semper, in dignissim elit hendrerit. Quisque tempus arcu vulputate metus convallis elementum. Aenean rhoncus rutrum quam ut semper. </p>
<div class="page-scroll">
<a href="#icon-box" class="btn btn-custom btn-lg">Learn More</a>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#fullscreen-slider" role="button" data-slide="prev">
<!-- <span class="glyphicon glyphicon-chevron-left"></span> -->
<span class="fa fa-chevron-left"></span>
</a>
<a class="right carousel-control" href="#fullscreen-slider" role="button" data-slide="next">
<!-- <span class="glyphicon glyphicon-chevron-right"></span> -->
<span class="fa fa-chevron-right"></span>
</a>
</div>
<!-- fullscreen-slider -->
</div>
</div>
<!-- ./Slider -->
<!-- section -->
<div class="section">
<div class="container">
<div class="section-heading dark">
<h2>Our Services</h2>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="icon-box text-center wow fadeInLeft showdelay2">
<img src="images/icon1.png" alt="icon1" /></img>
<h3>Android Image</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing metus elit Quisque rutrum pellentesque imperdiet.</p>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="icon-box text-center wow fadeInUp showdelay2">
<img src="images/icon2.png" alt="icon2" /></img>
<h3>Apple Image</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing metus elit Quisque rutrum pellentesque imperdiet.</p>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="icon-box text-center wow fadeInRight showdelay2">
<img src="images/icon3.png" alt="icon3" /></img>
<h3>RSS Image</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing metus elit Quisque rutrum pellentesque imperdiet.</p>
</div>
</div>
</div>
<!-- ./row -->
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="icon-box text-center wow fadeInLeft showdelay2">
<i class="fa fa-android"></i>
<h3>Android Icon</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing metus elit Quisque rutrum pellentesque imperdiet.</p>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="icon-box text-center wow fadeInUp showdelay2">
<i class="fa fa-apple"></i>
<h3>Apple Icon</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing metus elit Quisque rutrum pellentesque imperdiet.</p>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="icon-box text-center wow fadeInRight showdelay2">
<i class="fa fa-rocket"></i>
<h3>Rocket Icon</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing metus elit Quisque rutrum pellentesque imperdiet.</p>
</div>
</div>
</div>
<!-- ./row -->
</div>
</div>
<!-- ./section -->
<!-- section -->
<div class="section bg-gray">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<h2>Why Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel ultrices ligula. Curabitur consectetur lobortis velit, eget semper quam fringilla ut. Vestibulum tristique vestibulum mauris eu mattis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel ultrices ligula. Curabitur consectetur lobortis velit, eget semper quam fringilla ut. Vestibulum tristique vestibulum mauris eu mattis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel ultrices ligula. Curabitur consectetur lobortis velit, eget semper quam fringilla ut. </p>
<button type="button" class="btn btn-sm btn-info">Readmore</button>
</div>
<div class="col-md-6 col-sm-6">
<h2>Other Services</h2>
<div class="panel-group dark" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="collapsed">
First Accordion Heading
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel ultrices ligula. Curabitur consectetur lobortis velit, eget semper quam fringilla ut. Vestibulum tristique vestibulum mauris eu mattis.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="collapsed">
Second Accordion Heading
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel ultrices ligula. Curabitur consectetur lobortis velit, eget semper quam fringilla ut. Vestibulum tristique vestibulum mauris eu mattis.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" class="">
Third Accordion Heading
</a>
</div>
<div id="collapseThree" class="panel-collapse collapse in">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel ultrices ligula. Curabitur consectetur lobortis velit, eget semper quam fringilla ut. Vestibulum tristique vestibulum mauris eu mattis.
</div>
</div>
</div>
</div>
<!-- end Accordion -->
</div>
</div>
<!-- /row -->
</div>
</div>
<!-- ./section -->
<!-- section -->
<div class="section">
<div class="container">
<div class="section-heading">
<h2>Our Works</h2>
</div>
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="pic wow flipInX showdelay2">
<a href="images/img1.jpg" class="gallery-item"><img class="img-responsive img-thumbnail" src="images/img1.jpg" alt=""></img><div class="img_overlay"></div>
</a>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="pic wow flipInX showdelay2">
<a href="images/img2.jpg" class="gallery-item"><img class="img-responsive img-thumbnail" src="images/img2.jpg" alt=""></img><div class="img_overlay"></div></a>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="pic wow flipInX showdelay2">
<a href="images/img3.jpg" class="gallery-item"><img class="img-responsive img-thumbnail" src="images/img3.jpg" alt=""></img><div class="img_overlay"></div></a>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="pic wow flipInX showdelay2">
<a href="images/img4.jpg" class="gallery-item"><img class="img-responsive img-thumbnail" src="images/img4.jpg" alt=""></img><div class="img_overlay"></div></a>
</div>
</div>
</div>
<!-- /row -->
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="pic wow flipInX showdelay2">
<a href="images/img5.jpg" class="gallery-item"><img class="img-responsive img-thumbnail" src="images/img5.jpg" alt=""></img><div class="img_overlay"></div></a>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="pic wow flipInX showdelay2">
<a href="images/img6.jpg" class="gallery-item"><img class="img-responsive img-thumbnail" src="images/img6.jpg" alt=""></img><div class="img_overlay"></div></a>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="pic wow flipInX showdelay2">
<a href="images/img7.jpg" class="gallery-item"><img class="img-responsive img-thumbnail" src="images/img7.jpg" alt=""></img><div class="img_overlay"></div></a>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="pic wow flipInX showdelay2">
<a href="images/img8.jpg" class="gallery-item"><img class="img-responsive img-thumbnail" src="images/img8.jpg" alt=""></img><div class="img_overlay"></div></a>
</div>
</div>
</div>
<!-- /row -->
</div>
</div>
<!-- ./section -->
<!-- section -->
<div class="section bg-gray">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-3">
<div class="count-box dark wow fadeInUp showdelay2">
<i class="fa fa-smile-o"></i>
<h4>Happy Clients</h4>
<span class="count">1,000</span>
</div>
</div>
<div class="col-md-3 col-sm-3">
<div class="count-box dark wow fadeInUp showdelay2">
<i class="fa fa-code"></i>
<h4>Working Hours</h4>
<span class="count">5,930</span>
</div>
</div>
<div class="col-md-3 col-sm-3">
<div class="count-box dark wow fadeInUp showdelay2">
<i class="fa fa-coffee"></i>
<h4>Coffee Consumed</h4>
<span class="count">4,802</span>
</div>
</div>
<div class="col-md-3 col-sm-3">
<div class="count-box dark wow fadeInUp showdelay2">
<i class="fa fa-thumbs-o-up"></i>
<h4>Solved Tickets</h4>
<span class="count">385</span>
</div>
</div>
</div>
<!-- ./row -->
</div>
</div>
<!-- ./section -->
<!-- section -->
<div class="section">
<div class="container">
<div class="section-heading">
<h2>Latest News</h2>
</div>
<!-- latest-news -->
<div class="row">
<div class="col-md-3 col-sm-3">
<div class="featured-box item text-center">
<img class="img-responsive img-thumbnail" src="images/img5.jpg" alt=""></img>
<div class="featured-info">
<h3>Transportation</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing metus elit.</p>
<a href="#" class="btn btn-info">Read More</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3">
<div class="featured-box item text-center">
<img class="img-responsive img-thumbnail" src="images/img6.jpg" alt=""></img>
<div class="featured-info">
<h3>Transportation</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing metus elit.</p>
<a href="#" class="btn btn-info">Read More</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3">
<div class="featured-box item text-center">
<img class="img-responsive img-thumbnail" src="images/img7.jpg" alt=""></img>
<div class="featured-info">
<h3>Transportation</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing metus elit.</p>
<a href="#" class="btn btn-info">Read More</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3">
<div class="featured-box item text-center">
<img class="img-responsive img-thumbnail" src="images/img8.jpg" alt=""></img>
<div class="featured-info">
<h3>Transportation</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing metus elit.</p>
<a href="#" class="btn btn-info">Read More</a>
</div>
</div>
</div>
</div>
<!-- ./latest-news -->
</div>
</div>
<!-- ./section -->
<!-- section -->
<div class="section bg-gray">
<div class="container">
<div class="row">
<div class="col-md-9">
<h3>This is a Callout Section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel ultrices ligula. Curabitur consectetur lobortis velit,</p>
</div>
<div class="col-md-3">
<a href="#" class="btn btn-info btn-lg btn-callout">Buy me Now!</a>
</div>
</div>
</div>
</div>
<!-- ./section -->
<!-- footer -->
<footer class="footer section">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-3 wow fadeInUp showdelay2">
<h3>About Us</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel ultrices ligula. Curabitur consectetur lobortis velit, eget semper quam fringilla ut. </p>
<button type="button" class="btn btn-sm btn-custom">Readmore.. </button>
</div>
<div class="col-md-3 col-sm-3 wow fadeInUp showdelay2">
<h3>Pages Links</h3>
<ul class="arrow">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Career</a></li>
<li><a href="#">Contact </a></li>
</ul>
</div>
<div class="col-md-3 col-sm-3 wow fadeInUp showdelay2">
<h3>Be Social</h3>
<div class="social">
<ul class="social-link">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
</ul>
</div>
</div>
<!-- address -->
<div class="col-md-3 col-sm-3">
<div class="address wow fadeInUp showdelay2">
<h3>Address</h3>
<ul class="unstyled">
<li><i class="fa fa-map-marker"></i>25th Street, Suite 2 New York NY 10887</li>
<li><i class="fa fa-envelope"></i>[email protected]</li>
<li><i class="fa fa-phone"></i>+40 (0) 231 1234 567</li>
<li><i class="fa fa-fax"></i>+40 (0) 123 1234 568</li>
</ul>
</div>
</div>
<!-- ./address -->
</div>
<!-- ./row -->
</div>
</footer>
<!-- ./footer -->
<!-- bottom-footer -->
<div class="bottom-footer">
<div class="container">
<div class="text-center">
© 2015 Fullscreen | <a href="http://bootstrapwizard.info">Bootstrapwizard.info </a>
</div>
</div>
</div>
<!-- ./bottom-footer -->
</div>
<!-- ./wrapper -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- easing -->
<script src="js/easing/jquery.easing.1.3.js"></script>
<!-- wow -->
<script src="js/wow/wow.min.js"></script>
<!-- backstretch -->
<script src="js/backstretch/jquery.backstretch.min.js"></script>
<!-- owl carousel -->
<script src="js/owl-carousel/owl.carousel.js"></script>
<!-- Magnific Popup -->
<script src="js/magnific-popup/jquery.magnific-popup.js"></script>
<!-- waypoints -->
<script src="js/waypoints/waypoints.js"></script>
<!-- counterup -->
<script src="js/counterup/jquery.counterup.js"></script>
<!-- countdown -->
<script src="js/countdown/jquery.countdown.min.js"></script>
<!-- UIToTop -->
<script src="js/uitotop/jquery.ui.totop.min.js"></script>
<!-- jqbootstrapvalidator -->
<script src="js/jqbootstrapvalidation/jqBootstrapValidation.js"></script>
<!-- main -->
<script src="js/main.js"></script>
</body>
</html>
however when I run mvn spring-boot:run I’m getting:
2015-12-12 00:03:25.602 INFO 4291 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet : FrameworkServlet 'dispatcherServlet': initialization completed in 16 ms
2015-12-12 00:03:25.869 ERROR 4291 --- [nio-8080-exec-1] o.thymeleaf.templateparser.ErrorHandler : [THYMELEAF][http-nio-8080-exec-1] Fatal error during parsing
org.xml.sax.SAXParseException: The element type "a" must be terminated by the matching end-tag "</a>".
at com.sun.org.apache.xerces.internal.util.ErrorHandlerWrapper.createSAXParseException(ErrorHandlerWrapper.java:203) ~[na:1.8.0_45]
at com.sun.org.apache.xerces.internal.util.ErrorHandlerWrapper.fatalError(ErrorHandlerWrapper.java:177) ~[na:1.8.0_45]
at com.sun.org.apache.xerces.internal.impl.XMLErrorReporter.reportError(XMLErrorReporter.java:441) [na:1.8.0_45]
at com.sun.org.apache.xerces.internal.impl.XMLErrorReporter.reportError(XMLErrorReporter.java:368) [na:1.8.0_45]
at com.sun.org.apache.xerces.internal.impl.XMLScanner.reportFatalError(XMLScanner.java:1436) [na:1.8.0_45]
Whitelabel Error Page
This application has no explicit mapping for /error, so you are seeing this as a fallback.
Sat Dec 12 00:03:25 PST 2015
There was an unexpected error (type=Internal Server Error, status=500).
Exception parsing document: template="homepage", line 60 - column 67
which makes no sense for me. Line 60 is the <a> tag. How can I solve this?
Update:
After commenting out the line 60, I’m seeing:
Sat Dec 12 00:15:26 PST 2015
There was an unexpected error (type=Internal Server Error, status=500).
Exception parsing document: template="homepage", line 166 - column 53
2015-12-12 00:15:26.313 ERROR 5385 --- [nio-8080-exec-1] o.thymeleaf.templateparser.ErrorHandler : [THYMELEAF][http-nio-8080-exec-1] Fatal error during parsing
org.xml.sax.SAXParseException: The element type "div" must be terminated by the matching end-tag "</div>".
2
Answers
I note you have some error tag like this:
Try to move last backslash of img
/you should use it like this..></img>or like this../>.Sometimes the error isn’t explicitly in the tag that the error says it is. It can be in some tag that is inside of the tag that the error says it occurred in.
The exact thing that happened in your example. The
<a>tag was OK, but the<img>tag inside of it wasn’t closed properly.