html中section和div标签的区别是什么?

5,252 阅读1分钟

section 和 是用于在html页面中显示内容的标签。与section和div有两个区别div

  • 语义内容
  • 字体大小

section和div的唯一区别是应用于其内部内容的语义。

什么是section?

Section 是一个元素,对其内部的内容具有语义。这些元素可以用来对html中的内容或元素进行分组。

它是一个HTML5元素。

节可以包含不同的块来区分内容。

这可以用在

  • 段落
  • 标题
  • 页眉
  • 页脚
  • 文章

而且,每个应用于标题的相同标签的字体大小也是不同的

因此,改善了内容的可读性,提高了SEO排名 下面是一个有多个相同标题的章节标签的例子

<html>
<body>

<section>
<h1>heading 1</h1> 
 <p>Heading 1 paragraph.</p> 
 </section> 
 <section> 
 <h1>Heading 2</h1> 
 <p>Heading 2 paragraph.</p> 
 </section> 
 <div> 
 <h1>Heading 3</h1> 
 <p>Heading 3 paragraph.</p> 
 </div> 
</section>
</body>
</html>

输出:

Comparision of Div and section tag in html

如果一个部分包含多个相同的标签,在这个例子中可以用字体大小来区分这些标签,同时颜色风格也可以相同。

什么是div标签?

Div 是一个没有语义的html标签。它用于创建其他元素的逻辑和布局,也包含其他内容元素。

下面是一个div的例子

<html>
<body>

<div>
<h1> Countries</h1>
<ul>
  <li>India</li>
  <li>USA</li>
  <li>Germany</li>
</ul>  

<h1>Employee List</h1>

<table>
  <tr>
    <th>Id</th>
    <th>Name</th>
    <th>Sal</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Franc</td>
    <td>5000</td>
  </tr>
  <tr>
    <td>11</td>
    <td>Eric</td>
    <td>4000</td>
  </tr>
    <tr>
    <td>5</td>
    <td>Andrew</td>
    <td>1000</td>
  </tr>
  </table>
  </div>
</body>
</html>

输出

Div and section tag differences in html

浏览器支持

Div 标签支持旧的和所有最新的浏览器,包括chrome, Internet Explorer, Firefox, Safari

Section 标签在支持html5的最新浏览器中也有支持。

总结

Div用于创建布局和内容元素的分组,没有语义意义。

Section标签在内容中具有语义,可以提高可读性和SEO。