HTML是网络上每个网站的基础。它定义了视觉对象的放置位置,外观和外观。这是浏览器收到的第一件事,这使得它甚至在CSS和JavaScript之前就变得至关重要。它是文档对象模型的主要驱动程序,它使浏览器可以读取页面的结构并呈现其内容。通过解析我们在标签中编写的标签来创建元素。因此,确保HTML是正确的很重要。多年来,语言本身已经进行了改进,以确保所使用的语法可以准确地描述其中的内容,并允许消费者理解它。

随着HTML的发展,曾经被推荐的东西现在可以被视为不好的做法。对于我们而言,重要的是要掌握使用的语言,以确保它能最好地为网站的访问者提供服务。不正确的HTML可能弊大于利。通过确保我们拥有正确的结构,我们可以确保我们创建的内容适合将来。

所述<div>元素是HTML最通用的容器。默认情况下,它没有应用样式,没有与之相关的固有含义,并且每个浏览器都支持它。通过应用我们自己的样式,我们可以使其外观和行为随心所欲。尽管这对于浏览器中的访问者来说可能是理想的选择,但是这会给该内容的其他用户和消费者带来一定的代价。

基本的HTML标签

在HTML标签中,语义元素是为其内容提供含义的元素,例如<header>。非语义元素通常用于应用样式,不具有任何含义。在HTML5引入一组新的语义元素之前,开发人员将使用<div>达到相同的效果,例如<div id =“ header”>。向该元素添加描述性类可以使开发人员清楚该元素包含的内容,但是计算机将无法理解它。

现在,我们有几个语义元素,例如<nav>或<header>来帮助构建页面。我们应该能够仅通过查看所使用的标签来遵循该结构,而只有非语义元素(例如<div>)是不可能做到的。

<header>标签

标头通常包含某种与页面其余部分不直接相关的重复内容。该规范将其定义为“一组入门或导航帮助”,其中可能包括徽标,站点范围的导航或搜索功能。一个页面上可以有多个<header>元素。例如,博客的主页可以为每个显示的帖子包含一个<header>标签。

<nav>标签

大多数站点都会有一个专门用于导航的区域。这可以包括指向网站特定区域或面包屑样式层次结构的链接。并非所有链接都必须在一个链接之内。只有页面其他部分的链接集合才可以用作其自己的<nav>元素的候选者,但这取决于上下文。一种常见的模式是在页脚中包含指向隐私策略或联系页面的链接。如果此区域使用<footer>元素,则足以将这些链接标识为站点导航,并且无需使用单独的<nav>标签。

<main>标签

<main>元素是各页的焦点。在页面的页眉和页脚之外,所有其他内容都应位于此处。页面上只能有一个<main>。屏幕阅读器等辅助技术可以检测到此元素,并允许用户直接跳至内容。

基本的html布局

<aside>标签

顾名思义,<aside>元素包含与页面主要内容相关的信息。该元素内部的信息可以与其他所有元素分开存在,并且不会丢失上下文。此元素最常见的用途是侧边栏导航或在<footer>旁边投放广告。

<footer>标签

<footer>元素包含关于页面的任何概括信息。对于许多网站,这包括地址,版权信息或指向补充页面的链接。无需始终在页面底部有单个页脚。

<article>和<section>标签

W3C规范以类似方式定义<article>和<section>。两者都旨在将页面的不同部分组合在一起。关键区别在于组成。一个<article>被设计成自包含的。其中的内容作为一个独立的部分是有意义的。例如,博客文章,用户评论或嵌入式推文。

相反,<section>将页面的多个部分组合在一起,否则这些部分将没有其他语义。如果分开,这些将失去其意义。这样的示例包括一组相关段落,一本书的一章或作为选项卡式界面一部分的单个选项卡。

请记住,语义HTML不仅仅是页面的大纲结构。几乎每个元素都提供某种含义,这意味着通常很容易找到。仅在没有其他效果时使用<div>或<span>标签。

为什么正确的HTML标签很重要?

01.符合搜索引擎抓取规范

诸如Google之类的搜索引擎正在不断地搜寻网络,查找站点并解析其内容。他们通过查找某些标签(例如<h1>和<article>)并使用这些标签的内容来告知其算法来实现此目的。例如,搜索音乐会门票可能涉及寻找包含事件名称,讨论艺术家的<p>元素和正确日期的<time>标题。如果他们找不到所需的内容,则该网站将不会显示在这些搜索结果中。

某些浏览器和服务(例如Pocket)允许用户以无干扰的模式阅读网站。这些从站点中提取标题,内容和媒体,并将其布置在易于阅读的视图中。通过使用正确的元素来构建页面,这些工具将更容易提取正确的信息并为用户提供更好的体验。

02.更好的关联性

一些元素已经定义了与之关联的行为。例如,一个<button>元素应该是交互式的,并在单击时执行一个动作。如果改用非交互式元素(例如<div>),则解析器将不知道如果没有一些附加属性,它将无法单击它。这也会影响那些使用无障碍技术的人。没有任何视觉效果的页面导航可能会很慢。这些用户可以选择按地标或标题级别浏览网站。

通过使用诸如<nav>之类的分段元素或通过应用等效的'role'属性来创建地标。没有这些,或者通过错误地使用它们,用户将无法找到他们需要的内容。

Web的主要原理之一是向后兼容。所有规范都旨在与多年前制造的站点兼容,并考虑到将来可能发生的更改。通过现在使用正确的元素和标签,我们确保我们的网站将来有机会被理解,发现和看到。