Types of HTML Tags and Configuration Steps
HTML includes various types of tags based on the role of the element, such as heading tags (e.g., <h1>
) and paragraph tags (e.g., <p>
).
Properly using these tags can improve the crawlability of your site (making it easier for search engines to understand the content) and accessibility (enabling assistive technologies like screen readers to properly interpret the information).
Tips:
The tags that can be set in a box vary depending on the type of box. You cannot freely write the content of the tags.
For more detailed information about HTML tags, please refer to HTML Basics - Learn Web Development | MDN.
Types of Tags
Box, Image, etc.
Tips: Heading tags <h1>
to <h6>
can also be set if conditions are met.
By default, the tag is set to <div>
, and the following tags can be configured:
<div>
: A tag that has no specific meaning and can be used as a grouping element.<nav>
: Navigation links to other pages or different sections within a page.<header>
: A group containing the logo, title, and navigation.<footer>
: A group containing information and links related to copyright and terms.<section>
: A standalone section typically consisting of a heading and content.<article>
: A self-contained piece of content.<main>
: A tag that represents the main content of the page, typically used once per page.<ul>
: A list containing several items.<li>
: An item within a list.<label>
: A box indicating a group of form items.
Text tag
By default, the tag is set to <p>
, and the following tags can be configured:
<p>
: A paragraph.<h1>
to<h6>
: Tags representing headings, with lower numbers indicating larger headings.<li>
: An item within a bulleted list.<span>
: A tag that has no specific meaning and can be used to group parts of text.
Setting tags in Studio
In Studio, regular boxes are initially set with the <div>
tag, and text boxes with the <p>
tag.
After placing a box, you can click the tag at the top left of the box selection frame to change the type of tag.