In this video, we’ll cover the basic structure of content on a web page. Content is ultimately the most important aspect of any website and it’s important to understand how to structure your content semantically with certain tags called Headings.
Now that you understand the basic structure of a page, lets discuss the basic structure of content on a page.
Content is ultimately the most important aspect of any website and structuring your content semantically on a web page is just good practice. Doing so, will also provide many benefits for your website down the road, such as ranking well on search engines, which I’ll cover later on in this video series.
At this point, you’re probably wondering what exactly do I mean by semantically structuring content? Well, in HTML, there are numerous tags that provide your web browser with semantics, or rules for interpreting and displaying the content. These tags are basically short pieces of code commonly used all over a web page and would look something like this in HTML code.
Fortunately, when you use a website builder, you won’t need to learn any code to add these tags. The right code for each tag is automatically injected for you. But you should be aware of how to structure your content semantically with certain tags. Especially with tags called headings.
Headings are defined with the <h1> through <h6> tags and should be used for… you guessed it, headings. You see headings on virtually every web page you visit. Headings are important as they help to semantically structure your page’s content. Their purpose is to designate a hierarchy of headline importance, so that both human readers and automated search engines can look at the page and easily determine its content structure. For example, you may skim a web page by its headings to get a better idea of what the article is about before reading it in depth. Search engines use headings in a similar way, basically to establish relevancy.
It is important to learn how the various headings (h1, h2, h3, and so on) should be ordered. Your page’s content should start with an h1 heading, because the h1 heading is your top level or main heading. It’s followed by h2 headings, then the h2s are followed by the less important h3s, and so on. Typically, there is only one h1 heading on a single page, but there may be multiple lower degree headings such as h2s and h3s.
Note: Website builders may style headings to look differently. For example, they may style an h1 heading with a larger font size and an h6 heading with a smaller font size. As you see here in this screenshot, the headings are styled by size. It is common to see this, but important to realize that the physical size of a heading has nothing to do with semantically structuring content. The size is just a style that was applied purely for aesthetic purposes. It doesn’t matter if any of these headings were styled to look like this – or to look like that.
What matters is the structure, or order of headings on a page. You should sort the order of your headings by importance and relevance. Also, another common mistake that’s easy for a beginner to make, is to style text to give the visual appearance of headings. It’s tempting to simply change the text formatting by increasing font size or making it bold. However, that is not a heading and is incorrect. Use actual heading tags (<h1> – <h6>) for all content headings.