HTML Semantic Elements
A semantic element clearly describes its meaning to both the browser and the developer.
For example
- Examples of non-semantic elements: and
- Examples of semantic elements: , , and - Clearly defines its content.
Why Semantic Elements?
According to the W3C: "A semantic Web allows data to be shared and reused across applications, enterprises, and communities."
How is it supposed to look?
Listed Semantic Elements
| Tag | Description |
|---|---|
| Defines independent, self-contained content | |
| Defines content aside from the page content | |
| Defines additional details that the user can view or hide | |
| Defines a caption for a figure element | |
| Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. | |
| Defines a footer for a document or section | |
| Specifies a header for a document or section | |
| Specifies the main content of a document | |
| Defines marked/highlighted text | |
| Defines navigation links | |
| Defines a section in a document | |
| Defines a visible heading for a <details> element | |
| Defines a date/time |