html语义化的理解

1.什么是html标签的语义化?

html semantic element

元素反映其含义,而不仅仅是显示效果。

2.html语义化的优点?

便于开发者和浏览器的阅读,屏幕阅读器也可以根据语义来读取内容,seo友好

3.如何html语义化?

页面布局

html5 semantic
对比

<div>标签没有语义化,应该采用右侧标签进行页面布局。

标签

Tag Description
<article>  文章标记标签
<aside>  与主题内容有一定关联度,即便删除,主题内容仍然合理,如网页的侧边栏
<details>  额外内容,用户可以选择浏览或者隐藏
<figcaption>   <figure> 的说明
<figure>  指定的自包含内容,如图示、照片、代码、清单等
<footer>   页面或章节的尾部
<header>  页面或章节的头部
<main>  页面的主题内容
<mark>   标记或者加亮,一般用于关键字
<nav>  定义导航链接
<section>  定义一个章节
<summary>   <details> 标签中可隐藏的内容
<time>  定义时间

<article> 与 <section> 的困惑:页面中需要一个单独的模块来实现一个单独的功能,也就是高聚合的情况,就用<article>,其他的时候都用<section>

应用:

参考链接:

1.https://www.w3schools.com/html/html5_semantic_elements.asp

2.深入理解 html5 标签. https://segmentfault.com/a/1190000002695791

3.https://internetingishard.com/html-and-css/semantic-html/

4.https://webflow.com/blog/html5-semantic-elements-and-webflow-the-essential-guide

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注