Best practice when displaying inline HTML elements next to a h1 element?

Question

I have a webpage that displays the name of a "product", with edit/delete links next to it on the same line. Example:

Product 1 (Edit | Delete)

I want the product name to have a large font size, and the edit/delete buttons to have regular font size (i.e. same as paragraphs and whatnot). And I want them to appear inline, like the example above. I'm just wondering what HTML/CSS I should utilise in order to achieve this.

If I use a h1 element for the product name, it pushes the edit/delete links to the next line because h1 is a block element. So I could override h1 in my CSS and make display: inline, but messing with the natural appearance of h1 seems like something that would be against best practices (?).

The other option is to simply not use a h1 element at all and use a couple of inline divs or spans. But not using a h1 element for the top-level header of a webpage seems like something that would go against best practices too... It would also require me to explicitly set the font sizes, meaning I can't use the default font sizes of h1 and p elements, which I use throughout the rest of the website.

What's the best approach in this situation? I know it's sort of a simple/trivial question, but it would be nice to know anyway.

Answer 1

Using wrapper div for the h1 and floating it might help you.

Is this what you are looking for? : http://jsfiddle.net/Pt2BZ/

Answer 2

Yeah, those links don't belong in your <h1>. One way would be to float the heading, something like this:

​<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; }

http://jsfiddle.net/JeuXt/

There's no universal best practice or method for the display part (the CSS), but you do want to keep your HTML clean and have everything semantically correct.

Answer 3

Another option is to use the oft-neglected display: run-in; style. This will cause the h1 to "run in" to the immediately adjacent block-level element.

NOTE - Browser-support for this rule may still be a bit spotty, so I would be sure to test it before use in a production environment.

HTML

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

CSS

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

--- jsFiddle DEMO ---

Answer 4

Personally I'd just use <span></span> tags with a CSS class against them instead of heading tags to make a custom type of heading. You'll have more flexibility that way as heading tags exhibit their own default behaviour and you may find yourself in a situation where any alterations you've made to the heading tag styling starts to impact other parts of your site going forward.

Edit: Here's a link to W3C's thoughts on the use of the <H1> tag: link

Answer 5

I'd recommend using the <h1> tag and wrapping the elements you want to make smaller in a <span>. Then set a class on the span and target it with CSS like:

HTML

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

CSS

​.foo {
    font-size: 10px;
}​

jsFiddle example