HTML Interview Questions for Java Full Stack Developers

Target audience: Java Full Stack Developers with senior-level experience
Focus: HTML fundamentals + practical frontend integration with React/Java backend applications.

1. What is HTML?

HTML (HyperText Markup Language) is the standard markup language used to create the structure of web pages.

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <h1>Hello</h1>
</body>
</html>

HTML defines the structure and meaning of content. CSS controls presentation, while JavaScript provides behavior.

2. HTML vs HTML5

HTML	HTML5
Older HTML specifications	Modern HTML standard
Limited semantic elements	Rich semantic elements
Multimedia often depended on plugins	Native `<audio>` and `<video>`
Limited browser storage APIs	Local Storage and Session Storage
Fewer form input types	Modern input types such as email, date, number

3. What is `DOCTYPE`?

DOCTYPE tells the browser to use standards mode when interpreting the document.

<!DOCTYPE html>

If it is missing or incorrect, browsers may enter Quirks Mode, which can cause inconsistent rendering.

4. What is an HTML element?

An HTML element generally consists of an opening tag, content, and closing tag.

<p>Hello World</p>

Some elements are void/empty elements and do not have closing tags:

<br>
<hr>
<img src="photo.jpg" alt="Photo">
<input type="text">

5. Semantic HTML

Semantic elements communicate the purpose of their content.

Common semantic elements include:

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>

Why use semantic HTML?

Improves accessibility
Helps search engines understand page structure
Makes code easier to maintain
Makes the document structure clearer

Example

<header>
    <h1>Product Portal</h1>
</header>

<nav>
    <a href="/products">Products</a>
    <a href="/orders">Orders</a>
</nav>

<main>
    <section>
        <h2>Products</h2>
    </section>
</main>

<footer>
    Copyright 2026
</footer>

6. `div` vs `span`

`div`	`span`
Generic block-level container	Generic inline container
Usually starts on a new line	Usually remains in the same line
Commonly used for grouping/layout	Commonly used for small pieces of text/content

<div>Product Details</div>

<p>
    Product <span>Price</span>
</p>

7. Block vs Inline Elements

Block elements

Examples:

<div>
<p>
<h1>
<section>
<article>
<ul>

They normally occupy the available width and begin on a new line.

Inline elements

Examples:

<span>
<a>
<strong>
<em>

They normally occupy only the space required by their content.

Note: CSS display can change the layout behavior of elements.

8. `id` vs `class`

`id`	`class`
Intended to identify one element uniquely	Can be reused
CSS selector: `#header`	CSS selector: `.card`
Useful for unique document targets	Useful for reusable styling/behavior

<div id="header"></div>

<div class="card"></div>
<div class="card"></div>

9. HTML Forms

A form collects user input and can submit it to a server.

<form action="/users" method="post">
    <label for="name">Name</label>
    <input id="name" name="name" type="text">

    <button type="submit">Save</button>
</form>

For a Java/Spring Boot application, the submitted data can ultimately be processed by a REST endpoint or MVC controller.

10. GET vs POST

GET	POST
Commonly used to retrieve data	Commonly used to submit/create/process data
Parameters may appear in the URL	Data is normally sent in the request body
Can be bookmarked	Normally not represented as a bookmarkable URL
Request data is visible in URL	Data is not placed in the URL by default
Should be safe/idempotent for normal retrieval use	May change server state

Important interview point

POST is not automatically secure. Security comes from HTTPS, authentication, authorization, validation, CSRF protection where applicable, and correct server-side design.

11. HTML5 Input Types

Common input types:

<input type="text">

<input type="email">

<input type="password">

<input type="number">

<input type="date">

<input type="time">

<input type="file">

<input type="url">

<input type="tel">

<input type="color">

<input type="range">

<input type="checkbox">

<input type="radio">

Using the appropriate type improves browser validation, mobile keyboard behavior, and accessibility.

12. `label` and Accessibility

A label associates descriptive text with a form control.

<label for="email">Email</label>
<input id="email" name="email" type="email">

The for attribute should match the input’s id.

Benefits:

Better accessibility
Better screen-reader support
Larger clickable area for many controls
Better form usability

13. `placeholder` vs `value`

<input placeholder="Enter your name">

placeholder is a hint and disappears as the user enters data.

<input value="John">

value represents the current/default value of the control.

Do not use placeholder text as a replacement for a proper label.

14. Tables

Basic table:

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>John</td>
            <td>30</td>
        </tr>
    </tbody>
</table>

Use tables for tabular data, not for page layout.

15. `colspan` vs `rowspan`

Merge multiple columns:

<td colspan="2">Total</td>

Merge multiple rows:

<td rowspan="2">Java</td>

16. Lists

Ordered list

<ol>
    <li>Java</li>
    <li>React</li>
</ol>

Unordered list

<ul>
    <li>Java</li>
    <li>React</li>
</ul>

Description list

<dl>
    <dt>Java</dt>
    <dd>Programming language</dd>
</dl>

17. Images

<img
    src="logo.png"
    alt="Company Logo"
    width="200">

Why is `alt` important?

Accessibility
Screen-reader support
Useful when an image cannot be displayed
Provides meaningful alternative text

Decorative images can generally use an empty alt:

<img src="decorative-line.png" alt="">

18. Anchor Tag

<a href="/products">Products</a>

Opening an external link in a new tab:

<a
    href="https://example.com"
    target="_blank"
    rel="noopener noreferrer">
    Example
</a>

rel="noopener noreferrer" is a useful security/privacy practice when using target="_blank" for external links.

19. `iframe`

An iframe embeds another browsing context.

<iframe
    src="https://example.com"
    width="500"
    height="300"
    title="Example content">
</iframe>

Security considerations include:

sandbox
Content Security Policy
X-Frame-Options
frame-ancestors

20. Audio and Video

Audio

<audio controls>
    <source src="song.mp3" type="audio/mpeg">
</audio>

Video

<video controls width="500">
    <source src="movie.mp4" type="video/mp4">
</video>

HTML5 provides native multimedia support without requiring browser plugins.

21. Meta Tags

Common examples:

<meta charset="UTF-8">

<meta
    name="viewport"
    content="width=device-width, initial-scale=1">

<meta
    name="description"
    content="Java Full Stack Interview Preparation">

The viewport meta tag is especially important for responsive layouts.

22. Accessibility and ARIA

ARIA attributes provide additional accessibility information when native HTML semantics are insufficient.

Example:

<button aria-label="Close dialog">
    X
</button>

Important principle

Prefer native HTML semantics first.

For example:

<button>Save</button>

is generally better than:

<div role="button">Save</div>

Use ARIA to enhance semantics when necessary, not to replace proper HTML unnecessarily.

23. `tabindex`

tabindex controls keyboard focus behavior.

<input tabindex="1">
<input tabindex="2">

Avoid unnecessarily using positive tabindex values because they can make keyboard navigation difficult to maintain.

A common useful pattern is:

<button tabindex="0">Save</button>

or simply omit it because native interactive elements already participate in normal keyboard navigation.

24. LocalStorage vs SessionStorage vs Cookies

Feature	LocalStorage	SessionStorage	Cookies
Typical capacity	Larger than cookies	Larger than cookies	Small
Lifetime	Until cleared	Usually until the page session/tab ends	Configurable expiry
Automatically sent with HTTP requests	No	No	Yes, when applicable
JavaScript access	Yes	Yes	Usually yes unless `HttpOnly`
Good for authentication tokens?	Not automatically	Not automatically	Depends on architecture

Senior interview point

For authentication, storing sensitive tokens in browser storage has XSS implications. An HttpOnly, Secure, appropriately scoped cookie can reduce token exposure to JavaScript. The correct design depends on the authentication architecture.

25. `data-*` Attributes

Custom data attributes allow application-specific metadata to be associated with HTML elements.

<div
    data-id="101"
    data-role="admin">
    User
</div>

JavaScript can access them through dataset:

element.dataset.id;
element.dataset.role;

26. Canvas vs SVG

Canvas	SVG
Raster/pixel-oriented drawing surface	Vector graphics
Drawing is commonly performed with JavaScript	Elements exist in the DOM
Good for many dynamic graphics/games	Good for scalable icons, diagrams and charts
Individual drawn objects are not DOM nodes	Individual SVG elements can be styled/targeted

27. `async` vs `defer`

<script src="app.js" async></script>

<script src="app.js" defer></script>

`async`

Downloads while HTML is being parsed.
Executes as soon as the script is available.
Can interrupt HTML parsing.
Execution order is not guaranteed between multiple async scripts.

`defer`

Downloads while HTML is being parsed.
Executes after HTML parsing completes.
Deferred scripts maintain document order.
Often suitable for application scripts that depend on the parsed DOM.

Interview answer

“I use defer when a script should execute after HTML parsing and script order matters. I use async when the script is independent and can execute as soon as it finishes downloading.”

28. Lazy Loading

Images can be lazily loaded:

<img
    src="product.jpg"
    loading="lazy"
    alt="Product">

This can reduce initial network and rendering work for images that are below the fold.

Do not blindly lazy-load critical above-the-fold images because that can hurt the initial user experience.

29. HTML5 APIs

Important browser APIs include:

Geolocation API
Web Storage API
Drag and Drop API
Web Workers
WebSocket API
History API
Fetch API
Notifications API

These APIs are provided by the browser environment rather than being HTML tags themselves.

30. How Does HTML Work with React?

React applications commonly use JSX.

Example:

function User() {
    return (
        <div>
            <h1>John</h1>
            <button>Save</button>
        </div>
    );
}

JSX looks like HTML, but it is JavaScript syntax.

The React toolchain transforms JSX into JavaScript, and React uses the resulting element descriptions to update the browser DOM.

Architecture

flowchart LR
    A[React Component] --> B[JSX]
    B --> C[JavaScript Transformation]
    C --> D[React Element Tree]
    D --> E[React Reconciliation]
    E --> F[Browser DOM]
    F --> G[Rendered UI]

31. How Does a Browser Process HTML?

A simplified rendering flow:

flowchart TD
    A[HTML Response] --> B[HTML Parsing]
    B --> C[DOM]
    D[CSS Files] --> E[CSS Parsing]
    E --> F[CSSOM]
    C --> G[Render Tree]
    F --> G
    G --> H[Layout]
    H --> I[Paint]
    I --> J[Compositing]
    J --> K[Displayed Page]

Key terms

DOM: Tree representation of HTML.
CSSOM: Tree representation of CSS rules.
Render Tree: Information needed to render visible content.
Layout: Calculates element positions and sizes.
Paint: Draws pixels.
Compositing: Combines layers for final display.

32. What Happens When Browser Encounters a Script?

Simplified behavior for a normal script:

<script src="app.js"></script>

The browser generally:

Parses HTML.
Encounters the script.
Downloads the script if required.
Executes it.
Continues parsing HTML.

async and defer change this behavior.

flowchart TD
    A[HTML Parsing] --> B{Script Type}
    B -->|Normal script| C[Pause Parsing]
    C --> D[Download]
    D --> E[Execute]
    E --> F[Continue Parsing]

    B -->|async| G[Download in Parallel]
    G --> H[Execute When Ready]
    H --> I[Parsing May Be Interrupted]

    B -->|defer| J[Download in Parallel]
    J --> K[Finish HTML Parsing]
    K --> L[Execute Deferred Scripts]

33. DOM vs HTML Source

The HTML source is the original document received from the server.

The DOM is the browser’s in-memory representation of the document after parsing.

JavaScript can modify the DOM:

document.querySelector("#name").textContent = "John";

The DOM can therefore differ from the original HTML source.

34. Critical Rendering Path

The Critical Rendering Path describes the work the browser performs to convert resources into pixels on the screen.

A simplified model:

flowchart LR
    A[HTML] --> B[DOM]
    C[CSS] --> D[CSSOM]
    B --> E[Render Tree]
    D --> E
    E --> F[Layout]
    F --> G[Paint]
    G --> H[Composite]

Ways to improve rendering performance

Reduce unnecessary HTML.
Optimize CSS.
Minimize render-blocking resources.
Use defer for suitable scripts.
Optimize images.
Lazy-load non-critical resources.
Use caching and CDNs appropriately.

35. How Do You Improve HTML Page Performance?

A senior-level answer should cover multiple layers:

HTML

Use semantic and simple markup.
Avoid unnecessarily deep DOM trees.
Lazy-load non-critical images.
Provide image dimensions where appropriate to reduce layout shifts.

JavaScript

Use defer where appropriate.
Code split large applications.
Avoid blocking scripts.

CSS

Remove unused CSS.
Minimize render-blocking CSS.
Avoid unnecessarily complex selectors.

Network

Use HTTP caching.
Use a CDN where appropriate.
Compress resources.
Use modern image formats where supported.

Browser

Leverage browser caching.
Avoid unnecessary DOM manipulation.
Reduce layout/reflow work.

36. HTML Accessibility Best Practices

For a production application:

Use semantic HTML.
Use proper headings.
Associate labels with form controls.
Provide meaningful alt text.
Ensure keyboard accessibility.
Maintain visible focus indicators.
Use sufficient color contrast.
Use ARIA only when needed.
Make error messages understandable.
Test with keyboard navigation and accessibility tools.

Example:

<form>
    <label for="username">Username</label>

    <input
        id="username"
        name="username"
        type="text"
        aria-describedby="username-error">

    <p id="username-error">
        Username is required.
    </p>

    <button type="submit">Login</button>
</form>

37. HTML and Spring Boot Integration

A Java Full Stack application may follow this flow:

sequenceDiagram
    participant U as User
    participant R as React/Browser
    participant API as Spring Boot API
    participant DB as Database

    U->>R: Enter form data
    R->>API: HTTP POST /users
    API->>API: Validate request
    API->>DB: Save user
    DB-->>API: Success
    API-->>R: JSON response
    R-->>U: Update UI

Example Spring Boot endpoint:

@PostMapping("/users")
public ResponseEntity<UserResponse> createUser(
        @RequestBody CreateUserRequest request) {

    UserResponse response = userService.createUser(request);

    return ResponseEntity.status(HttpStatus.CREATED)
            .body(response);
}

The browser/React application sends JSON rather than directly manipulating the database.

38. Senior-Level Interview Questions

These are especially useful for a Java Full Stack / Lead Developer interview:

Explain semantic HTML and its impact on accessibility and SEO.
What happens internally when a browser loads an HTML page?
Explain DOM, CSSOM, Render Tree, Layout and Paint.
What is the Critical Rendering Path?
Explain async vs defer.
How would you optimize a slow-loading page?
How do you make forms accessible?
When should ARIA be used?
What is the difference between HTML source and DOM?
How does JSX differ from HTML?
How does React eventually update the browser DOM?
How do HTML forms interact with REST APIs?
How would you protect authentication-related data in a browser?
What are the security concerns with target="_blank"?
How does lazy loading affect performance?
Canvas vs SVG — when would you choose each?
What is the difference between cookies, LocalStorage and SessionStorage?
How would you design accessible error handling in a form?
How can HTML contribute to SEO?
How would you troubleshoot layout shifts and slow initial rendering?

39. Quick Interview Revision Sheet

Topic	Key Point
HTML	Structure of web content
HTML5	Modern HTML standard
DOCTYPE	Standards mode
Semantic HTML	Meaningful structure
`div`	Generic block container
`span`	Generic inline container
`id`	Unique identifier
`class`	Reusable selector
Form	Collects user input
GET	Retrieval-oriented HTTP method
POST	Submission/state-changing method
`label`	Form accessibility
`alt`	Image alternative text
`iframe`	Embedded browsing context
LocalStorage	Persistent browser storage
SessionStorage	Session-scoped browser storage
Cookies	Can be sent automatically with HTTP requests
`async`	Execute when downloaded
`defer`	Execute after parsing
Semantic HTML	SEO + accessibility
ARIA	Additional accessibility semantics
Canvas	Script-driven drawing surface
SVG	Vector DOM-based graphics
DOM	Browser document tree
CSSOM	CSS representation
Render Tree	Rendering representation
Layout	Position/size calculation
Paint	Draw pixels
Lazy Loading	Delay non-critical resource loading
JSX	JavaScript syntax that resembles HTML

40. Recommended Senior Interview Answer Pattern

For senior/lead interviews, avoid giving only definitions.

Use this structure:

1. Definition
2. Why it matters
3. Practical example
4. Production consideration
5. Security/performance/accessibility consideration

Example: `async` vs `defer`

Definition: Both allow scripts to download without blocking HTML download.

Difference: async executes as soon as it is ready, while defer executes after HTML parsing and maintains script order.

Production usage: I generally use defer for application scripts that depend on the DOM or script ordering, while independent scripts such as analytics may be candidates for async.

Interview takeaway: Senior interviewers usually want to hear the trade-off and production use case, not just the definition.

41. Final HTML Preparation Checklist

Interview Focus for a Java Full Stack Developer

For a senior Java Full Stack interview, prioritize these topics:

mindmap
  root((HTML Interview))
    Fundamentals
      Elements
      Attributes
      Forms
      Tables
      Lists
    HTML5
      Semantic HTML
      Input Types
      Storage
      Multimedia
    Accessibility
      Semantic Elements
      Labels
      Alt Text
      ARIA
      Keyboard Navigation
    Browser
      DOM
      CSSOM
      Rendering
      Critical Rendering Path
    Performance
      Defer
      Async
      Lazy Loading
      Image Optimization
      Caching
    React
      JSX
      Components
      DOM Updates
    Backend Integration
      REST APIs
      JSON
      Spring Boot
      Validation
    Security
      XSS
      Cookies
      Storage
      iframe Security

The highest-value senior topics are semantic HTML, accessibility, forms, browser rendering, async vs defer, performance, storage/security, DOM, JSX/React integration, and HTML-to-Spring-Boot API integration.

HTML Interview Questions for Java Full Stack Developers

1. What is HTML?

2. HTML vs HTML5

3. What is DOCTYPE?

4. What is an HTML element?

5. Semantic HTML

Why use semantic HTML?

Example

6. div vs span

7. Block vs Inline Elements

Block elements

Inline elements

8. id vs class

9. HTML Forms

10. GET vs POST

Important interview point

11. HTML5 Input Types

12. label and Accessibility

13. placeholder vs value

14. Tables

15. colspan vs rowspan

16. Lists

Ordered list

Unordered list

Description list

17. Images

Why is alt important?

18. Anchor Tag

19. iframe

20. Audio and Video

Audio

Video

21. Meta Tags

22. Accessibility and ARIA

Important principle

23. tabindex

24. LocalStorage vs SessionStorage vs Cookies

Senior interview point

25. data-* Attributes

26. Canvas vs SVG

27. async vs defer

async

defer

Interview answer

28. Lazy Loading

29. HTML5 APIs

30. How Does HTML Work with React?

Architecture

31. How Does a Browser Process HTML?

Key terms

32. What Happens When Browser Encounters a Script?

33. DOM vs HTML Source

34. Critical Rendering Path

Ways to improve rendering performance

35. How Do You Improve HTML Page Performance?

HTML

JavaScript

CSS

Network

Browser

36. HTML Accessibility Best Practices

37. HTML and Spring Boot Integration

38. Senior-Level Interview Questions

39. Quick Interview Revision Sheet

40. Recommended Senior Interview Answer Pattern

Example: async vs defer

41. Final HTML Preparation Checklist

Interview Focus for a Java Full Stack Developer

3. What is `DOCTYPE`?

6. `div` vs `span`

8. `id` vs `class`

12. `label` and Accessibility

13. `placeholder` vs `value`

15. `colspan` vs `rowspan`

Why is `alt` important?

19. `iframe`

23. `tabindex`

25. `data-*` Attributes

27. `async` vs `defer`

`async`

`defer`

Example: `async` vs `defer`