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