HTML标签的混乱答案

【问题标题】：Confusion in HTML tagsHTML标签的混乱
【发布时间】：2021-06-05 07:41:07
【问题描述】：

我想知道为什么要使用这么多 HTML 标签。看看下面我使用 div 标签的代码：

<!DOCTYPE html>
<html>
 
<body>
    <h2> HTML nav Tag</h2>
    <!-- nav tag starts -->
    <div>
        <a href="#">Home</a> |
        <a href="#">Interview</a> |
        <a href="#">Languages</a> |
        <a href="#">Data Structure</a> |
        <a href="#">Algorithm</a>
    </div>
    <!-- nav tag ends -->
</body>
 
</html>

它的输出是：

现在如果我使用 nav 标签而不是 div 标签，我会得到相同的输出：

<!DOCTYPE html>
<html>
 
<body>
    <h2> HTML nav Tag</h2>
    <!-- nav tag starts -->
    <nav>
        <a href="#">Home</a> |
        <a href="#">Interview</a> |
        <a href="#">Languages</a> |
        <a href="#">Data Structure</a> |
        <a href="#">Algorithm</a>
    </nav>
    <!-- nav tag ends -->
</body>
 
</html>

输出是：

如果输出相同，那么为什么要使用 nav 而不是 div（或者如果 div 可以完成工作，为什么要使用 body、main、article 等标签）。

【问题讨论】：

标签： html forms tags nav

【解决方案1】：

它们被称为语义标记，其目的是赋予意义。它还改善了搜索引擎优化。一个例子是段落的“p”标签，它告诉浏览器“p”标签中的文本是一个段落。

【讨论】：

【解决方案2】：

nav 和 article 等元素称为“语义”元素。当您使用这些标签而不是divs 时，更容易理解该元素的含义。例如，如果您看到nav，您将知道它的导航部分。此外，使用语义元素有助于屏幕阅读器和搜索引擎更快地阅读页面。

你可以在这里了解这些 - https://www.w3schools.com/html/html5_semantic_elements.asp

希望这能回答你的问题。

【讨论】：

【解决方案3】：

很好的问题。所以<nav> 标签与<div> 标签相同。如您所知，一个 div 或部门标签代表我们可以用来容纳内容的容器。

导航或导航标签具有相同的行为。我们主要用来与其他开发者交流，这个容器的目的和意义是提供导航链接。它有一个特殊的作用，很容易CTRL+F和查找+理解。

所以区别主要是为了表示语义上的意思，让你更快地理解新项目中发生的事情。

让我知道这是否有意义！

【讨论】：

【解决方案4】：

如果你还在学习编程，问这样的问题是可以的。当你稍微进步一点，你就会明白拥有不同 HTML 元素的本质。例如，使用 nav 标签有助于实现与此相关的特殊样式，这与使用 div 标签不同。继续学习Bootstrap，它会帮助你理解更多。

【讨论】：

【解决方案5】：

主要是因为语义，导航元素属于nav。 div 更像是一种通用类型的标签。见https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav

【讨论】：