当前位置：Gxlcms > html代码 > 使用<header>,<footer>,<nav>等h5标签，和全部使用<div>有什么区别？？

使用<header>,<footer>,<nav>等h5标签，和全部使用<div>有什么区别？？

时间：2021-07-01 10:21:17 帮助过：7人阅读

这些标签似乎也没有什么实际的特殊功能，是否都可以用div标签加样式来取代？
HTML5应该也不会这么简单的出这么多可以被取代的东西吧，是不是他们还有别的功能？对搜索引擎有利之类的？
（本人自学前端开发，难免有些困惑。求行业前辈指点，）

回复内容：

====原答案====
区别等同于其他语言编程的时候，以下两种方式的区别：

变量命名用string1,string2,string3... ...来表示；
变量命名用account,password, title来表示。

====更新=====
其实这个答案有点抖机灵，排到第一有点过意不去。特地来补充一些：

正经回答这个问题：
题主的问题如果换个问法，应该是：为什么html要在标签本身上来体现语义：

为了被搜索引擎更好的检索(题主自己也提到了)
为了浏览器实现特定功能（@颜海镜@张泽端的答案中都有说到，比如阅读功能）
便于编程人员理解（即使是html5，光靠标签的语义也不够，还是要靠id、name甚至class的css命名来综合体现）

具体使用原则，请看 @winter 的答案以及他答案中的答案。

从这个角度来看，我的原答案反而是原因中最不重要的一点。因为，如果仅仅是为了让其他程序员能理解，完全可以通过其他属性如id、name来体现，而不一定要通过标签本身的语义。

业余人士答案，请各位指正。过去：


    
        ....
        .... 
    
    
        
            ....
            ....
            ....
            .... 
        
    
 

    ....
    ....
    ....
    ....
 
.... 
....

看看文档吧，说的很清楚了，HTML5的文档节段和纲要。

HTML5解决的问题
HTML 4 的文档结构定义和其隐含的大纲算法非常粗糙而且造成了很多问题：
定义语义性章节的
元素的用法,如果没有为class属性赋以特殊的值，使生成自动生成大纲的算法变得不可能 ("一个div元素
是不是大纲的一部分, 定义的是章节还是子章节?" 或者 "该div元素
是仅仅为了样式化?")。换句话说, HTML4规范在章节的定义和章节的范围都不精确。自动生成大纲是重要的,尤其是在倾向于通过根据文档大纲内容去展示内容的辅助技术（ assistive technology）。 HTML5 在自动生成大纲算法的过程中去掉了div元素（
），并新增了一个元素，section元素（
）。
合并多个文档是困难的：主文档中包含子文档意味着改变HTML标题元素的级别，以使得文档大纲能够保持下来。这个已经被HTML5的新的章节元素解决了，因为新引入的元素(,
,
和 ) 总是距离其最近的祖先章节的子章节, 与子文档章节内部的标题没有关系.
HTML4中，所有的章节都是文档大纲中的一部分。但是文档并不总是这样。文档可以包含那些不是大纲的特殊章节, 但是与文档有关的, 就像广告块和解释区域。 HTML5 引入aside元素使得这样的节点不会插入到主纲要中。
另外, 因为在 HTML4中任何的部分都是文档大纲的一部分, 没有办法产生与网站相关而不是与文档相关的节段，比如logos,menus,目录或版权信息和法律声明。为了这个目的, HTML5 引入了三个特殊的节段元素：包含链接集合的nav元素
, 例如目录, 包含网站相关信息的footer元素
和header元素
。
更具有普遍意义的是HTML5使得章节和标题特性更精确。使得文档大纲变的可预测，浏览器使用后也可以提高用户体验。

Conclusion
The new sections and headings elements introduced in HTML5 bring the ability to describe the structure and the outline of a web document in a standard way. They bring a big advantage for people having HTML5 browsers and needing the structure to help them understand the page, for instance people needing the help of some assistive technology. These new semantic elements are simple to use and, with very few burdens, can be made to work also in non-HTML5 browsers. Therefore they should be used without restrictions.

hi 我告诉你没有区别，html5的这几个标签都是收集了网上数百万网站上出现概率比较多的部分确定的，比如网站80%都会有页脚

以前大家的做法会有如下：

...

有了html5岂不是更简单了么

语义对于视觉上来看网页的人来说可能意义不大，但对于看不见视觉的人来说意义重大，比如搜索引擎，比如盲人，现在的搜索引擎搜索结果太不准确了，可能就是因为页面的语义做的不够好，比如写在正文和写在页脚的同一段文字对于用户来说页脚的可能没有用处，但是搜索引擎可能无法区分，这大概就是语义的一点用处吧 HTML是什么？布局吗？内容吗？错，是语义。

就是为了做到语义-解释的映射，所以在HTML5规范中对网页常见区块增加预定义标签再所自然不过了。

记住
HTML 语义
CSS 样式
JAVASCRIPT 行为不可以，改了以后不方便我爬实质性的就三点:
1.标签语义化区别
2.生成大纲目录的区别，H5标签的大纲目录是相对生成的，而XHTML大纲目录树根据文档所生成绝对结构。
3.交互功能增加，增强。如表单控件类型，summary.....

楼上很多人说的对搜索引擎要友好，其实就是我说的1和2。主要归纳为对数据结构的语义化，清晰友好的大纲目录。个人拙见:
1.不好理解。HTML的语义标签就是给写网页准备的，你竟然不用？
2.不利于爬虫抓取，SEO不好做。你先去看看HTML5的新特性是什么，其中一个就是语义化一是新标签便于SEO及屏幕阅读软件的优化
二是人类看得方便，试想看一堆嵌套

，哪个是导航块的关闭标签？不如

明显

使用<header>,<footer>,<nav>等h5标签，和全部使用<div>有什么区别？？

人气教程排行