{"id":3513,"date":"2024-12-11T11:51:31","date_gmt":"2024-12-11T16:51:31","guid":{"rendered":"https:\/\/www.montclair.edu\/university-communications\/?page_id=3513"},"modified":"2024-12-11T12:29:57","modified_gmt":"2024-12-11T17:29:57","slug":"heading-tags-and-content-structure","status":"publish","type":"page","link":"https:\/\/www.montclair.edu\/university-communications\/web-development-and-experience\/html-tips-and-accessibility\/heading-tags-and-content-structure\/","title":{"rendered":"Heading Tags and Content Structure"},"content":{"rendered":"<p>One of the most important HTML elements are <strong>H1-H6<\/strong> (heading) tags.<\/p>\n<p>HTML includes six heading tags, <strong>H1-H6<\/strong>, which can be used to organize your page into topics and sub-topics. The numbers on the tags relate to the level, or indentation, the heading would have if you made an outline of the document.<\/p>\n<ul>\n<li><strong>Heading 1<\/strong> (H1) is already used by the page title. <strong>Please do not use H1<\/strong>\n<ul>\n<li><strong>Heading 2<\/strong> breaks your page into significant topics\n<ul>\n<li><strong>Heading 3<\/strong> allows you to have an aside within a significant topic<\/li>\n<li><strong>Heading 3<\/strong> will also allow you to further divide a large topic into several sub-topics<\/li>\n<\/ul>\n<\/li>\n<li><strong>Heading 2<\/strong> after Heading 3 is essentially out-denting: It means that you\u2019re moving on to the next significant topic<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>For example, you may wish to set up the content structure of your <em>Resources<\/em> page as follows:<\/p>\n<ul>\n<li><strong>Heading 1<\/strong> Resources (This is your page title.)\n<ul>\n<li><strong>Heading 2<\/strong> Resources for Students\n<ul>\n<li><strong>Heading 3<\/strong> Guides for Students<\/li>\n<li><strong>Heading 3<\/strong> Policies for Students<\/li>\n<li><strong>Heading 3<\/strong> Websites for Students<\/li>\n<\/ul>\n<\/li>\n<li><strong>Heading 2<\/strong> Resources for Parents\n<ul>\n<li><strong>Heading 3<\/strong> Guides for Parents<\/li>\n<li><strong>Heading 3<\/strong> Websites for Parents<\/li>\n<\/ul>\n<\/li>\n<li><strong>Heading 2<\/strong> Resources for Faculty\n<ul>\n<li><strong>Heading 3<\/strong> Guides for Faculty<\/li>\n<li><strong>Heading 3<\/strong> Policies for Faculty<\/li>\n<li><strong>Heading 3<\/strong> Websites for Faculty<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>For the most part, you should only ever need to use <strong>H2<\/strong> and <strong>H3<\/strong>. If you find yourself relying on <strong>H4<\/strong> \u2013 <strong>H6<\/strong>, that\u2019s often a good sign that your page is trying to cover too many topics at once and that it might be best to break it into multiple pages.<\/p>\n<h2>Heading Tag Tips<\/h2>\n<p>Heading tags are about conveying the document structure, not about creating a look. You should never use <strong>H3<\/strong> instead of <strong>H2<\/strong> because you feel that <strong>H3<\/strong> looks better.<\/p>\n<p>Don\u2019t worry about page length \u2013 users are comfortable with long pages that require scrolling. Instead, ensure that the page has a clear topic, that it stays on topic throughout, and that the structure of the document is easy to understand using the heading tags.<\/p>\n<p>Also, be mindful that, although you can out-dent multiple levels at once (i.e. from <strong>H4<\/strong> to <strong>H2<\/strong>), you should never indent more than one level at a time.<\/p>\n<h2>Heading Tags and Accessibility<\/h2>\n<p>Using heading tags appropriately is an important part of providing a high-quality experience for visitors who use screen readers or users with motor impairments who navigate using page landmarks. Many accessibility tools will actually create a table of contents for the user based on the heading structure which allows them to jump directly to the content they want to read.<\/p>\n<p>To make your website content more accessible, when using heading tags:<\/p>\n<ol>\n<li>Ensure that each heading accurately describes the content below it.<\/li>\n<li>Each topic on your page should be covered by a heading.<\/li>\n<li>Try to write your content with the understanding that readers may jump straight to the topic (i.e. don\u2019t assume they read all of the content above it).<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of the most important HTML elements are H1-H6 (heading) tags. HTML includes six heading tags, H1-H6, which can be used to organize your page into topics and sub-topics. The numbers on the tags relate to the level, or indentation, the heading would have if you made an outline of the document. Heading 1 (H1) [&hellip;]<\/p>\n","protected":false},"author":411,"featured_media":3785,"parent":3510,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-3513","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3513","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/users\/411"}],"replies":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/comments?post=3513"}],"version-history":[{"count":2,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3513\/revisions"}],"predecessor-version":[{"id":3729,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3513\/revisions\/3729"}],"up":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3510"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/media\/3785"}],"wp:attachment":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/media?parent=3513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}