Step by Step Header Tags
Are you a new affiliate website owner who is looking for step-by-step instructions for inserting “H” tags in a WordPress post?
In this lesson, I will show you how easy it is to use the toolbar in the WordPress post editor.
What is an H Tag?
In case you don’t know what an H tag is – it is basically a Heading Tag, but because the HTML code is <h3></h3> (the example is for Header 3), it’s called H for short.
Hi, my name is Jessica. Today I want to show you a little bit about headers and how to turn your text into a header in different scenarios. So here is the screen I’m sharing with you. So the first thing to know about how to use headers is that search engines use them for search engine optimization, which is SEO, screen readers also use them. So if you’ve ever known anybody who listens to their web pages, a screen reader will allow them to jump from heading to heading. It is extremely useful to use these semantically correct. So, say I want this to be a headline. And I’m here on a WordPress site. In this WordPress site.
If I go like this and go bold it looks bold. If I go behind the scenes…I’m going to go under the hood right now and use my text tab. As you can see a quirk about WordPress is there are no P tags in here. But you know semantically you should have open P for paragraph and close paragraph. But that’s okay because WordPress is just like that. What it did was put the strong tag in here. So a screen reader it would show that there is some sort of an emphasis on this text but it wouldn’t read it as a header per se. So let’s go back to our visual tab, which is where a lot of people like to work when they are in a CMS. and instead of having this be a headline (meant to say ‘bold’, not ‘headline’) I’m going to take off that bold. And we’re going to use this. If it’s the first header on the page, you put that h1. When you go behind the scenes They put H 1 and that slash is a close h1.
I’m going back to my visual tab Then there’s usually some paragraph text and you can have an h2 after your intro text. So let’s make this an h2 Use your style assistant in your WYSIWYG editor And you put h2, It says here that there is a Shortcut. And if you learn this keyboard shortcut you can apply the heading to the selected text without having to go move your mouse. So there’s your subheader. Let’s see what happened behind the scenes. It put an h2 What I’ve seen a lot of people try to do when they have a different WYSIWYG editor than this one gives you… sometimes these WYSIWYGs – that’s what this is…it is ah, What You See Is What You Get, acronym Sometimes they have the font size right here and you can go ahead and change your font size: bump it up to 18 and then you can change your spacing in between your lines of text and you can change your color. All of that does weird things in your code behind the scenes and it doesn’t tell a screen reader or a search engine the importance of the text.
Bye-bye, until next time…
Steps for inserting H Tags:
Step 1. Start by highlighting the text you want to add an H tag to. In my example, I have highlighted “How to Insert H Tags”.
Step 2. On the toolbar, click the drop-down arrow next to the paragraph button. You can now scroll through the formatting tags.
Step 3. Chose the Heading. For my example, I chose Heading 2.
Done.
3 main Header Tags (formatting used):
-
H1 Tag Formatting (Used for titles)
-
H2 Tag Formatting (Used for subtitles)
-
H3 Tag Formatting (Used to start a new topic)
Other Common Formatting (formatting used):
- Bold (Used for emphasizing)
- Italics (Used for separation)
- Bold Italics (Emphasizing a separation)
- Bullets (used for creating lists)
- Numbers (used for creating numbered lists)
Conclusion:
This lesson covers the basics of how to insert an H tag.
I personally don’t use too many in my posts because they tend to be distracting, but properly placed header tags make reading a good post easier to remember, as well as easier to read. They also add on-page SEO.
