Common types of tags
HTML includes many different types of elements, such as heading tags (like <h1>) and paragraph tags (like <p>). Setting the right tags makes it easier for search engines to understand your content, and improves accessibility, too.
Tips:
The tags you can choose from depend on the type of box. You can't write tag content freely.
For more about HTML tags, see HTML basics - Learn web development | MDN.
To see which HTML elements and attributes Studio.Design supports, check out the Studio.Design HTML elements and attributes reference.
For accessibility guidance, you can also take a look at the Studio.Design accessibility checklist.
Tags for text boxes
By default, text boxes use the <p> tag. You can change it to any of the following:
<p>: A paragraph.
<h1>–<h6>: A heading. The lower the number, the higher the heading level.
<li>: An item within a list.
<span>: Has no special meaning on its own; it simply groups part of your text. Its child elements can use heading tags <h1>–<h6> or the <p> tag.
Tags for boxes and image boxes
By default, boxes and image boxes use the <div> tag. You can change it to any of the following:
<div>: Has no specific meaning; used for grouping elements.
<nav>: A navigation area.
<header>: Used for logos and navigation groups.
<footer>: An area for information like copyright notices and terms of use.
<section>: A section made up of a heading and its content.
<article>: A self-contained piece of content.
<main>: The main content area of the page. Use it only once per page.
<ul>: A group of list items.
<li>: An individual item within a list.
<label>: Used to group form fields.
<h1>–<h6>: You can apply heading tags <h1>–<h6> only to boxes whose child elements consist solely of images and text (such as <span>). For details, see HTML heading tags <h1> – <h6>.
<p>: You can also apply the <p> tag as long as the same condition is met (child elements consist solely of images and text, such as <span>).
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 the tag you want from the [Tag] options.
Note: If the <h1> heading tag doesn't appear in the list of options, see HTML heading tags <h1> – <h6>.
tag source code script
source code ｈｔｍｌ htlm