Suggest an editImprove this articleRefine the answer for “Tell us about the main semantic tags used in development”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Semantic tags** are HTML elements that describe the meaning of content, not its appearance: they help browsers, search engines, and users understand the structure and significance of the parts of a page. **Key point:** semantic tags make HTML understandable, logical, and convenient, both for the user, for search engines, and for the site's future development.Shown above the full answer for quick recall.Answer (EN)ImageSemantic tags are HTML elements that **describe the meaning of the content**, not its appearance. They help browsers, search engines, and users understand the structure and significance of the parts of a page. --- ### 1. `<header>` - the header of a page or section Used for titles, a logo, navigation, and contact information. It can appear at the start of the whole page or inside an article. ```html <header> <h1>My blog</h1> <nav> <a href="#">Home</a> <a href="#">Contacts</a> </nav> </header> ``` --- ### 2. `<nav>` - a navigation menu Marks a section with links used to move around the site. ```html <nav> <a href="#">About</a> <a href="#">Services</a> <a href="#">Contacts</a> </nav> ``` --- ### 3. `<main>` - the main content of the page Contains the reason the user opened the page: articles, products, posts and so on. A page should have **only one** `<main>`. ```html <main> <article>...</article> </main> ``` --- ### 4. `<article>` - a standalone block of content Usually used for news, posts, comments: anything that can exist on its own. ```html <article> <h2>How to start learning HTML</h2> <p>HTML is the foundation of any site...</p> </article> ``` --- ### 5. `<section>` - a meaningful section of the page Groups elements related by topic inside a page or an article. ```html <section> <h2>Customer reviews</h2> <p>"Great work!"</p> </section> ``` --- ### 6. `<aside>` - additional information Used for sidebars, ad blocks, links, and notes. ```html <aside> <h3>Popular articles</h3> <ul> <li><a href="#">CSS basics</a></li> </ul> </aside> ``` --- ### 7. `<footer>` - the footer of a page or section Used to place copyright, contacts, links to social media and so on. ```html <footer> <p>© 2025 My site</p> </footer> ``` --- ### 8. `<figure>` and `<figcaption>` - an image and a caption Let you add a meaningful caption to an illustration. ```html <figure> <img src="photo.jpg" alt="Mountain view"> <figcaption>Sunset over the Alps</figcaption> </figure> ``` --- ### 9. `<mark>`, `<time>`, `<address>` - contextual tags - `<mark>` highlights an important fragment of text; - `<time>` indicates a date or time; - `<address>` holds contact details. ```html <p>The meeting will take place on <time datetime="2025-10-20">October 20</time>.</p> ``` --- ### Summary: | Tag | Purpose | |---|---| | `<header>` | The header of a page or section | | `<nav>` | Navigation | | `<main>` | The main content | | `<article>` | A standalone article or block | | `<section>` | A thematic section | | `<aside>` | Additional information | | `<footer>` | The footer | | `<figure>`, `<figcaption>` | An image and a caption | | `<mark>`, `<time>`, `<address>` | Contextual, meaningful elements | --- Semantic tags make HTML **understandable, logical, and convenient**: for the user, for search engines, and for the site's future development.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.