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:


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

Here is the demo.


4 thoughts on “Headings With Paragraphs

  1. I don’t know If I said it already but …I’m so glad I found this site…Keep up the good work I read a lot of blogs on a daily basis and for the most part, people lack substance but, I just wanted to make a quick comment to say GREAT blog. Thanks, 🙂

    A definite great read..Tony Brown

  2. In my experience, browsers auto-close a p tag and insert a line break at the point an h1 tag inline occurs in a p block if all you have is:

    text text important text more text

    h1 {display:inline}

    To get around this, you would have to set your p tags to display:inline also, so you don’t end up with inline elements inside block elements, but this creates major layout problems with existing markup and CSS for most sites.

    Is redoing how all p tags/CSS work site-wide in a non-standard way really worth the possibly beneficial, or possibly detrimental effects of SEO “tricks”?.

    Isn’t it possible this could be an SEO penalty at some point kind of like listing a bunch of keywords in a small font with color the same as the background color at the bottom of every page?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s