{"id":1365,"date":"2020-01-21T13:12:23","date_gmt":"2020-01-21T21:12:23","guid":{"rendered":"https:\/\/www.hmc.edu\/communications\/?page_id=1365"},"modified":"2025-05-16T08:01:25","modified_gmt":"2025-05-16T15:01:25","slug":"headings","status":"publish","type":"page","link":"https:\/\/www.hmc.edu\/communications\/wordpress-how-tos\/headings\/","title":{"rendered":"WordPress: Headings"},"content":{"rendered":"\n

Headings are the main organizational tool of a web page and allow you to organize a page\u2019s content into sections and sub-sections.<\/p>\n\n\n\n

Adding a Heading Block<\/h2>\n\n\n\n

In the content area either:<\/p>\n\n\n\n

    \n
  1. with the cursor in the editor, type forward slash \/<\/kbd>; or<\/li>\n\n\n\n
  2. select the plus button<\/li>\n<\/ol>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    3. Start typing “heading” and select the heading block from the list<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    Now that you have inserted the heading block, you may add your text and set the heading level.<\/p>\n\n\n\n

    \"\"
    The heading block is now in place for your heading’s text.<\/figcaption><\/figure>\n\n\n\n

    Choosing a Heading Level<\/h2>\n\n\n\n

    Headings are hierarchical and have different \u201clevels\u201d that can be set when they are inserted into pages. The HTML heading levels are known as H1<\/code>, H2<\/code>, H3<\/code>, H4<\/code>, H5<\/code> and H6<\/code>. Note that H5<\/code> and H6<\/code> are not routinely used on the College website and are not available to you as an editor.<\/p>\n\n\n\n

    The page title is H1<\/code>. There is only one H1<\/code> on a page, therefore editors cannot insert additional H1<\/code>s.<\/p>\n\n\n\n

    The level of heading that you should use is determined by the content, not personal preference.<\/p>\n\n\n\n

    Setting the Heading Level<\/h3>\n\n\n\n

    When your cursor is in the heading block, the heading level can be changed by selecting the H2<\/code> icon in the toolbar (note it will be H3<\/code> or H4<\/code> if that level has previously been chosen).<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n
      \n
    • The first level of heading within the content area must<\/strong> be H2<\/code>. Break content into logical sections, each with an appropriate H2<\/code>.<\/li>\n\n\n\n
    • H3<\/code> is used to subdivide content that is related to the H2<\/code> above it.<\/li>\n\n\n\n
    • H4<\/code> can be used to subdivide content that is related to the H3<\/code> above it.<\/li>\n<\/ul>\n\n\n\n

      Why is the first level H2<\/code>? Because the page title is H1<\/code>. As headings must be used hierarchically, the first heading level used anywhere within a page is always<\/strong> H2<\/code>.<\/p>\n\n\n\n

      Heading Levels That May Follow Other Heading Levels<\/h3>\n\n\n\n

      You make your own determination of the level of subsequent headings based on the content itself and how it relates to surrounding content, adhering to these rules:<\/p>\n\n\n\n

        \n
      • H2<\/code> may be followed only by H2<\/code> or H3<\/code>.<\/li>\n\n\n\n
      • H3<\/code> may be followed by H2<\/code> or H3<\/code> or H4<\/code>.<\/li>\n\n\n\n
      • H4<\/code> may be followed by H2<\/code>, H3<\/code> or H4<\/code>.<\/li>\n<\/ul>\n\n\n\n

        Content After Headings<\/h3>\n\n\n\n

        There must be content after a heading (e.g. text, image, list, other content block).<\/p>\n\n\n\n

        Headings may also be followed immediately by another heading (without intervening content) that is the next level down in the hierarchy. e.g.:<\/p>\n\n\n\n

          \n
        • H2<\/code> may<\/em> be immediately followed by H3<\/code><\/li>\n\n\n\n
        • H3<\/code> may<\/em> be immediately followed by H4<\/code><\/li>\n<\/ul>\n\n\n\n

          However:<\/p>\n\n\n\n

            \n
          • H4<\/code> must not<\/em> immediately be followed by another H4<\/code> (without intervening content) <\/li>\n\n\n\n
          • H2<\/code> must not<\/em> immediately be followed by another H2<\/code> (without intervening content)<\/li>\n\n\n\n
          • H3<\/code> must not<\/em> immediately be followed by another H3<\/code> (without intervening content)<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"

            Headings are the main organizational tool of a web page and allow you to organize a page\u2019s content into sections […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":995,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1365","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/pages\/1365","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/comments?post=1365"}],"version-history":[{"count":5,"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/pages\/1365\/revisions"}],"predecessor-version":[{"id":2380,"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/pages\/1365\/revisions\/2380"}],"up":[{"embeddable":true,"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/pages\/995"}],"wp:attachment":[{"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/media?parent=1365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}