我的回答

语义化标签的主要作用

  1. 有利于seo
  2. 更好的理解代码意思

参考答案

很多时候我们写HTML，为了方便都会直接使用div和span标签，在通过class来确定具体样式。网站哪一部分为标题，哪一部分为导航，哪一部分为头部和尾部，都只能通过class来进行确定。
但是class命名规范却又没有一套统一的标准，依次导致很多时候无法确定整体网站的结构
因此，在HTML5出现后，添加了关于页面布局结构的新标签。而在html书写过程中，根据不同的内容使用合适的标签进行开发，即为语义化。

在编程中，语义指的是一段代码的含义(这个HTML的元素有什么作用，扮演了什么样的角色)。HTML语义元素清楚地向浏览器和开发者描述其意义，例如form、table以及img等

  • 1.优点：对搜索引擎友好，有了良好的结构和语义，网页内容自然容易被搜索引擎抓取
  • 2.HTML5新增语义元素 article aside details figcaption figure footer> header main mark nav section summary time
  • 3.为什么要语义化？
  1. 语义化的优势主要在于以下几点：
  2.  其他开发者便于阅读代码，通过不同标签明白每个模块的作用和区别
  3.  结构明确、语义清晰的页面能有更好的用户体验，在样式(css)没有加载前也有较为明确的结构，更如img这一类的，在图片无法加载的情况下有alt标签告知用户此处图片的具体内容；
  4.  利于seo，语义化便于搜索引擎爬虫理解，和搜索引擎建立良好的沟通，能让爬虫爬取更多关键有效的信息
  5.  方便其他设备阅读(如屏幕阅读器，盲人设备和移动设备等)
  • 4.如何语义化？ ``` 一般的网站分为头部、导航、文章(或其他模块)、侧栏、底部，根据不同的部位，使用不同的标签进行书写。 表示页面不同位置的标签：header、nav、article、section、footer、aside 表示具体元素的作用或者意义的标签：a、abbr、address、audio、blockquote、caption、code、datalist、del、detail、ol、ul、figure、figuration、img、input、mark、p等
  • 尽可能少的使用无语义的标签div和span
  • 在语义不明显时，既可以使用div或者p时，尽量用p，因为p在默认情况下有上下间距，对兼容特殊终端有利；
  • 不要使用纯样式标签，如b、font、u等，改用css设置
  • 需要强调的文本，可以包含在strong或者em标签中(浏览器预设样式，能用css指定就不用他们)，strong默认样式是加粗(不要加b)，em是斜体(不用i)
  • 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，，单元格用td
  • 表单域要用fieldset标签包起来，并用legend标签说明表单的用途

  • 每个input标签对应的说明文件都需要使用label标签。并且通过input设置为id属性，在label标签中设置for=someld来让说明文本和相对应的input关联起来 ```

  • 5.注意点： em、strong、dfn、code、samp、kbd、var、cite等，虽然这些标签定义的文本大多会呈现处特殊的样式，但实际上，这些标签都拥有确切的语义 我们并不反对使用它们，但是如果您只是为了达到某种视觉效果而使用这些标签的话，我们建议您可以使用样式表，那么做会达到更加丰富的效果。