HTML Style and Semantic - 13 Tags and its Attributes (Reference)

<span>

Defines an inline container for text content.

<span>
  // Some content
</span>

<header>

Defines a header for a document or section. For introductory content.

<header>
  // Some content
</header>

<footer>

Defines a footer for a document or section. Ending content.

<footer>
  // Some content
</footer>

<div>

Defines a section in a document.

<div>
  // Some content
</div>

<section>

Defines a section in a document.

<section>
  // Some content
</section>

<main>

Specifies the main content of a document. For main content in the page.

<main>
  // Some content
</main>

<article>

Defines an article. For some blog like content.

<article>
  // Some content
</article>

<aside>

Defines content aside from the page content. Mostly for sidebar.

<aside>
  // Some content
</aside>

<details>

Defines additional details that the user can view or hide. Basically like accordian. Summary tag is used for heading.

<details>
  <summar>Y Heading </summar>
  <p>Some content</p>
</details>

// Attributes open

<summary>

Defines a visible heading for a details element. Used inside details tag.

<details>
  <summar>Y Heading </summar>
  <p>Some content</p>
</details>

<dialog>

Defines a dialog box or window. Basically like modal. Attributes - open.

<dialog>
  // Some content
</dialog>

<data>

Adds a machine-readable translation of a given content.

<ul>
  <li><data value="1"> Data 1 </data></li>
</ul>

<style>

Defines style information for a document. Should be inside head tag. Attributes - media, type.

<style>
  h1 {
    color: red;
  }
  p {
    color: blue;
  }
</style>