Semantic Elements |
|
---|---|
Tag |
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>. |
Embedding Media |
|
---|---|
Tag |
Description |
<video> |
<video> allows us to add videos to our website. <video> requires a closing tag. These elements are universal in that they all use the src attribute to link the source of the content. |
<audio> |
<audio> allows us to implement audio into our website. <audio> requires a closing tag. These elements are universal in that they all use the src attribute to link the source of the content. |
<embed> |
<embed> can be used to implement any type of media. <embed> is a self-closing tag. These elements are universal in that they all use the src attribute to link the source of the content. |
<figure> and <figcaption> |
|
---|---|
Tag |
Description |
<figure> |
The <figure> element is used to encapsulate media such as an image, diagram. or code snippet. |
<figcaption> |
The <figcaption> element is 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. |
<section> and <article> |
|
---|---|
Tag |
Description |
<section> |
<section> defines elements in a document, such as chapters, headings, or any other area of the document with the same theme. 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>. |
<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 Element |
|
---|---|
Tag |
Description |
<aside> |
The <aside> element is used to mark additional information that can enhance another element but isn't required in order to understand the main content. Usually, this information would be in a sidebar or a location where it doesn't obstruct the main piece of content. An example of this would be an article that discusses how to take care of a dog and next to the article an ad would appear advertising a dog grooming product. |