Skip to main content

HTML heading tags <h1> – <h6>

In Studio.Design, you can set HTML heading tags from <h1> to <h6>. Using heading tags helps you build well-structured pages that are optimized for SEO.

How to apply a heading tag to a text box

By default, text boxes use the <p> tag.

  1. Select the text box you want to apply a tag to.

  2. In the right panel, go to the [Settings] tab and choose a heading (<h1><h6>) under the [Tag] section.

How to apply a heading tag to a parent box that contains child elements (advanced)

You can only apply a heading (<h1><h6>) to a parent box if it meets the following condition.

  • The child elements inside the parent box must consist only of the following tags:
    <img>, <span>, <i>, <button>, <a>

Examples where a heading tag can't be selected

  • The selected element contains another element that already has a heading tag:
    <h1> <h2>text</h2></h1>

  • The heading tag contains a box ( div tag) with child elements inside:
    <h1> <div class="image sd"></div></h1>

Examples where a heading tag can be selected

  • The parent box itself is a BOX mode image and contains <img>, <span>, <i>, <button>, <a> tags:
    <h1 class="image sd"> <i>favorite_border</i></h1>

  • The parent box contains a text box with a link set ( <a> tag):
    <h1> <a>Text box with a link</a></h1>

Note: Heading tags on parent boxes that contain text boxes as child elements

By default, text boxes use the <p> tag. If a child text box keeps the <p> tag, you won't be able to apply a heading tag to the parent box.

Steps:

  1. Select the child text box.

  2. Check the current tag under [Tag] at the bottom of the right panel.

  3. If the tag is set to <p>, change it to <span>.

    ~~<div> <span>text</span> </div>~~

  4. Select the parent box and apply a heading (<h1><h6>).


html

Did this answer your question?