网站的语义布局实际上不是一个特别复杂的过程。最重要的是保持逻辑并遵循基本的布局规则。
更好地理解网站结构的一个好方法是将页面直观地如何从语义的角度标记划分为块/矩形，因为每个页面恰好是一组块以及块内的块：
打开网站，截取页面的屏幕截图并尝试在任何图形编辑器中圈出块，指示在哪里使用了（或可以使用）哪个标签。
事实上，我们的网站采用了略有不同的布局，但屏幕截图中显示的选项也是可行的。现在你最需要做的就是了解页面的块结构原理。
语义布局示例
我们将提供一些具有正确布局的 HTML 代如何 电报筛查 从语义的角度标记码的简单示例。注意不同元素的结构和嵌套。
更好地理解语义标记的一个好方法是研究如 文档自动化如何工作？ 何从语义的角度标记各个网站的代码。为此，您只需打开您感兴趣的页面并按 F12（Safari 浏览器的算法不同） – 将出现一个包含 HTML 代码和样式的块。您还可以在此处选择检查器工具，当您单击某个元素时，它将立即在 HTML 代码中显示它。
基本错误
尽管 HTML 布局被认为是一项相当简单 如何从语义的角度标记的任务，但并非所有网站（即使是知名网站）都具有正确的语义标记。
HTML语义主要要求 不是死记硬背所有的标签，而是理解它们的使用逻辑，这更为重要。这种合乎逻辑的方法将帮助你避免以下常见错误：
- 使用 <section> 作为装饰的包装器；
- <header> 块过多；
- 将所有链接包装在 <nav> 标签中；
- 与 <main>、<article> 和 <section> 标签混淆。
新手布局设计师经常犯的另一个错误是使用语义 HTML 标签进行各种“装饰”（例如彩色字体、字体样式、字体大小等）。没有必要这么做。仅使用 HTML 来创建如何从语义的角度标记文档的结构。使用 CSS 实现所有视觉效果 — — 没错。
让我们尝试解释一下为什么需要这样做。
想象一下，当您在博客上发布一篇文章时，您决定用红色突出显示每个段落的第一个单词。为了什么？我只是想要它，仅此而已。是否可以直接在 HTML 中执行此操作？是的！只需应用额外的 <font> 标签即可改变字体特征并设置其颜色。但是您将不得不花费大量的时间，因为您必须为每个段落手动编写标签和格式。
所以，你终于把所有事情都做完了，但一周后你发现 加拿大數據 结果并不理想。因此，现在您必须手动“清理”每个段落。
CSS 可以让你做任何事都更快。我们为必要的 <p> 标签分配一个特定的类（与我们选择的类相同），然后在 CSS 中我们实际上只用一行就写完了设计。厌倦了红色 – 只需更改一条规则，它就会对所有具有相同类的 <p> 更改为默认的黑色。或者，您可以删除该类的规则，从而删除该设计。
一般来说，任何直接用 HTML 进行的设计都更像是例外，而不是标准做法。因此，仅使用 HTML 进行布局。不要让自己和其他开发人员的生活变得困难。