Build Your Own Business Website header image

Introduction to HTML for WordPress & Thesis 2.1 Users – Part 5 – Headings & other HTML Text Elements

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to - ,

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Now that you know how HTML works in the WordPress Text Editor, this brings us to the next topic which is using other HTML text elements. You’ve already seen that we have such a thing as headings and, of course, you’ve heard me talk about headings in other classes.

Headings

Headings are h tags and you’ve got h1 through h6 and in the WordPress text editor. You can place your cursor in a line where you want the entire line to be heading and then come over to your HTML elements selector here and instead of paragraph, you would select the heading you want. Here I’ll choose Heading 1. And if we come over and take a look at it, here’s the Heading 1, right?

Adding Headings in the Visual View

Let’s look at the view source before we go back to this and you can see that it’s actually generated a p tag but once we save it, it’s now a Heading 1 tag. Here’s an h1 heading. You generally will not use h1s because the page title is the h1 by default and you don’t want to compete with that for priority.

H2,is the typical main title you’d use in your text. You can also, if you are concerned about it, and you want to make sure that the h2 tag is only applied to the text you select then you can just select the text and apply the heading.

You have actual control over what the heading is for the page title but it’s generally best to keep it an h1. You could theoretically change it to something else instead and there are times when you may want your page heading to be one thing but you want the main page title to be something else or your main h1 heading to be something else. In that case you might yourself substitute your h1 in place of the default page title h1 but that’s for fodder for another conversation.

Anyway, there’s an h2, again you could do the same thing with your h3, update. Now, these h tags are going to keep their settings no matter what you do. You can save it and go back and forth between visual and text views and it keeps the heading tags in no problem. So WordPress doesn’t have any problem managing h tags like it has with
tags or paragraph tags.

Adding Headings in the Text/HTML View

You can also just choose to write your own. So opening tag h4, closing tag h4, you can do the same thing with an h5. By wrapping this text in those tags, you have made them into headings that are a specific kind of HTML element.

Block Level Elements

Paragraphs are block level elements which means they automatically create a new line and they can have height and width and things like that. And so are headings, headings automatically create a new line. If you take this h2 and place it on the same line as the h1, it may show up here but it’s still going to automatically create the h2 on a separate line from the h1 because these are block level elements.

The same thing is true with text, you could come along here and grab a block of this paragraph text and you could put that in between the h1 and the h2 and what WordPress is going to do is take the h1 and then a new line for the paragraph and then a new line for the heading. So there it is, your h1, your paragraph and your heading.

The reason why there’s a lot more space here than there is here is because the space is defined by CSS. Because the h1 tag is generally not used inside of the post, it is generally confined to the title of the page up here, there is no style defined for inside of the content. So its line height is funny and it doesn’t have any bottom margin like it ordinarily would but nevertheless, these are 3 HTML blocks because each of these are block level elements.

Blockquotes

The next thing you have are blockquotes which is also a kind of HTML element. Essentially a blockquote is it’s like a little quotation that you are inserting into a larger piece of text. So we could, for example, take this stretch of text right here and create a block quote by clicking on this quotation mark here. But you’ll see what happens.

Let’s take a look at that here. It didn’t work because block quotes, they’re block level elements and you can’t just make part of a paragraph a blockquote. What you have to do is separate it and then select it and make it a blockquote. You can see that it automatically indents itself like that. Now update it, reload it and now you have a blockquote.

The blockquote again is a block level element and it starts a new line, it has height and width and there are all kinds of ways in which you can style it. And the HTML tag that creates it is this one right here, blockquote.

If we add a little bit of space here between our block quote and our lines, it’s not going to make any change to the spacing of a page because WordPress is going to ignore these spaces as being irrelevant and will create the line spacing based on the blockquote block. The paragraph block and won’t consider this space to be significant and in fact, you can see when I flip back and forth, that space went away.So anyway, there’s the opening blockquote and the closing blockquote and that’s what creates the blockquote.

Span Element

The third kind of HTML element is a span element. Now, there is no clean way in WordPress for you to create a span element inside of the HTML editor. It will only automatically create span level elements when you are using inline styles and that is bad practice which we’ll talk about a little later. But a span element looks like this. It wraps text. It does nothing in itself, it just gives you a way of assigning a class to the text or the thing that it’s wrapping. So it does nothing by itself and it is an inline element so you can’t give it a height or a width or any positioning.

If we update that, that span element stays here and if we view our page source, you’ll see we’ve got a span. Here’s it is. We just aren’t doing anything with it. We are going to do things with it here in a little while but this is also a text-based HTML element, the span tag. I’m going to show you the poor use of it before you see the real use of it.

0 Comments… add one
0 comments… add one

Leave a Comment