Basic Structure
| Tag | Name | Description |
|---|---|---|
| <header> | Header | Describes the content at the top of the page body. It may include a logo, navigational links or a search bar. |
| <nav> | Nav | Encapsulates the page’s navigational links. It is often placed inside the header or footer. |
| <main> | Main | Encapsulates the main content of a page between the header/navigation and the footer areas. |
| <footer> | Footer | Includes the page’s footer content at the bottom of the body |
Sections, Articles and Asides
| Tag | Name | Description |
|---|---|---|
| <section> | Section | Defines elements in a document, such as chapters, headings, or any other area of the document with the same theme. |
| <article> | Article | Holds content that makes sense on its own such as articles, blogs, and comments. |
| Generally developers will use section to define a theme for the webpage and use article to write independent content for that theme. This does not mean that article has to be used with section. | ||
| <aside> | Aside | Used to mark additional information that can enhance another element but isn’t required in order to understand the main content. |
Media
| Tag | Name | Description |
|---|---|---|
| <video> | Video | Allows us to add videos to our website. |
| <audio> | Audio | Allows us to implement audio into our website |
| <embed> | Embed | Can be used to implement any type of media |
| These elements are universal in that they all use the src attribute to link the source of the content. Video and audio requires a closing tag while embed is a self-closing tag. | ||
| <figure> | Figure | Used to encapsulate media such as an image, diagram. or code snippet |
| <figcaption> | Figure Caption | Used to describe the media encapsulated within the figure element |
| Developers will normally use figcaption within the figure element to group the media and description. This way, if a developer decides to change the position of the media, the description will follow along with it. | ||