HTML元素按内容用途分为文档结构、文本内容、媒体、表单、表格、列表和语义化结构七类：分别定义页面骨架、组织文本、嵌入多媒体、收集用户输入、展示结构化数据、列举信息及明确内容角色。
HTML 元素按内容用途怎么分
HTML 本身不提供“内容分类”这个官方术语，但开发者常根据元素的语义和实际用途，把标签归为几类——不是语法分类，而是人脑理解页面时的自然分组。这种分组直接影响你写什么标签、怎么嵌套、是否利于 SEO 和屏幕阅读器识别。
<header>、<main>、<footer> 这些算哪一类
它们属于「文档结构元素」，核心作用是划分页面逻辑区域，而不是控制样式或行为。浏览器不强制渲染差异，但辅助技术（比如读屏软件）会据此跳转导航，搜索引擎也依赖它们判断主次内容。
-
<header>不一定在页面顶部：它可以出现在<article>内部，表示该文章自己的标题区 -
<main>每个页面只能有一个，且不能嵌套在<article>、<aside>或<nav>里 -
<footer>也不是必须放在最底下：它属于其最近的“节”级祖先（如<body>或<article>），可重复出现
<p>、<h1>、<strong> 属于文本内容元素，但用法差别很大
它们都处理文字，但语义层级完全不同：<h1> 是内容大纲的起点，<p> 是段落容器，<strong> 是强调强度——不是“加粗”，而是表达重要性。滥用会导致语义混乱。
- 一个页面可以有多个
<h1>，但仅限于不同<article>或<section>内部；全局主标题仍建议只用一个 -
<strong>不能替代 CSS 的font-weight：它传达的是“这段话很重要”，不是“我想让它看起来粗一点” -
<p>不能直接包<div>：块级元素嵌套进行内上下文会触发浏览器自动纠错，可能破坏 DOM 结构
为什么 <img> 和 <video> 被单独列为媒体元素
因为它们本质是“外部资源引用”，而非纯文本内容。它们自带 src、alt、controls 等专属属性，且默认为替换元素（replaced element）——浏览器用内部机制渲染，不完全受 CSS 盒模型控制。
立即学习“前端免费学习笔记（深入）”；
-
<img>必须有alt属性：空字符串alt=""表示“装饰性图片”，非空则需准确描述图像内容 -
<video>若无controls属性，就完全不可操作；加了也不代表自动播放，还得配合muted才可能静音自动播 - 不要用
<div>+ background-image 模拟<img>：前者无法被爬虫索引，也无法被读屏器识别为图像内容
<ul> 只能直接包 <li>，<table> 必须有 <tbody> 或 <thead> 才算合法结构——这些不是浏览器报错才要管，而是从第一行 HTML 就该建立的语义直觉。 
