Headings With Paragraphs

headingsAs you might all know heading tags (H1 through H6) are very useful in terms of search engine optimization (SEO). The SEO guys usually put the title of the page inside these heading tags or sometimes the important keywords also.

A SEO guy at our company approached me and described a problem he was not able to find the solution to even after discussing it with a senior developer. The problem he told me was that he was not able to put the heading tags along the same line as paragraph. Now this is sort of ridiculous question for those who know how to resolve this problem but don’t forget that it is not ridiculous for those who don’t know about it. You see sometimes you know all big things but not the minor fixings. For example, at school, I used to be almost perfect at spelling but once I was astonished to see that I used to wrongly spell the word idea as idia. I stopped and said to myself how come i have not been able to spell that word correctly when I was able to spell the most complex words correctly. I found the reason, I considered the word idea to be negligible so I never paid attention to it.

Same must have been the case with the senior developer who was asked to resolve this problem who couldn’t do so.

The Solution?

You need to know that heading tags are block level elements or in CSS’s words, you can specify as follows:

h1
{
display:block;
}

Because they are block level elements, they can not show at the same line as that of paragraphs. For this reason, we need to make them inline elements to be able to appear at the same line as paragraphs. The word Inline speaks for itself, it makes elements appear at the same line. Therefore, here is how you can make headings tags appear along the same line as the paragraphs.

/* make the heading appear on the same line */
h1, h2, h3, h4, h5, h6
{
display:inline;
}

Here is the demo.