Now that we’ve discussed how the WordPress Text Editor works in the context of using HTML, we’re going to move on to using headings and other HTML text elements.
Adding Headings to Your Text
Let’s begin in the visual view. I’m just going to break this content up into individual paragraphs and assign some heading. H3, this is an h4 heading, an example of an h5 heading and finally, an h6 heading. So we’ve got these different headings in here.
If you click your mouse in there you can see these are each different paragraphs, right? Well, what you can do also is place your mouse in the text and then choose which heading you want to use. For whatever reason, sometimes you have to do it twice and I don’t really know why that’s the case. You can also select it and choose the heading, that’s heading 1, heading 2, heading 3.
How to Decide Which Heading To Apply
If you don’t know what to do with headings, you are not going to use an h1 tag in a page because the page title is made up of the h1 tag. And most often you only want one h1 tag on a page. H2 tags are your typical main headings inside your page. They’re really intended to break up your content in a logical blocks, like major points in an outline. H3 headings are for subpoints under those h2 headings and h4 headings are subpoints under the h3 headings.
And then you get the h5 and this is usually text that is considered to be less important so almost axillary text and then finally, h6 is text that is the least important. On our site we generally only use h2 through h4s.
Anyway, you can reliably make these kinds of changes inside your text editor and they will automatically stay in place regardless of switching back and forth in the different text editor views. So whether you’re switching back and forth from visual view to text view, if you update it the heading don’t suffer from the same problems that paragraph tags suffer from. You can see it’s all there.
Headings are Block Level Elements
All of the headings are block level elements which means every time you create a new heading, it starts a new line. So let’s come over here to the editor and just grab a piece of paragraph text. Let’s copy that piece of paragraph text and come right over here outside of the h2 and paste that paragraph text.
This is going to automatically push this text down to a new line because the h2 is a block level element. In fact, WordPress interprets this paragraph text as paragraph text and therefore it’s a block level element as well and it’s going to push it down to the new line. So, you couldn’t start the paragraph on the same line as the heading here because each of these are block level elements and they therefore automatically start a new line.
Now, those are headings. There’s also something called a blockquote and the purpose of blockquotes is essentially to set aside a block of text as special. It might be a quotation that’s some place else or it might be a quotation that’s in the content. It might just be something you want to emphasize.
The editor has this feature called the blockquote that will automatically add that. So let’s come over here and hit enter there and then come down and select this much of it. Once we have them as separate paragraphs what we can do is select one of these paragraphs, come over here to this quotation mark then and click in it and it automatically indents it.
Now what that means is, it adds the blockquote to that. So this is really interesting, notice that all of a sudden it added those paragraph tags back in. So what it’s done is, it wrapped this in the blockquote HTML tag and if we come over here and refresh our page now, you can see that Genesis has this blockquote style with the little opening quotation mark and then pushes it in and changes the font color and that sort of thing.
So this is a different type of HTML element. We had paragraph elements, we had heading elements and now we have blockquote elements and there’s one other kind of element that I want to talk about and that is the span element.
The Span Tag
The span element cannot be inserted using the visual editor. Because it’s HTML that can’t be inserted here unless you are going to use bad practices. So bad practice would be to take the text “potential customer” and say, I want to change that text color to red here. If you do that, what that’s done is it has added a span tag to this piece of text and then added an inline style to that telling it should be red.
Now if we come back over and look at this, you can see there’s this span here and it says, color=#ff000 and then the closing span tag, opening span and closing span. That is very poor practice so we are going to remove that color from it and I’m going to show you the right way to use span tags as we start talking about styling text using CSS.
The span is another element that is not a block level element, it is an inline element. It does not interrupt the line, it doesn’t start a new line, it’s just an inline element. It’s a tag that wraps around the text and you’ll see examples of its usefulness here later as we work our way through this class but that’s the third type of text-based HTML element that you’ll likely to run into a lot.