HTML header tags are important for maintaining the overall structure of your website, as well as for SEO purposes. Their locations are obvious if you are coding your site from scratch, but they can be somewhat more elusive if you are using the Divi Theme on WordPress. 

Using the “Text” module

For this example, let’s make the cyan area our <h1> title, and the lower paragraph will remain within <p> tag. 

First, use “Text” tab, instead of “Visual” to see any tags or formatting that are present. By default, text in this module is enclosed by the <p> tag. Simply change these tags to whichever you would like, h1 in our case.

Then, in the “Design” tab, and under “Heading Text”, you will see options to format text for headers <h1> to <h6>. Changes to the formatting of the text enclosed in the given tab must be done here, not in the greyed-out “Text” tab above it.

Using other modules

Modules like ‘blurb’ and ‘call to action’ can’t take header tags in the text area where the title is input, as they will display them like regular text. Instead, navigate to the “Title Text” segment in the “Design” tab and select the type of heading you want used. Make the format edits as you did on the previous module.

Bonus: viewing the code of your page

If you want to see how the actual code of the page is set up, do as follows:

1. Visit your page normally, outside of WordPress
2. Right click on the page
3. On the menu that has appeared (called the “context menu”), click “View page source”

You can now view the HTML/CSS/JavaScript code that makes up the page. Use CTRL+F (or CMD+F) to find and highlight specific text, like “<h1>”. 

Featured image by Neo, at pexels.com