{"id":810162,"date":"2020-06-25T12:00:00","date_gmt":"2020-06-25T12:00:00","guid":{"rendered":"https:\/\/www.lafactory.com\/blog\/non-classifiee\/how-to-use-html-heading-tags-correctly\/"},"modified":"2020-06-25T12:00:00","modified_gmt":"2020-06-25T12:00:00","slug":"how-to-use-html-heading-tags-correctly","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/en\/how-to-use-html-heading-tags-correctly\/","title":{"rendered":"How to Use HTML Heading Tags Correctly"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"post-130323\">\n<p>Every website is its own unique monster, with developers and designers putting their own signature voices into the code. But one element that every single website has in common is HTML heading tags. Not only do these headings break up your content into more readable sections, they create the semantic outline of your site so that search engines and accessibility software can tell exactly what content makes up the site. There is occasionally some confusion as to the proper use and function of HTML heading tags, so we want to go through all 6 tiers and discuss how and when to use them correctly.<\/p>\n<p><iframe loading=\"lazy\" title=\"How to Use HTML Heading Tags Correctly\" width=\"1080\" height=\"608\" src=\"https:\/\/www.youtube.com\/embed\/H519o8BvpQA?feature=oembed\"  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p><a class=\"button primary-button inline-button accent-red\" href=\"https:\/\/www.youtube.com\/c\/elegantthemes?sub_confirmation=1\">Subscribe To Our Youtube Channel<\/a><\/p>\n<h2>Why Use HTML Heading Tags?<\/h2>\n<p>Like we said above, these tags create the skeleton of your site. Without them, not only is the title and purpose of your site less-than-clear, but the content looks to users and to bots as though it were one giant wall of text \u2014 even if you break it up using paragraphs.<\/p>\n<p>Plus, <a href=\"http:\/\/accessibility.psu.edu\/headingshtml\/\">screen readers and accessibility software<\/a> use them to navigate your content (sometimes literally). So if you aren\u2019t including HTML heading tags, your site becomes inaccessible to many people because they simply can\u2019t move around the page and content.<\/p>\n<p>Additionally, search engines and other web crawlers that make it to your site navigate via your headings, too. Recently, Google has been considering code <a href=\"https:\/\/www.elegantthemes.com\/blog\/wordpress\/semantic-html-best-practices-for-2019\">semantics<\/a> in its rankings, meaning that search intent is weighed very heavily. Your HTML heading tags are a major part of this, telling Google and visitors where on the page to find specific information, organized by hierarchical importance.<\/p>\n<p>And each tag within your page helps all of this in its own way.<\/p>\n<h3>Tag Hierarchy is Important<\/h3>\n<p>HTML heading tag heirarchy matters. The order in which you use these tags can make or break SEO for your site. While you can style them using CSS and make an H6 tag bigger, bolder, and brighter than an H2, you should still try to keep them in order so as not to confuse the crawlers (and readers).<\/p>\n<p>Think about the tags in ascending order as though they are the headings for the outline of your post. You should only (in general), put a higher number under its immediate predecessor. You can nest them as many deep as you want, but make sure you only put the next one in sequence each time.<\/p>\n<p>Here\u2019s an example:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">&lt;h1&gt;Title&lt;\/h1&gt;&#013;\n    &lt;h2&gt;Main Point Number 1&lt;\/h2&gt;&#013;\n        &lt;h3&gt;Subtopic&lt;\/h3&gt;&#013;\n            &lt;h4&gt;Very specific point&lt;\/h4&gt;&#013;\n        &lt;h3&gt;Main Point Number 2&lt;\/h3&gt;&#013;\n            &lt;h4&gt;Subtopic&lt;\/h4&gt;&#013;\n                &lt;h5&gt;Example or important chart&lt;\/h5&gt;&#013;\n            &lt;h4&gt;Specific point&lt;\/h4&gt;&#013;\n                &lt;h5&gt;Example or important chart&lt;\/h5&gt;&#013;\n                    &lt;h6&gt;Highly specific example explaining this point&lt;\/h6&gt;&#013;\n<\/pre>\n<p>There might be specific cases where you have a single H6 above an H4, but for the most part, Google and other search engines determine topic priority and gauge content effectiveness to search intent by using headings to navigate your content.<\/p>\n<h2>H1 Tags<\/h2>\n<p>The H1 tag may be the simplest of the HTML heading tags, while also being one of the most misunderstood. In most cases, you will see the H1 heading as the title of a particular page or post. It\u2019s what search engines will (probably) display in results. Your browser will also likely show this in its title bar, though many SEO plugins and similar apps let you change it for those. Because of that, while it\u2019s important to have your target keyphrase in the H1 tag, it\u2019s not 100% necessary. Write your headlines and titles semantically to cover visitors\u2019 search intent instead of keyword stuffing the HTML heading tags.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter with-border size-full wp-image-131404\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2020\/06\/001-HTML-Heading-Tags.png\" alt=\"h1 example\" width=\"960\" height=\"425\" \/><\/p>\n<p>The image above shows an H1 tag used as the entry title for an article on the Elegant Themes blog. It is the only H1 tag on the page, too. This indicates it is the topic of the content on the page.<\/p>\n<p>For years, standard practice was to have one (and only one) H1 tag per page. For the most part, this is still good advice. Google and other search engines crawl your page and seek out the H1 tag. They then use it to determine the topic, title, and structure.<\/p>\n<p>However, Google has said explicitly that having multiple H1 HTML heading tags on your site <a href=\"https:\/\/www.youtube.com\/watch?v=zyqJJXWk0gk\">incurs no SEO penalty whatsoever<\/a>. That doesn\u2019t mean go nuts using them everywhere on your site, but what it does mean is that you can use more than one per page when the need arises.<\/p>\n<h3>When to Use Multiple H1 Headings<\/h3>\n<p>The sole purpose of an H1 is to indicate a full section on a single topic. That means that if you have a single page that has more than one topic, you would want to use an H1 for each new topic on that page. Doing so would tell Google that your page isn\u2019t <em>just<\/em> about the topic in the title. But there might also be a section on a completely different (yet related) topic lower down.<\/p>\n<p>On single-page websites, this is also important because you might have an <a href=\"https:\/\/www.elegantthemes.com\/blog\/marketing\/how-to-write-the-best-about-me-page-possible\">About<\/a>, <a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/how-to-creatively-use-divis-toggle-module-to-showcase-pricing-plans\">Pricing<\/a>, <a href=\"https:\/\/www.elegantthemes.com\/blog\/wordpress\/how-to-create-the-best-contact-page-possible\">Contact<\/a>, and <a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/create-a-scrollable-portfolio-navigation-list-with-divis-scroll-effects\">Portfolio<\/a> section on that one page. So how do you let Google know that the content contained within each section is its own autonomous unit?<\/p>\n<p>H1 tags, that\u2019s how. You treat each section as though it were its own mini-webpage, using the hierarchy we discussed above in each. That way, Google sees the headings as it navigates across the page, and it can then determine which of those sections to pull featured snippets from (and so on) to answer searchers\u2019 questions.<\/p>\n<p>You may also choose to use an H1 tag each time you use a <em>section<\/em> tag on your site, but we suggest only doing that when it\u2019s a section of parallel importance to the page\u2019s title, rather than a subordinate one.<\/p>\n<h2>H2 Tags<\/h2>\n<p>H2 tags, now, are going to most likely be the most used HTML heading tag on your pages. And for good reason. Most posts and pages on the internet consist of a single topic with only a few subheadings. We recommend that every piece of content you create contain at least one H2 tag. Yoast and other SEO plugins suggest a heading roughly every 300 words. Depending on your content, that\u2019s what H2 tags are for.<\/p>\n<p>They separate out subtopics (or steps) for ease of reading. For example, most of our posts primarily consist of H2 headings (with H3 when applicable). That\u2019s because our articles are on a single topic, where we\u2019re trying to solve a single problem. We will have the title such as <a href=\"https:\/\/www.elegantthemes.com\/blog\/marketing\/how-to-use-obs-studio-to-livestream\">How to Use OBS Studio to Livestream<\/a> as H1, but the subheadings like \u201cHow to Get Started with OBS Studio\u201d will be in H2.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter with-border size-full wp-image-131503\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2020\/06\/002-HTML-Heading-Tags.png\" alt=\"example of h2\" width=\"960\" height=\"670\" \/><\/p>\n<p>The H2 tag represents individual steps that pertain directly to the H1 topic. In that particular post we used the following structure:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">&lt;h1&gt;How to Use OBS Studio to Livestream&lt;\/h1&gt;&#013;\n    &lt;h2&gt;What is OBS Studio?&lt;\/h2&gt;&#013;\n        &lt;h3&gt;What about SLOBS?&lt;\/h3&gt;&#013;\n    &lt;h2&gt;How to Get Started with OBS Studio&lt;\/h2&gt;&#013;\n    &lt;h2&gt;OBS Studio Setup&lt;\/h2&gt;&#013;\n        &lt;h3&gt;Setting Up a Scene in OBS Studio&lt;\/h3&gt;&#013;\n        &lt;h3&gt;Adding Sources in OBS Studio&lt;\/h3&gt;&#013;\n    &lt;h2&gt;Adjusting Sources Onscreen&lt;\/h2&gt;&#013;\n        &lt;h3&gt;RMTP Keys and OBS Studio&lt;\/h3&gt;&#013;\n    &lt;h2&gt;Wrapping Up&lt;\/h2&gt;&#013;\n<\/pre>\n<p>The H2 heading tags in this post go over the main ideas, such as getting started and downloading it, setting up the actual software, and then adjusting how your screen appears to viewers. While there are steps involved beneath those in H3, too, the H2 headings indicate the large-scale picture of the article. They\u2019re a high-level view that crawlers and readers will be able to scan over to see if the article contains the information they are searching for.<\/p>\n<p>In general, you will have multiple H2 tags per article, while you might have no subheadings nested under them. If your page or post is on a single topic that isn\u2019t broken down into sections with subsections like the example above, it would be better to have multiple H2 tags than nested H2 -&gt; H3 -&gt; H4 because those indicate to crawlers you\u2019re diving deeper on a suptopic than expanding on the post\u2019s primary subject.<\/p>\n<h2>H3 Tags<\/h2>\n<p>H3 tags, on the other hand, are where your articles can really dig into the details of your topic. You should never use these H3 tags directly under an H1. Googlebots and search engines see them absolutely as subheadings. Whereas H2 is accepted as being a primary heading for sections within a single article (with the H1 declaring the main topic as title, remember).<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter with-border size-full wp-image-131504\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2020\/06\/003-HTML-Heading-Tags.png\" alt=\"h3 example\" width=\"960\" height=\"420\" \/><\/p>\n<p>If you look closely at the image above, you will see that the actual styling and sizing between our H2 and H3 tags aren\u2019t terribly different. Reason being, we don\u2019t want you to assume by scanning that any point we make in an H3 is less important than an H2. Because it\u2019s not.<\/p>\n<p>It\u2019s only smaller in size to indicate that it\u2019s a subordinate point to the H2, rather than a direct tie to the overall topic, which is most important from a structural standpoint regarding the SEO for your article. For human readers, rather than robots, the visual distinction simply helps move them down the page and break the information down to parse more easily.<\/p>\n<h2>H4, H5, H6 Tags<\/h2>\n<p>We\u2019ve lumped these together for a reason. In general, you will be hard pressed to find any sites that make full use of the H1 to H6 range of HTML heading tags. By far, the most popular structure is H1 to H3. Just like you rarely see a content outline to beyond the second nested level.<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">I. Idea &#013;\n    A. Subpoint&#013;\n        1. Detail&#013;\nII. Idea&#013;\nA. Subpoint&#013;\n1. Detail&#013;\nIII. Idea&#013;\n<\/pre>\n<h3>H4<\/h3>\n<p>For the most part, the H4 tag will serve the same purpose as H3. You will use them to go into detail for steps and examples, but always nested below your main headings. Designers generally style them with CSS smaller than H3. They tend to see limited use in ordinary content creation. A topic tends to be very in-depth if the ideas need to be broken down so that an H4 heading tag is needed.<\/p>\n<h3>H5 and H6<\/h3>\n<p>You can use H5 and H6 headings, in a couple of different ways.<\/p>\n<h4>The First Way<\/h4>\n<p><em>(Just for an example, we\u2019ve broken this particular section into various parts via heading, and we are now under H4 because it\u2019s a sub-subtopic of the main article.)<\/em><\/p>\n<p>These headings are often used in tables of contents and similar lists, though their main function is technically the same as the others, delineating topics of descending importance throughout the page. It will be pretty rare to find a document with a full array of headings down to H6.<\/p>\n<h4>The Second Way<\/h4>\n<p>Some people use H5 and H6 tags as \u201cspecialty\u201d formatting headings. They will apply special CSS to these two HTML heading tags that is completely different from H1 to H4. You can then use them to call attention to topics and ideas that might otherwise get overlooked.<\/p>\n<p>This isn\u2019t technically best practice, as headings are hierarchical. However, if your site is structured well overall and you use H5 and H6 sparingly as specialty styles on certain individual pages or posts, you will almost certainly take no SEO hit.<\/p>\n<p>Just remember that even when you\u2019re using them for special formatting, you don\u2019t break out of the hierarchy. Keep them in order. So if you use H6 to style a subheading, make sure the next one you use is an H1 or H2 to show you\u2019ve moved back to the standard structure.<\/p>\n<h2>What Not to Do with HTML Heading Tags<\/h2>\n<p>Do not structure a single page with the entire hierarchy of headings all the way down. You are better off with an H1 for a title and all H2s, rather than each successive heading being nested.<\/p>\n<p>Yes:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">&lt;h1&gt;Title&lt;\/h1&gt;&#013;\n    &lt;h2&gt;Main Point Number 1&lt;\/h2&gt;&#013;\n    &lt;h2&gt;Main Point Number 2&lt;\/h2&gt;&#013;\n    &lt;h2&gt;Main Point Number 3&lt;\/h2&gt;&#013;\n    &lt;h2&gt;Main Point Number 4&lt;\/h2&gt;&#013;\n<\/pre>\n<p>No:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">&lt;h1&gt;Title&lt;\/h1&gt;&#013;\n    &lt;h2&gt;Point Number 2&lt;\/h2&gt;&#013;\n    &lt;h3&gt;Point Number 3&lt;\/h3&gt;&#013;\n    &lt;h4&gt;Point Number 4&lt;\/h4&gt;&#013;\n    &lt;h5&gt;Point Number 5&lt;\/h5&gt;&#013;\n    &lt;h6&gt;Point Number 6&lt;\/h6&gt;&#013;\n<\/pre>\n<p>Additionally, you don\u2019t want to use the headings haphazardly. Only use them in order. Otherwise crawlers will have no idea how to navigate your page, nor will accessibility software.<\/p>\n<p>No:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">&lt;h1&gt;Title&lt;\/h1&gt;&#013;\n    &lt;h3&gt;Point Number 2&lt;\/h3&gt;&#013;\n    &lt;h2&gt;Point Number 3&lt;\/h2&gt;&#013;\n    &lt;h6&gt;Point Number 4&lt;\/h6&gt;&#013;\n    &lt;h5&gt;Point Number 5&lt;\/h5&gt;&#013;\n    &lt;h4&gt;Point Number 6&lt;\/h4&gt;&#013;\n<\/pre>\n<p>In general, you can assume a crawler will know that you\u2019ve moved out of a subsection when it finds the next H1 or H2. In the above code snippet, the crawlers and bots would have a hard time parsing the structure of information.<\/p>\n<h2>Wrapping Up with HTML Heading Tags<\/h2>\n<p>And see? We\u2019re back to an H2 heading to wrap things up. Heading tags are an important element of every single website out there. Using them properly can increase your search engine rankings, as well as the UX of your site since visitors will be able to more easily find the information they\u2019re seeking in your content. Remember to be sure not to keyword stuff too many of your headings. Although it is a good idea to include the keywords or phrases you\u2019re discussing to make sure your ideas are clear, Googlebots and others are pretty smart and can tell when you\u2019ve swapped topics or are on the same one. Overall, using HTML heading tags is incredibly important, but if you keep just a few things in mind, your sites will shine in no time.<\/p>\n<p><strong>Have you been using HTML heading tags correctly?<\/strong><\/p>\n<p><em>Article featured image by VectorV \/ shutterstock.com<\/em><\/p>\n<p><span class=\"et_social_bottom_trigger\" \/>\n<\/div>\n<p>[ad_2]<br \/>\n<br \/><a href=\"https:\/\/www.elegantthemes.com\/blog\/tips-tricks\/how-and-when-to-use-the-h1-tag-on-your-wordpress-website\">Source link <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] Every website is its own unique monster, with developers and designers putting their own signature voices into the code. But one element that every single website has in common is HTML heading tags. Not only do these headings break up your content into more readable sections, they create the semantic outline of your site [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[529],"tags":[],"class_list":["post-810162","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"_links":{"self":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/posts\/810162","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/comments?post=810162"}],"version-history":[{"count":0,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/posts\/810162\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/media?parent=810162"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/categories?post=810162"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/tags?post=810162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}