0:08 Um, to get started, let's discuss why it's important. First, every page should have an H1, followed by H2, and then descending orders of headers as you go down.

0:19 Um, this is something that, although structurally looks really nice, it also is extremely important for accessibility, as many people who use screen readers rely on headers in order to, uh, understand where they are in the content of the page.

0:33 If headers are all over the place, like you have an H1 followed by an H5, people are going to question if they're missing any, uh, information on the page, and it won't be necessarily clear to them, uh, where they need to find the information they're looking for on that specific page.

0:49 Uh, however, it's also really important for SEO. It's something that, uhm, search engines will also look for to help them understand the page as well.

0:56 So there are multiple benefits as to why it's, uh, very important to follow traditional header structure when you're building out a website page.

1:04 Uhm, now, I will go ahead and start creating a test page to show you how you can, uh, structure headers, but the most important thing is again, that you have one H1 for every page, followed by H2s, and then you can go to H3s. Uhm, you can also skip back up to H2s and have an H2 at the start of every 

1:24 section. Uhm, so it's most important that when you're descending down the list, you have a header don't skip a header class, uhm, but if you go back up and create a brand new section, you can always jump back up to H2s and create a new section, uhm, to sort of, uh, start the content of the over in that

1:41 specific part of your page. All right. Let's create a test page and we'll just use some content that is lorem ipsum to fill in the specific areas.

1:56 All right now on the dev site that I'm creating. Currently working on this is our Gutenberg sandbox. So this is going to show how to build the page using a Gutenberg style.

2:04 However, um, this header class information is just as important for Elementor sites as well. Um, it'll just look a little different on this editing window, how to get to those specific.

2:14 header classes. So to start, I'm going to create a test page, and this, uh, title, the way we have the pages built, this title will act as the h1 for a page if you don't have the hero field filled out, as it says here.

2:30 However, I will fill this out so our h1 appears as appropriate, and then I'm going to add in some blocks underneath it with a couple of various We'll use a basic block.

2:46 A color a cards block, and a blurb block just to illustrate the different ways that headers may appear on a page.

2:57 So in our basic content block, we can include a header. A header two to intro, introduce that specific section of content.

3:08 So we're going to make this a header two. I'm going to just throw in some random text. And then the same thing can go for a column cards, say the column cards are introducing a second topic to this page.

3:27 We could use another header two. The same or similar content underneath it. Same, just so it's easier for me. Um, and then when we add in these cards, these cards will have automatically built into their title here in H three class associated with them.

3:48 And that's because these are preceded by. Writing the information available in the header, so you will want this to be an H two and then the cards will be H threes.

3:57 This will be the same on the Elementor pages. However, the card WYSIWYG looks a little different on Elementor. And then we will have some lorem, some underneath.

4:22 Now the same sort of idea goes for the blurbs as well. Blurbs usually have a header section, or sometimes they will have a side-by-side intro section.

4:38 with the blurbs on the right of the intro section. So in this case, what we could do is we could create a H2 in this section here, and then have all of the titles be H3s along here.

4:52 Or we could have an H2 up here, and H3 in this section. And then these could be H4s. We wouldn't use the title field because that will automatically, uhm, create these as H3s. But we could fill in H4s here.

5:06 So I'm going to show how that might look. And then here will be the header three.

5:21 And then these. I will have a header four, like that. Now I'm going to publish this.

5:43 I'm the page so that we can look at it on the front end and see how this appears. This page is pretty basic, but you can get an idea of how the header structure will appear.

5:55 So here is our H1, here is an H2, followed by another H2, which is then followed by H3s. Below that we have an H2, with an H3, and then an H4. And then below that we end with a global CTA, which will just be an H2. So, the best rule of thumb is to make sure you don't skip classes as you create headers

6:21 for a page. So, uhm, don't skip between H2s to H4s without including an H3 somewhere in there. Uhm, and then as you go down the list, uh, make sure to continue following the descending order without skipping any levels.

6:33 Uh, this is, again, essential for accessibility. It's also just a great way to, uh, make sure that you're content is structured appropriately and looks, looks right, uhm, to people who are visiting the page.

6:46 Uh, you may appreciate the style of a specific header over the style of maybe the H2, uhm, however, you can always create a class where this is still considered an H2, but then styled differently, uhm, some pages will, or some websites will have that ability to style something differently than the class

7:06 that it's associated as, uhm, we don't always recommend doing that, but if that's something we're interested where you're more worried about the style, uh, you will have that ability, uh, in some cases.

7:16 Uhm, however, it's always best practice to go in this, uh, specific order when you're creating headers, and, again, it's just very helpful for accessibility.

7:25 Alright, thank you for watching, and have a great day.