Question

我正在管理员面板网站上工作。所有页面都有一个标题，下面有一些表格。

页面看起来像这样：

<div class="page some-page">
     <form>
        <fieldset>
           ...
        </fieldset>
     </form>
</div>

我需要为所有网页添加标题，我想知道是否将其设为<legend> - 或<H1>

所以每个页面标题可以是这样的（使用图例）：

<div class="page some-page">
     <form>
        <fieldset>
           <legend>Page's Header</legend>
           ...
        </fieldset>
     </form>
</div>

或像这样（使用h1）

<div class="page some-page">
     <h1>Page's Header</h1>
     <form>
        <fieldset>
           ...
        </fieldset>
     </form>
</div>

或者甚至更复杂的嵌套标题＆gt; H1：

<div class="page some-page">
     <header>
         <h1>Page's Header</h1>
     </header>
     <form>
        <fieldset>
           ...
        </fieldset>
     </form>
</div>

在设计和设计方面 - 所有都是相同的，并且风格相同..

来自HTML规范的

是：

HTML - 元素代表六个级别的章节标题。是最高的部分级别，是最低的。

和传奇是：

HTML元素表示其父级内容的标题。

我问的是＆＃34;最佳做法＆＃34;和HTML规范..甚至味道 -

如何为所有页面实现标题？

Answer 1

语义标记的经验法则是不考虑元素在页面上的显示方式，而是元素实际扮演的角色作为文档的解剖组件。

在这种情况下，我会选择这样的事情：

<body>
<h1>Page's Header</h1>

...

<main class="page some-page">

'''

<form>
<fieldset>
<legend>...</legend>
...
</fieldset>


<fieldset>
<legend>...</legend>
...
</fieldset>
</form>

...

</main>

...

</body>

Answer 2

使用<h1>作为页面最重要的标题。

使用<fieldset>将表单字段集合在一起。不要用它来包含整个表格。例如：

<fieldset>
  <legend>Your name</legend>
  <label><input> Salutation</label><br>
  <label><input> Forename</label><br>
  <label><input> Surname</label>
</fieldset>

<fieldset>
  <legend>Your address</legend>
  <label><input> House name or number</label><br>
  <label><input> Street</label><br>
  <label><input> Town</label><br>
  <label><input> Post code</label>
</fieldset>

<fieldset>
  <legend>Animals you like</legend>
  <label><input type=checkbox> Cats</label>
  <label><input type=checkbox> Dogs</label>
  <label><input type=checkbox> Horses</label>
</fieldset>

（这些不是HTML的理想示例，也不是如何捕获名称或地址，但它们演示了如何使用字段集。）

字段不必进入字段集。大多数表单根本不需要字段集。当您需要使用通用标签对字段集合进行分组时，它们就在那里。

标题还是传奇？

2 个答案: