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

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 2

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

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