在h1元素旁边显示内联HTML元素时的最佳实践？

我有一个显示“产品”名称的网页，在同一行的旁边有编辑/删除链接。例如：

产品1（编辑|删除）

我希望产品名称具有大字体，编辑/删除按钮具有常规字体大小（即与段落等相同）。我希望它们以内联方式显示，如上面的示例所示。我只是想知道我应该使用什么HTML/CSS来实现这一点

如果我使用h1元素作为产品名称，它会将编辑/删除链接推到下一行，因为h1是块元素。因此，我可以在CSS中覆盖h1，并使其显示为

内联

，但破坏h1的自然外观似乎有违最佳实践（？）

另一种选择是根本不使用h1元素，而是使用两个内联div或span。但是不使用h1元素作为网页的顶级标题似乎也有违最佳实践。。。它还需要我明确地设置字体大小，这意味着我不能使用h1和p元素的默认字体大小，我在网站的其余部分都使用这些默认字体大小

---

在这种情况下，最好的方法是什么？我知道这是一个简单/琐碎的问题，但不管怎样，知道这一点还是很好的。

我建议使用

标记，并将要缩小的元素包装在

中。然后在跨度上设置一个类，并使用CSS将其作为目标，如：

HTML

<h1>Product 1 <span class="foo">(Edit | Delete)​​​​​</span></h1>​​​​​​​​​​​​​​​​​​​​​​​​​​​​

---

是的，这些链接不属于您的

中。一种方法是浮动标题，类似这样：

​<h1>Title</h1>
<div class="tools"> <!-- perhaps use an unordered list here and not div -->
    <a href="#">Edit</a>
    <a href="#">Delete</a> <!-- use a form with POST to delete instead -->
</div>

---

显示部分（CSS）没有通用的最佳实践或方法，但您确实希望保持HTML干净，并确保所有内容的语义正确。

另一个选项是使用经常被忽略的

显示：run-in样式。这将导致
h1
与紧邻的块级元素“磨合”

注意-浏览器对该规则的支持可能仍然有点参差不齐，因此我会确保在生产环境中使用之前对其进行测试

HTML

就我个人而言，我只会使用带有CSS类的标签，而不是标题标签来创建自定义类型的标题。当标题标签显示其自身的默认行为时，您将有更大的灵活性，并且您可能会发现您对标题标签样式所做的任何更改都会开始影响站点的其他部分

编辑：这里有一个链接，指向W3C关于使用
标记的想法：
为
h1
使用包装器
div
，并浮动它可能会对您有所帮助

这就是你要找的吗
 这将使（编辑|删除）成为
的一部分，这不是一个好的做法。@j08691:这将使您的标题读作
产品1（编辑|删除）​​​​​。首先，想想屏幕阅读器——“编辑/删除”不是标题的一部分，不应该在h1标记中。@j08691它的语义。
h1
元素的目的是包含当前查看的页面的标题
（Edit | Delete）
可能不是页面标题的一部分，因此不应该出现在
h1
@jackwalders-我知道语义。然而，根据OP使用的代码，这是一个完全可行的解决方案。实际上，是的，它是可行的。但我是在回答你关于为什么这不是“良好实践”的问题。有效的和正确的并不总是一回事。为什么我的语法突出显示都搞砸了？这又是一个语义问题。标题应标记为
HX
。
​<h1>Title</h1>
<div class="tools"> <!-- perhaps use an unordered list here and not div -->
    <a href="#">Edit</a>
    <a href="#">Delete</a> <!-- use a form with POST to delete instead -->
</div>

h1 { float:left; }

<h1>Page Title</h1>
<div class="links">
    ( <a href="#">Edit</a> | <a href="#">Delete</a> )
</div>​

h1 {     
    display: run-in;
    vertical-align: middle;
}