Semantic Tags
By default, most blocks you add to a page are represented in the HTML code with the <div> tag. There are some exceptions — for example, sections are assigned the <section> tag, and images use the <img> tag.
To make the website’s structure clearer and more understandable, you can use semantic tags by assigning them to blocks and elements instead of the standard <div> tag.
Why Semantic Tags Are Needed
Semantic tags are used to improve the structure and optimization of a website:
- Enhance search engine optimization (SEO). They help search engines index your site faster and better understand its content. The site’s code will be clean and semantically correct, increasing its value for Google, Yandex, and other search engines.
- Improve website accessibility. They make the site more accessible for people with disabilities. Screen readers can correctly identify important page elements and better interpret the content.
- Simplify future maintenance and development. They provide a cleaner and clearer code structure for developers, making maintenance and scaling easier over time.
Semantic tags do not affect the design or CSS styles of elements. They are used solely for the page structure and influence only the HTML code.
What Semantic Tags Are Available in Taptop
Besides <div> and <section>, you can assign the following tags to blocks:
-
header — the top section of the page, usually contains the logo and menu.
-
footer — the bottom section of the page, includes contacts, additional site navigation, etc.
-
nav — navigation block containing links for moving around the site.
-
main — the main content unique to the current page.
-
article — a standalone piece of content (article, post, news) that can be read independently from the rest.
-
aside — supplementary information, such as a sidebar, advertising blocks, or lists of links.
-
address — contact information of the site owner.
-
figure — illustration, diagram, or chart.
For text content, the following tags are available:
- h1–h6 — headings from level one to six in the hierarchy.
- p — paragraph of text.
- blockquote — quotation.
How to Assign a Semantic Tag to an Element
To set a tag:
- Select the block or element (item).
- Go to Settings on the right panel and choose the desired tag from the list.
The list only shows the tags available for the selected element.
When selecting blockquote tag for the text you can also specify a source URL for the quote.
Examples:
1. A menu block assigned the tag Header:
2. A header assigned the tag h1:
It is recommended to assign the h1 tag to only one text element per page, as it represents the main heading. When selecting the h1 tag, a corresponding warning is displayed.