Question

我正在使用HTML5创建网站，但不知道用户首先看到的首页内容使用哪个语义元素（完整视口的高度和宽度）。我已经读过<header>元素应该用于介绍性内容，例如网站标题和导航。我的网站上什至没有，相反，我有this之类的东西，基本上是网站的第一部分，您可以看到它的意思和一些联系方式的链接。

这是一个单页网站，但是如果我有更多页面，他们将没有该内容，因此我可能会制作一个导航栏并将其放在<header>中。我想使用<main>涵盖更多内容。也许还有一个不同的元素？我不知道，这就像<header>，<section>和<main>的组合。

您认为最好的是什么？

编辑：这不是我在图像上显示的整个页面。打开网站时，它只是首先显示的部分，下面还包含内容。我想知道用什么元素包裹图像中的东西。

这是代码（已删除的类，并将文本更改为虚拟文本）：

<header>

    <address>
        <a href="tel:+48123456789">123 456 789</a>
    </address>

    <div>
        <h1>Heading</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nibh nibh, egestas eget justo maximus, consectetur ultricies ante. Quisque facilisis pellentesque sagittis. Donec iaculis tellus nisl, vitae sodales ipsum ornare id. Suspendisse potenti. Curabitur eu ornare quam. Fusce laoreet vitae quam at ornare. Etiam quis malesuada magna.</p>
        <a href="#contact">Button</a>
    </div>

</header>

这样可以吗？

（右下角的电话图标带有position: fixed，位于标题上方）

Answer 1

说实话，这是一个见解。

我个人不会在这么小的站点上使用分区元素，因为它确实只会增加噪音。譬如说，盲人或搜索引擎爬虫不会帮助他们更好地理解，因为了解的东西并不多。

但是我很佩服您的努力。我会将“标题”放在标题中，将电话内容放在“页脚”中（即使它位于顶部），其余部分放在main中。

编辑：考虑到这只是页面的顶部，因此我认为标题是合理的。您发布的代码肯定是有效的html。

我应该使用<header>还是<main>作为首页关键内容吗？

1 个答案: