Role of HTML in JSP Applications

HTML with JSP

When starting to build web applications with JSP (JavaServer Pages), our focus often shifts to Java code, the servlet lifecycle, and server-side logic. But let’s not forget that the primary layer presented to the user and facilitating interaction with the server is HTML. Yes, even “just” HTML can profoundly influence how your backend processes work. So, let’s look at the key aspects of HTML through the lens of JSP, focusing on parts that are particularly critical for the backend.

Basic Structure of an HTML Document: Core Rules

Every web page is based on an HTML structure. It’s the skeleton that tells the browser how the page is constructed:

basic-structure.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Page Title</title>
  </head>
  <body>
    <h1>Main Heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

<!DOCTYPE html>: Specifies the document type. This is the standard for the modern web.
<html>: The root element that wraps all HTML content.
<head>: Holds metadata (title, character encoding, style sheets, scripts). This part is not directly visible to users.
<body>: Contains the visible content of the page (text, images, tables, forms, etc.).

Core Content Tags

Some fundamental tags used to structure content:

<h1> - <h6>: Headings. <h1> represents the highest level, <h6> the lowest. Preserving hierarchy is important for SEO and readability.
<p>: Paragraph. Used to separate blocks of text.
<a>: Link (Anchor). Creates navigation between pages or resources.
<img>: Image. The src attribute specifies the image URL, and alt provides alternative text if the image doesn’t load or for screen readers.
<div>: Division. A general container for grouping content and applying CSS styles.
<span>: Used to group small pieces of text or apply inline styling.

Links (`<a>`): The Essence of Navigation

Links are the soul of the web. The <a> tag uses the href attribute to specify the target URL:

links.html

<a href="/profile">View My Profile</a>
<a href="<https://google.com>" target="_blank">Google Search</a>

In the JSP context, links are often used to route to servlets or other JSP pages. It’s common to generate URLs dynamically (e.g., <%= request.getContextPath() %>/profile).

Tables (`<table>`): Structured Data

Tables are invaluable for presenting data neatly. Key tags:

<table>: Wraps the table.
<tr>: Table row.
<th>: Table header cell. Usually bold and centered.
<td>: Table data cell.
<thead>, <tbody>, <tfoot>: Group the header, body, and footer sections (useful for structure and sometimes styling).

table.html

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ilgar</td>
      <td>Aliyev</td>
    </tr>
  </tbody>
</table>

➡️ In JSP, it’s common to dynamically render data from a database inside a <table> using loops (for loop or JSTL <c:forEach>).

Iframe (`<iframe>`): Embedded Windows

An <iframe> allows you to embed another HTML document inside the current page.

iframe.html

<iframe src="/external-content.html" width="600" height="400"></iframe>

src: URL of the page to embed.
width, height: Frame dimensions.

⚠️ Caution: When using <iframe>, be mindful of security risks (e.g., clickjacking). Modern browsers provide security mechanisms like the sandbox attribute.

Forms (`<form>`): Communication with the Backend

This is the most critical HTML part for JSP developers. Forms are the main mechanism for collecting user input and sending it to the server (i.e., your JSP/Servlet application).

form.html

<form action="/processUserData" method="post">
</form>

<form>: Container that wraps form elements.
action: The URL to which form data will be sent.
method: The HTTP method that defines how data is sent to the server.

Differences between GET and POST:

GET: Appends data to the end of the URL.
POST: Sends data in the body of the HTTP request.

Form Elements: Data Entry Points

The <input> tag is the most versatile form element. The type attribute changes its behavior:

text, password, email, number, date
checkbox, radio, file, hidden
submit, reset, button

➡️ Most Important Attribute: name

servlet/FormParamExample.java

// Inside a Servlet:
String username = request.getParameter("istifadeci_adi");
String password = request.getParameter("parol");
String[] interests = request.getParameterValues("maraqlar");

If the name attribute is not set, the element’s value will not be sent to the server!

`<textarea>`: Multi-line text input

textarea.html

<textarea name="comment" rows="4" cols="50"></textarea>

`<select>` and `<option>`: Dropdown

select.html

<select name="country">
  <option value="">Select a country</option>
  <option value="AZ">Azerbaijan</option>
  <option value="TR">Turkey</option>
  <option value="US">USA</option>
</select>

`<button>`: User Interaction

<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button">Click</button>

The `enctype` Attribute

Defines how form data is encoded.

application/x-www-form-urlencoded (default)
multipart/form-data — essential for file uploads
text/plain — mostly for debugging

⚠️ Frontend vs Backend Validation: While HTML5 form validations help, backend validation is essential for ensuring security.

Conclusion

As you can see, HTML is not just “presentation.” In particular, form elements, name attributes, and choices of method and action directly determine how your backend code (JSP/Servlet) receives and processes data. Details like enctype are critical for correctly structuring backend logic for file uploads.

To work effectively with JSP, you must firmly understand these fundamental aspects of HTML, especially those directly tied to the backend. This knowledge will enable you to build cleaner, more secure, and more functional web applications.