In this part of our Introduction to HTML for WordPress and Thesis users we’re going to look at HTML in the WordPress text editor but before we start talking about styling text, we’re going to come over here to Pages and look at our Test HTML page.
Text/HTML and Visual View
As you know WordPress has these two different view of this text editor, you have the visual view of the text editor and you have the text view where the HTML is visible. In fact, you can already see some HTML here. There’s the opening h2, there is the closing h2 tag and you can type HTML directly inside of this HTML view.
You can also use the visual view and the visual editor for creating HTML and that’s how WordPress expects you to do it, right? It provides the text editor for people who really want to do something out of the ordinary but it provides the visual editor, essentially a kind of what you see is what you get style of editor, that gives you the opportunity to essentially create HTML without really realizing you’re creating HTML.
The text editor is pretty good at doing this with simple HTML so things like paragraphs and headings and lists, images, that sort of thing it does pretty well. On the other hand, it mangles the living daylights out of HTML especially when you switch back and forth between the visual view and the text view.
In fact, what would be great is if you could have an HTML view that was preserved for you so that it didn’t get run through the wringer of the visual view and the primary issue here comes down to paragraph tags. You notice that there are no paragraph tags here in this but let’s come over and take a look at the test HTML page and view the source chart.
Let’s close up the menu and the header so we’re here in columns and content, we close up headline area. You can see inside of that content area we have our heading text and then we have a paragraph and another paragraph with opening and closing paragraph tags even though there are no paragraph tags showing here.
This also ends up being obvious if you just view the straight source. This is the heading that we’re looking at and then here is that paragraph text and it has this paragraph tag that’s wrapping that paragraph. Now, the reason that’s there is is because WordPress automatically adds the paragraph tag to this text.
So if you write some text here and hit enter and write some more text and update it, WordPress automatically makes that a new paragraph even though over here, there’s no p. If we refresh this, if we inspect that element you can see that we end up with another paragraph tag there.
The reason why that’s a problematic is because WordPress looks at this text and then essentially guesses that’s what you want. It guesses that this enter that you entered when you went to the next line meant that you want it to be a paragraph break so that wraps everything in a paragraph tag again and keeps on going. It makes that interpretation and if it sees HTML it doesn’t recognize or doesn’t know what to do with, it can trash it. So the WordPress text editor is not particularly good at writing just straight HTML or complicated HTML.
Paragraph Breaks, Line Breaks and Non Breaking Spaces
Something that you want to consider is the difference between a paragraph break and a line break or a non-breaking space. For example, I’m going to delete this so we’ve got this “Write some more text” there as a continuation of this paragraph. If we update it and come over and refresh it, now it’s up here as part of that. And if we view the page source, here it is all the way over here “Write some more text” inside of that paragraph tag.
Well, you can actually add an HTML non-breaking space here instead of a paragraph by hitting shift+enter. Now, shift+enter is not giving you as much space, right? You can see that there’s not this big gap, now it’s just a new line rather than a paragraph break. Let’s update this, come over to HTML and you can see it’s been moved down.
Let’s reload this you can see it’s been moved down and if we view the page source, you can see it’s been moved down again and there is this br/ tag here and the br/ tag stands for line break or break and it is essentially calling for a new line without calling for a new paragraph.
So we could shift+enter again and add more, shift+enter again and a little more and update. Now what we’ll end up with, even though we don’t see any br/ tags there, nevertheless each one of these things is going to have a br/ tag after it. So write some more text br/, add some more br/, and a little bit more and then you get the closing paragraph tag.
And that’s why there is a potential issue with writing HTML in WordPress because the WordPress text editor automatically interprets content that you’ve placed in the text editor and attempts to add paragraph tags and break tags where it perceives those want to be used.
However, you can write your own HTML here. In fact, we could do that, add abr/ tag there in each place, update it, come back over here and refresh it. Now it’s going to continue to look exactly like that and that’s just fine. However if we come over here and view it, you can see in the visual it doesn’t represent the
tags. If we update it here those br/ tags are going to get killed.
Come back over and take a look at it and now, those br/ tags are all gone, right? So that’s an example of why this is not that great for HTML. However, if you choose, you can write as complex as HTML as you want to as long as you never switch back over to the visual view.
If you want to be able to switch back and forth between the visual view, then you want to let WordPress manage paragraphs and breaks by doing what I showed you, shift+enter, shift+enter, shift+enter or enter and let the visual editor write most of your HTML for you because this is actually quite good at very simple HTML.