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.

Harbert

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/

Binder

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.

Renovate

Why is my syntax highlighting all messed up? – Renovate

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 ---

Litigate

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

Foushee

The issue with this once again is semantics. Heading should be marked up as HX. – Renovate

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

Aerostatics

This will make (Edit | Delete) a part of the <h1>, and that is not a good practice. – Astragal

@j08691: This would make your heading read as Product 1 (Edit | Delete)​​​​​. For starters, think screen readers - "Edit/Delete" is not part of the heading and should not be in the h1 tag. – Renovate

@Aerostatics It's semantics. The h1 element's purpose is to contain the header for the page you're currently viewing. (Edit | Delete) is probably not part of the page title, and therefore should not be in the h1 – Litigate

@Litigate - I know about semantics. However based on the code the OP is using, this is a perfectly viable solution. – Aerostatics

practically, yes, it's viable. But I was responding to your question on why it's not "good practice". What works and what's right are not always one and the same. – Litigate