I currently have following code structure of my JSP pages:
MyPage.jsp
<jsp:include page="header.jsp"/>
Specific page content
<jsp:include page="footer.jsp"/>
However, this means that the header and footer code do not have a correct HTML structure. For example, this is simplified header and footer code:
header.jsp
<!DOCTYPE html>
<html lang="en">
<head>
<title>${param.pageTitle}</title>
</head>
<body>
<div class="container" style="margin-top: 80px;">
footer.jsp
</div>
</body>
</html>
As a result, IDE gives a warning about "missing start tag" / "missing end tag". I don't feel good about disabling the warning entirely since it may find legitimate issues with HTML structure.
Is there a cleaner way to structure the JSP code so that I can still reuse header and footer code in some good way?
2 Answers
Might be this is helpful. Please have a look.
\home.jsp // Base Page
\parts\meta.jsp // To hold page meta information. Useful when working with SEO
\parts\header.jsp // Resources CSS, images,
\parts\footer.jsp // Resources JS
Remember
Use <%@include> because it is static include and <jsp:include> is dynamic include.
When you use <jsp:include> the file will be included at runtime.
When you use <%@include> file will be included at compile time.
So here is code snippet.
1) home.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<html>
<head>
<%@ include file="parts/meta.jsp" %>
<title>Home Page</title>
<%@ include file="parts/header.jsp" %>
</head>
<body>
<div class="view">
<div class="pages">
<jsp:include page="parts/page-body.jsp"></jsp:include>
</div>
</div>
<%@ include file="parts/footer.jsp" %>
</body>
</html>
2) meta.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
3) header.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<link href="" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/my-page.css">
<link rel="stylesheet" href="css/my-icon.css">
<link rel="icon" href="img/icon.png">
4) footer.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<script type="text/javascript" src="js/my-app.js"></script>
<script type="text/javascript" src="js/my-app-service.js"></script>
Thanks :)
What you are doing is complete wrong way of doing programming. We use include tag to insert a complete page in another page. We do not divide a page in parts. So the correct approach should be to include two separate jsp pages as header and footer in your main jsp page without distorting it. That is your MyPage.jsp should be :-
<!DOCTYPE html>
<html lang="en">
<head>
<title>${param.pageTitle}</title>
</head>
<body>
<jsp:include page="header.jsp"/>
Specific page content
<jsp:include page="footer.jsp"/>
</body>
</html>
and header.jsp and footer.jsp should be :-
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
Specific page content
</body>
</html>
This is the proper structure of a page.
