Headers should always be appropriate for the content of the text.
If you don't want this header to be visible as the first thing in the text, you should try using the same typeface, size, kerning and line-spacing as in the main text + two blank verses (1 above and 1 below the headline). The white space created by blank verses will do just fine:) Using small caps is also a good choice, but it's difficult to make it in a webdesign...
But if it's really important for users of this page to notice this headline at once, making it a little bigger than the text (2-6pt) should be enough for w web page. You could also use some color (just keep it warm and it will be visible - red (but not #ff0000 :D) is perfect!
Hope I helped a bit:)
- Filip Łysyszyn

>Headers should always be appropriate for the content of the text.

I learn something new every day, or at least how better to explain it. ;)

I think the text of the header should be appropriate to the content of the text it headlines, clearly. But the style of the headers is usually selected to be appropriate to the design of an entire document, first, and then, if a designer wants to change the header for every part of the text, say story by story, it may then be appropriate to choose that style based on the content of that text.

On the web, little of this is particularly possible along with kerning (none), line spacing(okay), word-spacing(none), letter-spacing (bad), drop caps (hassle).

Have a nice day.

Cheers!

Thank you so much for your comments. And thanks dberlow, your explanation makes a lot of sense to me. I followed Lysyszyn's advice and added both space before and after to text and increase the text size. Below is the "revised version."

There is still a bit of problem. I read that we should put more space on top of the heading than the bottom so it's closer to the text.

Secondly, the heading still stands out too much. So I changed the color so it's the same with the body text, the heading is now not standing out enough.

Any other suggestions? Or this is good enough (stupid question, but hey...)

@ma65p:
Why dont you just present us a real sample html page instead of screenshots? So we all can inspect it using our various browsers. :D

If you’re going to use the title of one of my own articles as your own sample title, why not just borrow my CSS? My blog has the most-fine-tuned examples of heading CSS.

—
Joe Clark
http://joeclark.org/