Good JSP code structure for header and footer

Question

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?

There are alternatives to the include action. This link http://www.javaworld.com/article/2076174/java-web-development/jsp-templates.html is old and shows using include directives or custom tags. This second link has a lot of ideas http://stackoverflow.com/questions/1296235/jsp-tricks-to-make-templating-easier — rickz, May 28 '16 at 14:45
@rickz These are great links - I will have a look at the templates / custom tags - these should solve the issue with code structure. Can you post a separate answer so that I can accept it? — Petr Dvořák, May 29 '16 at 14:51
Understood, thank you. When I rewrite the code, I will answer my own question (unless someone is quicker). — Petr Dvořák, May 30 '16 at 09:50

Suraj Shingade · Answer 1 · 2017-07-01T05:17:18.650

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" "http://www.w3.org/TR/html4/loose.dtd">
<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" "http://www.w3.org/TR/html4/loose.dtd">
<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" "http://www.w3.org/TR/html4/loose.dtd">
<link href="http://fonts.googleapis.com/css?family=Roboto:400,300,500,700" 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" "http://www.w3.org/TR/html4/loose.dtd">
<script type="text/javascript" src="js/my-app.js"></script>
<script type="text/javascript" src="js/my-app-service.js"></script>

Thanks :)

you can add divs in header and footer, Minor changes required. — Suraj Shingade, Mar 16 '20 at 17:21
@akinKaplanoglu In order to incorporate this logic there are couple of options. 1. Have home.jsp sort of page created for different features 2. While dumping html add conditions — Suraj Shingade, Mar 21 '22 at 04:06

score -8 · Answer 2 · answered May 28 '16 at 14:22

-8

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.

answered May 28 '16 at 14:22

Gaurav Mahindra

424
2
6
21

3

Won't that lead to what he was trying to avoid? It will send the browser a page with multiple nested html tags and multiple nested body tags. How is that proper? – rickz May 28 '16 at 14:51
@rickz: No. It never happens. Try it yourself and see. This is the proper way of structuring a page which I suggested. – Gaurav Mahindra May 28 '16 at 14:55
3

You are wrong. It does happen. I tested your code in Chrome, Firefox, and IE. They all show source code as I described. But, they are smart enough to display the page correctly. If you are using IE then look at the debugger to see the actual source code. – rickz May 28 '16 at 15:24
@rickz: I don't know about what results you are getting but I use this page structure in my projects and never got any problems even in IE. What do you actually want to say. Do you have even remote knowledge of Java. – Gaurav Mahindra May 28 '16 at 15:33
1

I have been using JSP since it was released in 1999. I tested your code. I right clicked on the browser and selected "View page source" in Chrome and Firefox. I saw the source code exactly as I described. Did you read the page links that I posted in my comment below the opener's question? Can you post a link that points to code that supports your way of templating? – rickz May 28 '16 at 16:27
@rickz: I read the page links you provided in your comment and those do not suggest my way of templating is wrong. I am firm on my answer though I can not suggest any link. Can you provide me a piece of code that run your way and solve the asker's problem. – Gaurav Mahindra May 28 '16 at 16:41
The ways, that were described in the links I posted, will solve the problem. If you try to validate a page like you are suggesting, then you will see errors. Use something like https://validator.w3.org/ It will report the stray tags. Modern browsers are smart enough to ignore them, but that doesn't make it right. – rickz May 28 '16 at 16:53
OK, this is wrong answer, for the reasons @rickz mentioned - the resulting code works, but it is invalid... – Petr Dvořák May 29 '16 at 14:43
Rather than bicker, show the results of an HTML validator on the resulting structure. If it says the page is correct, you have a point. If not, the fact that some browsers displays it correctly is one of many possible undefined behaviors. – tripleee Aug 28 '16 at 10:25
1

Ok: I'll try. As given the code will result in output like this extract: ` Specific page content Specific page content ` etc... Simply leave the html boilerplate out of the header and footer files and all should be well. – KiwiMartin Mar 07 '17 at 06:03

Good JSP code structure for header and footer

2 Answers2