标签语义化表示页眉区域，宜包裹 logo（ 或带 alt 的 ）和搜索栏（ + ），避免混入无关内容，支持无障碍（如 role="search"）。

在 HTML5 中，<header></header> 标签语义化地表示一个页面或区块的**页眉区域**，非常适合用来包裹网站的品牌标志（logo）和搜索栏——只要它们属于同一逻辑头部内容即可。

用 header 包裹 logo 和 search 的基本结构

最常见、也最符合语义的做法是：把 <h1></h1>（或带链接的 logo 图片）、导航菜单（可选）和 <form></form> 搜索框统一放在一个 <header></header> 内。注意搜索栏应使用语义化的 <form></form> + <input type="search">。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 品牌标志建议用 <h1></h1> 包裹文字 logo，或用 <img> 加 alt 属性，并让整个 logo 可点击跳转首页
• 搜索栏必须用 <form></form>，提交行为才合理；type="search" 能触发浏览器原生搜索样式与行为（如清空按钮、历史记录）
• 避免把无关内容（比如侧边栏、广告）塞进同一个 <header></header>

一个简洁实用的示例代码

下面是一个轻量但语义清晰的写法：

  

MySite

  

    搜索站点
    
    ?
  

注意事项与优化建议

<header></header> 不一定只出现在页面顶部 —— 它可以用于任何区块级容器的头部（比如一篇文章的标题+作者信息），但品牌+搜索这种全局头部，通常放在 开头最合适。

• 如果页面有多个 <header></header>（例如主页面 header + 文章内 header），建议为全局头部加 id="main-header" 或 class="site-header" 便于 CSS 和 JS 控制
• 为搜索表单添加 role="search" 可提升无障碍体验，屏幕阅读器能更好识别其用途
• 不要用 <header></header> 替代 <div> 单纯为了布局；它的价值在于传达“这是内容的引入部分”这一含义 </div>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！