HTML Semantics And Non-Semantics Reference
Semantic Tags
Semantic elements clearly describes its meaning to both the browser and the developer. They provide information about the content between the opening and closing tags.
| TAGS | NAME | DESCRIPTION |
|---|---|---|
| <header> | Header tag | This is usually for navigational links or introductory content containing h1 to h6 headings |
| <main> | Main tag | It is used to encapsulate the dominant content within a webpage. This element wraps the main content of the page, and there should be only one per page. |
| <article> | Article tag | It used to to wrap independent, self-contained content. This tag works well with blog entries, forum posts, or news articles. |
| <section> | Section tag | Groups related content. It is used for grouping thematically related content. |
| <nav> | Navigation tag | This is used to define a block of navigation links such as menus and tables of contents. It can be used inside the header element and also on its own. |
| <footer> | Footer tag | Mostly located at the bottom of the page outside the <main> tag and is used to hold info such as contact information, copyright information, Terms of use, Site Map, Reference to top page links, etc. |
| <aside> | Aside tag | This is used to mark additional information that can enhance another element but isn't required in order to understand the main content. |
| <Figure> | Figure tag | It is an illustration used to encapsulate media such as image, illustration, diagram, code snippet, etc. |
| <Figcaption> | Figcaption tag | This is used to add a caption to the image as it is an element used to describe the media in the <figure tag>. |
Non-Semantic Tags
These tags tell us nothing about their contents.
| TAGS | NAME | DESCRIPTION |
|---|---|---|
| <div> | Division tag | This defines a division or a section in an HTML document. It is used as a container for HTML elements |
| <span> | Span tag | This is an inline container used to mark up a part of a text, or a part of a document |