第1节。使用HTML5语义标签结构内容
1.1。结构
- HTML允许我们根据内容的含义构造文档
- DIV，表标签用于创建结构，布局，但不是语义
- html语义标签 - 网页的结构要显示含义，而不仅仅是布局
- HTML语义结构/分段元素有助于创建页面更可读，可访问，更好的搜索引擎结果，易于修改/更新
- 语义元素清楚地描述了浏览器和开发人员的含义
注意：所有现代浏览器都支持HTML5语义元素。
HTML标题元素
H1至H6
HTML5语义结构/分段元素
| 标签 | 使用 |
|---|
<main> | 指定文档的主要内容 |
<header> | 指定文档或部分的标题 |
<nav> | 定义导航链接 |
<section> | 定义文档中的部分 |
<article> | 定义一篇文章。 |
<aside> | 除了页面内容外，定义内容 |
<footer> | 为文档或部分定义页脚 |
为什么引入HTML5语义结构/分段元素？
- 在较早的情况下，开发人员使用/创建了自己的ID/类名称，用于样式元素，例如标题，页脚，顶部NAV，底部NAV，主菜单，NAV-导航，左下方右下底部容器，内容，左文章，左侧侧栏，右侧栏等。
- 这使得搜索引擎很难识别正确的网页内容，也是浏览器的开发人员并编辑内容
- 有了新的HTML5语义/有意义的元素，例如（
<header> <footer> <nav> <section> <article> <aside> ），这将变得更加容易 - HTML5语义/有意义的元素使机器以及具有可访问性，搜索引擎结果，更一致且更易于使用和样式的用户更可读
根据W3C的说法，语义网：“允许在应用程序，企业和社区之间共享和重复使用数据”
实施结构层次结构
只要层次结构有意义，涉及的要素的确代表了您的确取决于您。在创建这样的结构时，您只需要牢记一些最佳实践：
- 最好是您
use a single <h1> per page - 这是顶级标题，所有其他标题都位于层次结构中 - 确保在层次结构中以正确顺序使用标题。不要使用
<h3>s代表子头标记，其次是<h2>s代表子提示 - 这是没有意义的，并且会导致奇怪的结果
为什么我们需要结构？
- 查看网页的用户倾向于迅速扫描以查找相关内容。如果他们在几秒钟内看不到任何有用的东西，他们可能会感到沮丧，然后去其他地方。
- 搜索引擎索引您的页面，将标题内容视为影响页面搜索排名的重要关键字。没有标题，您的页面在
SEO (Search Engine Optimization)方面的性能很差 - 视力受损的人通常不会阅读网页；他们改为听他们的声音。如果没有标题，他们将被迫聆听整个文档大声朗读
1.2。大纲
- HTML使用语义元素，标题，语义标签来生成/描述页面内容的文档概述（文档概述=主题，目录，索引）
- 设备/浏览器使用文档概述来扫描和搜索内容，导航到特定/特定的部分，以确定内容如何相互关系
- HTML5 Outliner用于理解和了解html页面/文档的确切轮廓IE页面结构
- 使用Outliner实用程序：https：//gsnedders.html1.org/outliner/
- 文本编辑器
Document Outliner Plugin/extension例如括号 - 括号 - >查看菜单 - >显示文档轮廓
1.3。导航
- 代表旨在导航的文档的一部分
- 该元素定义了一组导航链接
- HTML元素代表一个页面的一部分，其目的是在当前文档或其他文档中提供导航链接
- 导航部分的常见示例是菜单，内容表和索引
注意：这不是文档的所有链接都应在一个内部的规则
元素该元素仅用于主要导航链接
1.4。部分
- 代表通用文档或申请部分
- 这
- HTML
根据W3C的HTML5文档：“一节是内容的主题分组，通常与标题”
- 通常可以将网页分为介绍，内容，左右部分的中间部分，等等。
1.5。文章
- 代表文档的独立内容，例如博客条目或报纸文章
- 该元素指定独立的独立内容
- HTML元素代表文档中的独立构图
- HTML标签用于博客/论坛帖子，报纸文章，博客条目等。
1.6。旁边
- 代表一块与页面其余部分相关的内容
- 该元素除了放入内容（例如侧边栏）外定义了一些内容
- Asides经常以侧边栏或呼叫盒形式出现
1.7。标题
- 代表一组入门或导航辅助工具
- 该元素指定文档或部分的标题
- 该元素应用作入门内容的容器
- HTML元素代表入门内容，通常是一组入门或导航辅助工具
- 它可能包含一些标题元素，但还包含徽标，搜索表格，作者名称和其他元素
- 您可能有几个文档中有几个元素
1.8。页脚
- 代表一个部分的页脚
- 该元素指定文档或部分的页脚
- HTML元素代表其最近的分段内容或分段根元素的页脚
- 页脚通常包含有关本节的作者，版权数据或链接到相关文档的信息
- 您可能有几个文档中有几个元素
1.9。 div
1.10。 Wai-aria
- Web可访问性计划可访问丰富的Internet应用程序
- 这是一组属性，可以帮助增强网站或Web应用程序的语义，以帮助辅助技术，例如盲人的屏幕读取器，可以理解某些事物，而不是HTML本地的某些事物
- ARIA（WAI-ARIA）是您可以添加到HTML元素的一组属性。这些属性通过浏览器中实现的可访问性API传达辅助技术的角色，状态和财产语义
- ARIA（WAI-ARIA）为用户提供了一种与您的网站进行导航和交互的好方法。使您的HTML代码尽可能地语义，以便为访问者和屏幕阅读器易于理解代码
- WAI-ARIA是一项非常强大的技术，它允许开发人员轻松描述视觉上丰富的用户界面的目的，状态和其他功能
- 具有里程碑意义的角色（屏幕读取器和其他设备扫描并跳到所需的角色）
- <header role="banner">
- <nav role="navigation">
- <main role="main">
- <article role="article">
- <footer role="footer">
- <aside role="complementary">
- <footer role="contentinfo">
1.11。网站 /博客
- https://www.w3schools.com/html/html_accessibility.asp
- https://www.w3.org/wai/standards-guidelines/aria/
- https://www.w3.org/tr/wai-aria/
- https://developer.paciellogroup.com/blog/2013/02/ususe-wai-aria-landmarks-2013/
