不会失效,但需主题启用HTML5支持并正确声明;<main>须唯一且不嵌套于语义标签内;<nav>需手动包裹并添加aria-label;IE8兼容需html5shiv、CSS重置及动态创建标签。

WordPress主题里直接写<header>会失效吗
不会失效,但多数老主题的index.php或header.php仍用<div id="header">,浏览器能渲染,只是语义丢失、无障碍支持弱、SEO权重略低。关键在主题是否启用HTML5支持——WordPress 3.6+默认开启,但需主题显式声明。
检查当前主题的functions.php是否含:
add_theme_support('html5', array('search-form', 'comment-form', 'comment-list', 'gallery', 'caption'));若缺失,补上这行;否则<header><nav><main>等标签虽能写,但部分WordPress函数(如get_search_form())输出的结构可能不自动适配HTML5语义容器。
替换<div class="content">为<main>要注意什么
<main>在页面中必须唯一,且不能嵌套在<article><aside><footer><header><nav>内。WordPress模板常把<main>误放在<header>之后却没闭合<header>,导致DOM结构断裂。
- 确保
<main>直接子级是<article>或<section>,不是<div>包装层 - 首页、文章页、分类页都该用同一个
<main>,别在single.php里写<main class="single">——class可加,但标签名不能变 - 如果主题用了Bootstrap等框架,其CSS选择器如
.content .row会失效,需同步更新CSS为main .row或保留原有class并叠加语义标签
为什么<nav>里用wp_nav_menu()后屏幕阅读器还是读不出“导航”
因为wp_nav_menu()默认输出纯<ul>,没包裹<nav>,也没加aria-label。必须手动控制输出结构:
立即学习“前端免费学习笔记(深入)”;
<nav aria-label="主导航">
<?php wp_nav_menu(array(
'theme_location' => 'primary',
'container' => false,
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>'
)); ?>
</nav>
重点看'container' => false:避免WordPress自动包一层<div class="menu">;items_wrap确保<ul>直属于<nav>。若主题注册菜单时没设theme_location,wp_nav_menu()会回退到默认菜单,结构依然正确但内容可能错乱。
IE8及以下不识别<section>怎么办
WordPress后台已基本淘汰IE8,但若需兼容,不能只靠html5shiv——它只让IE认识标签,不解决CSS渲染问题。必须同时做两件事:
- 在
functions.php中用wp_enqueue_script()加载html5shiv,且wp_register_script()要设$in_footer = false,因shim必须在<head>里执行 - 所有HTML5标签需在CSS中显式声明
display: block,例如:header, nav, section, article, aside, footer { display: block; } - 避免对
<main>用position: absolute或float,IE8对新标签的盒模型处理极不稳定
真正麻烦的是AJAX加载内容后动态插入<article>——shim无法劫持DOM操作,此时得用document.createElement('article')提前“注册”标签,否则IE8会把它当未知元素丢弃。











