Stop automatic insertion of line break

Quote:

Most browsers display heading tags with an automatic carriage return. You can change that with CSS

Source: https://webdesign.about.com/od/htmltags/p/bltags_headings.htm

Hi Moshu – thanks – sorry I should have said that I’ve already done the CSS portion – it works great on a plain HTML file outside of WP, but inside of WP there is SOMETHING that is inserting the linebreak tags ‘<br>’ that I can see when I View Source, but that I know are not in the text that I’ve entered.

As mentioned, I don’t use the Visual Editor, just the Source editor. My text appears in my editor like this:

“Here is some text with a <h1>keyword phrase</h1> that I want to be sure is styled like any other text in this sentence.”

But when I view the page using View Source it looks like this:

“Here is some text with a
<h1>keyword phrase</h1>
that I want to be sure is styled like any other text in this sentence.”

So something is making it drop down a line before the opening h1 tag and then adding in a br after the closing tag.

Even though my CSS says it should be display inline with whitespace set to no-wrap, no margin or padding, etc.

Any ideas on where this rewriting is happening?

That would probably be the wpautop function that is doing that. H1-6 tags are block level tags, and it treats them as such. Even if you override them to be inline, wpautop does not know that.

WordPress is not expecting you to know and use HTML. It’s expecting you to put in text, with minor HTML type formatting. Links, strong, em, stuff like that. If you want to use your own HTML in a big way, then you can disable wpautop using a plugin, but you will then be responsible for your own code. Paragraphs and all the automatic stuff WordPress is trying to do for you will no longer get done.

Thanks Otto42.

I’m not sure I want to completely disable wpautop, because I do have some not-so-HTML-savvy people who also post on this particular blog, but I would like to modify it if possible to stop the auto-formatting on H tags.

Where do I find this wpautop function?

I’m getting closer – just need a wee bit more help.

I found wpautop in the /wp-includes/functions.php file, and found line 66, which was originally

‘ $allblocks = ‘(?:table|thead|tfoot|caption|colgroup|tbody|tr|td|th|div|dl|d
d|dt|ul|ol|li|pre|select|form|map|area|blockquote|address|math|style|input|hr|p|h[1-6]|)’;’

which I changed to remove the ‘|p|h[[1-6]| at the very end.

This removed the line break AFTER the closing /h tag but not the one before, although when you View Source at least the source code looks correct.

I realize that whatever is within the tag would not be “broken” and if it were too long to fit in the remaining space on the line, it would naturally “wrap” down to the next line, but in my real-world test I have only one word within the tag, and there is plenty of space left on the line for it to not have to wrap down a line.

Any suggestions for what else I might remove from wpautop?

You really should not edit core code like that, but you also really should leave the P tag in the allblocks section, because it is still a block level tag. Just remove the h[1-6].

As for the rest, I don’t understand your meaning. Is it adding BR’s or something?

Hi Otto – I did wind up putting the |p back in because taking that one out made no difference. Taking out the H1-H6 did correct my problem where it was inserting a BR following the close tag.

I realize most people use the H tags in the standard way and would want that block format, but for my purpose I need to have the text within the H tags displayed just as any other text on the page – inline and with no styling whatsoever.

However, the text within the tag is still dropping down one line before the tag, so it now looks like this:

“Here is some text with a
<h1>keyword phrase</h1> that I want to be sure is styled like any other text in this sentence.”

So as you can see I still need to find a fix for the mysterious first line break. When I View Source it doesn’t show any BR, in fact it looks exactly as I want it to, but in the browser display there is still that dratted line break, even though I have my CSS set to whitespace: nowrap and display: inline……..

I don’t disagree with you about editing core code – I’m not entirely comfortable with it, but in this situation I don’t see any other options. I would prefer to add something to my theme’s functions.php that would do something along the lines of “remove_action” or “remove_filter” but don’t know enough to write such lines myself.

Any other ideas or suggestions would be much appreciated!

“Here is some text with a
<h1>keyword phrase</h1> that I want to be sure is styled like any other text in this sentence.”

So as you can see I still need to find a fix for the mysterious first line break. When I View Source it doesn’t show any BR, in fact it looks exactly as I want it to, but in the browser display there is still that dratted line break, even though I have my CSS set to whitespace: nowrap and display: inline……..

Can you point me to a page showing the problem? It’s a lot easier to debug issues when I can actually *see* them in action.

Hi Otto – thanks!

Here is a link:
https://www.baja-fun.com/about/advertise/

This is a page I doubt anyone would “stumble across” so that’s the one I’m testing this with. You can see the sentence that says:

Please give as much
information as possible, including …..etc.

I have the word “information” enclosed in an H1 tag. I did manage to get the BR that was formerly following the closing /H1 to go away, but can’t seem to figure out how to stop the word from dropping down to the next line.

As mentioned the technique works flawlessly outside of WP, just not within, so I think there still must be some rewriting going on that I can’t find.

Thanks so much for any ideas you can offer..

Yeah, I see it.

You know, I’m not even sure that you are allowed to do that. I mean, you can declare H1 to be displayed inline, but that doesn’t change what it is. It’s still a block level element, and this will render the page invalid regardless of what your CSS says. CSS only describes how to display the page, not how to parse it.

Basically, I think that when you open the H1, you implicitly close the P in most browsers, because then it’s parsing in quirks mode. Closing the P causes the line break. I tested this by making the P display:inline as well, and sure enough, it eliminated the line break (along with all the other line breaks due to paragraphs as well).

In short, there’s no way to do it. It’s invalid to start with and no amount of screwing with CSS is going to fix it. Use spans instead of header tags. That’s what spans are designed for.

BTW, this is not WordPress specific. The browser can’t tell the difference, it just sees the XHTML and the CSS. Not what generated them.

Thanks Otto – I really do appreciate your input, but need to keep searching for a solution. Actually what I’m trying to do is not unique – a number of websites are currently testing/using this particular style of markup to optimize SE results for certain keywords. Spans won’t have the same results because the SE’s read the content within H tags as words of importance – spans mean nothing to them.

It does work fine with just a plain old HTML page and associated CSS, and in fact I’ve seen it used successfully on a number of other sites that are non-WP sites.

I did try restyling the P tag but had the same problems – it solves one problem but creates more, so the fix is worse than the problem.

SO I respect your opinion, and largely agree with you, but don’t have much choice in this. The site owner insists on using this technique to emphasize keywords, so I may have to abandon WP if I can’t find a way to work around it.

It does work fine with just a plain old HTML page and associated CSS, and in fact I’ve seen it used successfully on a number of other sites that are non-WP sites.

No, it doesn’t. Save the page as HTML and CSS then load it as a static page. It still doesn’t work. Perhaps something else in your CSS is interfering (can’t think of what), but the point is that it is not a WordPress specific issue. WordPress doesn’t have any input on what your browser does. The CSS and the HTML are all the browser sees. WordPress is just generating the page, not rendering it.

Also, no matter what argument you use, the fact is that the resulting page is invalid. Any potential SEO benefits will be canceled out by the fact that search engines treat valid pages better than invalid ones. You think Google doesn’t run webpages through an SGML parser?

Also, search engines don’t treat header tags as keywords, they treat them as titles. If you want keywords, use meta tags. If you want to emphasize words in the content, use em or strong and style those appropriately. em and strong are more likely to be treated as keywords than headers are. Misuse of headers like this is more likely to get your site dinged down, not up.

Hello Otto

As I’ve said, I do respect your opinions, but on this subject I respectfully disagree.

And it does work. Please check this link:
https://www.baja-fun.com/blanktesth1.html

It is the same content as the page inside WP. As you can clearly see, no line breaks, no styling. This is what I’m trying to recreate within the WP Page heirarchy.

This technique is already in use on many other sites, and working as intended, to improve SERPs. H tags are not treated as titles, title tags are. H tags are treated as telling the SE’s what the page is about – it’s relevance to what is being searched. While strong and em tags work much the same way, they are not considered by SEs to be as important as H tags, hence this new technique.

I don’t particularly LIKE this method of SEO, but again as stated I don’t have much choice in the matter. It works outside of WP, I just need to make it work from within WP.

Hello TrishaM.

I srongly agree with Moshu to don’t use <h1> for anything else than a header…

But anyway, if it could help you, look at it :

The html example you posted here :
https://www.baja-fun.com/blanktesth1.html

In this document, the paragraph is not nested between <p> </p> tags… This is why your css style for h1 works.

Look here, I made two example :

Here is the same document, in html, but with the paragraph nested in the same <div> you have in your wordpress theme :

https://koolos.com/temp/blanktesth1_2.html

As you can see, your partagraph here is nested in 3 <div> and <p> tags… Meaning that your <h1> tags are nested in <p> : <p><h1>bla bla bla</h1></p>

In this document, your h1 styling doesn’t work…

Just for curiosity, I tried to remove all the <div>, leaving only <p> tags :

https://koolos.com/temp/blanktesth1_3.html

Same thing here… The style parameters for your <h1> doesn’t work…

So, my point is that <h1> (or any header) can’t be nested in a <p> tag…

As you can see in the source of the last example, I even tried to make a css element with “p h1” (meaning an <h1> child of a <p>)

And, as you can guess, all this example are straight html and wordpress doesn’t play any role there… It’s a css limitation… An <h1> can’t be nested in a <p> tag…

Of course, you could write a html page without any <p> and using two “br /” for paragraphs… It could works and you wont see any difference…

But Worpress, as any html editor, insert automaticaly a <p> tag in each paragraph… So I fear there is no way to use <h1> the way you want…

I would be very curious to see an html example of the technique you talked about… My guess is that those whom use it doesn’t use the <p> tag…

S.

Hello Simon

Thank you very much for taking the time to look at this, do some tests, and post such a clear explanation – I am grateful for your help and time.

Here is a real-world example of this technique in use:

https://www.azbreastnet.com/

If you view the source, you can see that in the second paragraph (the first one being the “welcome to…”) they are using H1, H2, and H3 tags nested within a paragraph tag. The technique is repeated several more times with other H tags nested in P tags on this page as well as several other pages on their site. This site is just one of several that I am aware of, and I’m sure there are many more that are doing this.

I asked the web developer on this site example how they structured the CSS in order to achieve this, and did mine accordingly. I did miss putting my test paragraph in a <p> tag as you pointed out and sure enough when I did it duplicated your results.

I’m at a loss to explain why it DOES work on other sites, but that is what I’m trying to do. Since it seems to work fine on other sites even when nested within a P tag, it seems logical to conclude that the P tag shouldn’t matter……and yet it does…..

So I will continue to try to seek a solution to this….may not find one, but I’ll keep trying…..