需在JSP中声明HTML5文档类型、设置UTF-8编码、直接使用语义标签、引入html5shiv兼容旧IE、用CSS定义样式并设display:block、通过JSTL/EL动态填充内容，并验证输出HTML的语义正确性。
如果您在JSP页面中需要使用HTML5语义化标签构建页面结构，并通过CSS控制样式进行最终渲染，则需确保JSP容器正确解析HTML5元素且不干扰其语义与表现。以下是具体编写步骤：
一、声明HTML5文档类型并设置字符编码
HTML5要求页面以<!DOCTYPE html>开头，且JSP需明确指定UTF-8编码以避免中文乱码和标签解析异常。该声明必须位于JSP文件最顶端，且不能被任何输出（包括空格、注释）前置。
1、在JSP文件首行写入<!DOCTYPE html>。
2、在<head>内添加<meta charset="UTF-8">。
立即学习“前端免费学习笔记（深入）”；
3、确保<%@ page contentType="text/html;charset=UTF-8" %>指令位于<!DOCTYPE html>之后、<html>之前。
二、在JSP中直接使用HTML5语义标签构建结构
JSP本质是服务端生成HTML的模板技术，HTML5标签如<header>、<nav>、<main>、<article>、<footer>可直接书写于JSP中，无需特殊处理；但需注意IE8及更早版本默认不识别这些标签，若需兼容须引入html5shiv脚本。
1、在<head>中加入条件注释与html5shiv引用：<!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script><![endif]-->。
2、在<body>内按语义层级书写HTML5结构，例如：<header><h1>网站标题</h1></header>。
3、将JSP动态内容嵌入对应语义区域，如在<nav>中用<c:forEach>遍历菜单列表，或在<article>中用${article.title}输出标题。
三、通过外部CSS文件或内联style控制HTML5元素样式
CSS对HTML5标签的支持完全取决于浏览器渲染引擎，现代浏览器均原生支持其选择器；需避免仅依赖旧式div类名命名，而应直接针对header、nav等标签或其class属性编写规则。
1、在<head>中引入外部CSS：<link rel="stylesheet" href="style.css">。
2、在style.css中定义语义标签基础样式，例如：header { background: #333; color: white; padding: 1rem; }。
3、为兼容性补充display: block声明（部分旧版浏览器未默认设为块级）：header, nav, main, article, aside, footer { display: block; }。
四、使用JSTL与EL表达式动态填充HTML5结构内容
HTML5结构需承载动态数据，JSP中应通过标准标签库（JSTL）与表达式语言（EL）安全注入内容，避免脚本片段（<% %>）混入结构层，保持关注点分离。
1、在JSP顶部声明JSTL核心库：<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>。
2、在<main>内使用<c:forEach items="${newsList}" var="item">循环输出<article>区块。
3、在每个<article>中用${item.title}、${item.content}输出字段，确保所有EL表达式均置于HTML标签内部，不破坏HTML5结构完整性。
五、验证HTML5语义与JSP输出一致性
JSP编译后向浏览器发送的是纯HTML文本，因此必须确认最终响应流中不含JSP语法残留、未闭合标签或非法嵌套，否则HTML5解析器可能降级为怪异模式，导致语义失效与样式错乱。
1、在浏览器中右键“查看网页源代码”，确认DOCTYPE存在且无JSP指令残留。
2、使用W3C Markup Validation Service校验输出HTML，重点检查HTML5标签是否被识别为有效元素，且无“element not allowed here”警告。
3、在开发者工具的Elements面板中观察DOM树，确认<header>等节点存在且层级符合预期，不存在因JSP逻辑错误导致的意外闭合或缺失。
