<header id="header">
<h1> Home Logo </h1>
<nav id="nav">
<ul>
<li><a href="#home"> Home </a></li>
<li><a href="#posts"> Posts </a></li>
<li><a href="#contact"> Contact </a></li>
</ul>
</nav>
</header>To define a header for a page or section, which usually holds logo, navigation links, introduction. Can't be placed within a <footer>, <address>, or another <header>.
<article>
<h2>Article Title</h2>
<p>Article Content</p>
</article>Defines an independent, self-contained content in a document. Which is intended to be independently distributable or reusable. Forum posts, a product card, user-submitted comment, blog entry, or articles.
<details>
<summary> Click Here </summary>
Closing and Opening Information
</details>Defines additional details that a user can open and close on demand. Summary used as a title.
<main>
Main Content goes Here
</main>Every page must have one main. Defines the main content of that page. Can't be a child of <article>, <aside>, <footer>, <header>, or <nav> element.
<figure>
<img src="picture.jpg" alt="Info">
<figcaption> Info </figcaption>
</figure>To describe the content of elements or an element inside <figure> using <figcaption>.
<aside>
<h2>Sidebar</h2>
<p>This is some content in the sidebar</p>
</aside>Defines content not related to the main content. Side bars are a good example.
<h1> Describe Page Content </h2>
Use base on importance and organization:
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
Headings provide sections level of importance. Only use one <h1> per page describing the content of the page. And the rest to provide descriptions for other content on the page, based on level of importance.
<section>
Define a Section Here
</section>Defines a section within a page, could be about anything. Chapters, information, and etc, seperated into sections.
<footer>
<ul>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
</ul>
</footer>Defines a footer, content at the bottom. Authorship, copyright, contact, back to top links, related documents are some content used in a footer.