DEV Community

Dahye Ji
Dahye Ji

Posted on • Updated on

Semantic HTML / Semantic Tags

Using div too much might not be the best practice. Try to avoid using it when it's unnecessary.
These are some new semantic tags according to the link https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_html

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
Enter fullscreen mode Exit fullscreen mode

and there are more, these are some of the roughly 100 elements.

section tag defines sections in a document, a section is a thematic grouping of content and article sepecifies independent, self-contained content. An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.
aside represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes, often used to display ad.

figure and figcaption
figure is for wrapping your image content around it, and figcaption is to caption your image.

When to use dl, dd and dt

dl represents a description list. The element encloses a list of groups of terms (specified using the dt element) and descriptions provided by dd elements. dd tag is used to describe a term/name in a description list. Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).

Discussion (0)