--- name: html-semantic description: "Semantic HTML5: elements, forms with validation and accessibility, SEO best practices, structured data, Open Graph, Twitter Cards. Use when writing or reviewing markup, forms or document structure for semantics, accessibility and SEO." tags: [html, semantic, seo, forms, open-graph, structured-data, frontend] version: "2025.1" --- # Semantic HTML5 ## Core Principle Use the correct HTML element for the content's meaning, not its appearance. Semantic HTML improves accessibility, SEO, and maintainability. Style with CSS, not with HTML elements. ## Document Structure ```html Page Title - Site Name

Article Title

By

Jane Doe

Introduction

Content paragraph...

System architecture showing three services
Figure 1: System architecture overview

Details

More content...

A meaningful quote from a reference.

- Author Name
``` ## Semantic Element Reference | Element | Use For | |---------|---------| | `
` | Introductory content for page or section | | `