Main types of tags
HTML includes various types of tags for different elements, such as heading tags (e.g., <h1>) and paragraph tags (e.g., <p>). Setting tags correctly makes it easier for search engines and accessibility tools to understand your content.
Tips:
The tags you can set vary depending on the type of box. You can't freely write your own tag content.
For more details about HTML tags, see HTML basics - Learn web development | MDN.
To check which HTML elements and attributes are supported in Studio.Design, see the Studio.Design HTML elements and attributes reference.
For accessibility considerations, you can also refer to the Studio.Design accessibility checklist.
Tags for text boxes
By default, text boxes use the <p> tag. You can change this to any of the following tags:
<p>: Represents a paragraph.
<h1>–<h6>: Represents a heading. The lower the number, the larger the heading.
<li>: An item within a list.
<span>: Has no specific meaning and is used to group parts of text.
Tags for boxes and images
By default, boxes and image boxes use the <div> tag. You can change this to any of the following tags:
<div>: Has no specific meaning and is used for grouping.
<nav>: Represents a navigation area.
<header>: Used for logos and navigation groups.
<footer>: An area for information such as copyright and terms.
<section>: A section divided by a heading and its content.
<article>: A self-contained piece of content.
<main>: The main content area of a page. It can only be used once per page.
<ul>: A group of list items.
<li>: An individual item within a list.
<label>: Used to group form items.
<h1>–<h6>: When certain conditions are met, you can also apply heading tags <h1>–<h6> to a box. For details, see HTML heading tags <h1>–<h6>.
How to set a tag
In Studio.Design, regular boxes use <div> by default, and text boxes use <p> by default.
Select the box you want to set a tag for.
Open the [Settings] tab in the right panel.
Choose your preferred tag from the [Tag] options.
※ If the heading tag <h1> doesn't appear in the tag options, please see the "Note" section of this article: HTML heading tags <h1>–<h6>
tag source code script
source code ｈｔｍｌ htlm