首页 > 其他分享 >HTML:语义化

HTML:语义化

时间:2023-01-16 14:45:22浏览次数:45  
标签:网页 标签 语义 HTML 内容 文档 页面

什么是语义元素?

很多html标签具有语义的意义,也就是说元素本身传达了关于标签所包含内容类型的一些信息。例如,当浏览器解析到<h1></h1>标签时,它将该标签解释为包含这一块内容的最重要的标题,h1标签的语义就是用它来标识特定网页或部分最重要的标题

为什么要语义化?

  • 代码结构:使页面即使没有css,也能够呈现出很好的内容结构
  • 有利于SEO:爬虫依赖标签来确定关键字的权重,因此可以和搜索引擎建立良好的沟通,帮助爬虫抓取更多的有效信息
  • 提升用户体验:例如title、alt可以用于解释名称和解释图片信息,以及label标签的灵活运用
  • 便于团队开发与维护:语义化使得代码更具有可读性,让其他开发人员更加理解你的html结构,减少差异化
  • 方便其他设备解析:如屏幕阅读器、盲人阅读器、移动设备等,以有意义的方式渲染网页

HTML5常用的语义元素

 

 

  • header:用于定义页面的头部区域,通常包括网站logo、主导航、全站链接以及搜索框
  • nav:定义页面的导航链接部分区域
  • main:定义文档的主要内容,该内容在文档中应该使独一无二的
  • article:定义页面独立的内容,它可以有自己的header、footer、sections等,专注于单个主题的博客文章,报纸文章或网页文章。
  • section:表示文档中的一个区域,比如,内容中的一个专题组
  • aside:表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分且可以单独被拆分出来而不会影响整体,通常表现为侧边栏或嵌入内容
  • footer:定义最近一个章节内容或根节点元素的页脚,一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

常用的语义标签 还有:

 

 无障碍网页

html5加入了无障碍属性,可以让屏幕阅读器准确识别网页中的内容,变化、状态的技术规范,使残障人士也能够无障碍阅读

标签:网页,标签,语义,HTML,内容,文档,页面
From: https://www.cnblogs.com/Luffy-RedRoc/p/17055341.html

相关文章

  • HTML 简介
    1.网页1.1什么是网页:网站是指在因特网上根据一定的规则,使用HTML等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”,通常是HTML格式的文件,它要......
  • HTML:文档声明<!DOCTYPE>、严格模式、怪异模式
    1、什么是<!DOCTYPE><!DOCTYPEhtml><!DOCTYPE>是一个文档声明,它不是HTML标签,而是一条信息,告知浏览器期望的文档类型,帮助浏览器确定其尝试解析和显示的HTML文档类型。......
  • 「HTML+CSS」自定义加载动画【049】
    前言Hello!小伙伴!首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~哈哈自我介绍一下昵称:海轰标签:程序猿一只|C++选手|学生简介:因C语言结识编程,随后转入计算......
  • 「HTML+CSS」--自定义加载动画【044】
    前言Hello!小伙伴!首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~哈哈自我介绍一下昵称:海轰标签:程序猿一只|C++选手|学生简介:因C语言结识编程,随后转入计算......
  • 「HTML+CSS」--自定义加载动画【045】
    前言Hello!小伙伴!首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~哈哈自我介绍一下昵称:海轰标签:程序猿一只|C++选手|学生简介:因C语言结识编程,随后转入计算......
  • 「HTML+CSS」--自定义加载动画【043】
    前言Hello!小伙伴!首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~哈哈自我介绍一下昵称:海轰标签:程序猿一只|C++选手|学生简介:因C语言结识编程,随后转入计算......
  • 小白必看!用JMeter+ANT进行接口自动化测试,并生成HTML测试报告
    每天进步一点点,关注我们哦,每天分享测试技术文章本文章出自【码同学软件测试】码同学公众号:自动化软件测试,领取资料可加:magetest码同学抖音号:小码哥聊软件测试 小伙......
  • HTML5学习笔记
    HTML5学习笔记  概念网页是构成网站的基本元素;网站是相关网页的集合;网页是构成网站的基本元素,他是由图片链接、文字、声音视频等元素组成;通常看到的网页以HT......
  • 我应该先学习哪种语言:HTML还是Python?
    在本文中,我们将学习首先学习哪种语言(HTML或Python)。PythonPython 是一种高级、面向对象、动态、解释和多用途编程语言,即多范式语言。其简单的语法和可读性使其非常适合用作......
  • 前端学习之html(一)
    HTML(超文本标记语言)是一种用于创建网页的标准标记语言。HTML不需要编译,可以直接由浏览器执行,它的解析依赖于浏览器的内核。它不是一种编程语言,而是一种标记语言。一个......