Semantic elements emphasize on the meaning of the information instead of the style. For example article, section, header, nav, footer define the web page structure and give a meaning to different parts. It also improves the automated process of the document from search engines. That is why is important to use them
header – it is intro for the web page that contains the logo, the name, navigation etc..
footer – it should be at the bottom of the web page and contains contact information, copyrights etc
nav – navigation links and a web page can have more than one.
section – web page sections like header, chapter etc. Represents a generic section of a document.
article – The article element represents a complete, or self-contained, composition in a document. It makes sense on its own.
aside – side content like side bar and it is not considered as part of the main page.
details – Additional information that can be hidden or shown.
summary – Used inside details and specifies the visible content
END OF PART I
- CSS – flexbox and align-self, order
- CSS – flexbox and align-content
- CSS – flexbox and align-items property