网站开发如何选择合适的HTML结构
在网站开发过程中我们经常遇到这样的问题“是用一个<section>还是一个<article>元素？” 每当我必须在容器元素中对内容进行分组时，我不得不多次问自己这个问题。在本文中维仆和大家一起探索一种心智模型，可帮助您在编写文档时在和元素之间做出决定。您将探索对内容进行分组如何影响可访问性，以及如何让所有内容都对用户有用。
我在 Twitter 上的一次对话让我研究了这个问题，并最终写了下来。在与Grace Snow的对话中，我分享了一种编写我喜欢使用的 HTML 的方法。我喜欢先写出我的 HTML 结构（框）并且没有内容，以确保我在编写 HTML 时不会考虑样式。然后她发现在我真诚地尝试语义化时，我可能对sectionand元素的使用有问题。事实证明，要在 和 之间进行选择section，article我们需要我们的内容。事实上，要确定我们的内容是否足够缩小到这两个，我们需要我们的内容。我们可以建立一个心智模型，通过考虑我们的内容，确保我们每次都做出最好的决定。
HTML 将两个相关但不同的信息传递给用户设备。首先是视觉呈现信息，它告诉设备默认如何显示文档。第二个被称为语义信息，或者简单地说，语义。它传达了文档中的“意义”，即每个元素的用途以及它们之间的关系。从这个意义上说，规范会说一个元素“代表”了一些东西。因此，当您在规范中看到“表示”时，接下来是嵌入在元素中的语义信息。该h1元素揭示了这两组信息的存在。元素的视觉呈现信息h1，当浏览器遇到时，就是为什么它显示为粗体并且比文档的其余部分具有更大的字体大小。表示的语义信息h1是它是其部分的最高等级标题。
有视力的用户可以通过观察视觉效果从浏览器等设备上看到语义。对于标题，我们可以根据字体大小和粗细的差异，或者在列表的情况下，根据项目符号点标记或编号标记的存在进行区分。对于不依赖视觉的用户，语义只能通过允许他们请求以可能不是视觉的其他方式宣布语义信息的选项或设备来访问。这些选项和设备通常称为辅助技术。
HTML 规定了一些向浏览器传达隐含含义的元素，浏览器可以将这些元素提取到可访问性 API中，从而使其可用于辅助技术，而辅助技术反过来将这种含义解释给用户。这个含义让用户对他们正在访问的网页有一种健康的感觉，例如文档结构和导航辅助，或者在本例中，文档结构和导航辅助。然而携带语义信息的不仅仅是直接包装文本内容的元素。用于对其他元素进行分组的元素也具有一定的意义；在某些情况下，这可能意味着我们想要交流。
我在 Twitter 上的一次对话让我研究了这个问题，并最终写了下来。在与Grace Snow的对话中，我分享了一种编写我喜欢使用的 HTML 的方法。我喜欢先写出我的 HTML 结构（框）并且没有内容，以确保我在编写 HTML 时不会考虑样式。然后她发现在我真诚地尝试语义化时，我可能对sectionand元素的使用有问题。事实证明，要在 和 之间进行选择section，article我们需要我们的内容。事实上，要确定我们的内容是否足够缩小到这两个，我们需要我们的内容。我们可以建立一个心智模型，通过考虑我们的内容，确保我们每次都做出最好的决定。
HTML 将两个相关但不同的信息传递给用户设备。首先是视觉呈现信息，它告诉设备默认如何显示文档。第二个被称为语义信息，或者简单地说，语义。它传达了文档中的“意义”，即每个元素的用途以及它们之间的关系。从这个意义上说，规范会说一个元素“代表”了一些东西。因此，当您在规范中看到“表示”时，接下来是嵌入在元素中的语义信息。该h1元素揭示了这两组信息的存在。元素的视觉呈现信息h1，当浏览器遇到时，就是为什么它显示为粗体并且比文档的其余部分具有更大的字体大小。表示的语义信息h1是它是其部分的最高等级标题。
有视力的用户可以通过观察视觉效果从浏览器等设备上看到语义。对于标题，我们可以根据字体大小和粗细的差异，或者在列表的情况下，根据项目符号点标记或编号标记的存在进行区分。对于不依赖视觉的用户，语义只能通过允许他们请求以可能不是视觉的其他方式宣布语义信息的选项或设备来访问。这些选项和设备通常称为辅助技术。
HTML 规定了一些向浏览器传达隐含含义的元素，浏览器可以将这些元素提取到可访问性 API中，从而使其可用于辅助技术，而辅助技术反过来将这种含义解释给用户。这个含义让用户对他们正在访问的网页有一种健康的感觉，例如文档结构和导航辅助，或者在本例中，文档结构和导航辅助。然而携带语义信息的不仅仅是直接包装文本内容的元素。用于对其他元素进行分组的元素也具有一定的意义；在某些情况下，这可能意味着我们想要交流。
相关资讯
阿里云、腾讯云、华为云严选优质服务商
