Photo by Florian Olivo on Unsplash
<Semantic Markup> - Explaining the HTML Elements of meaningful markup
Semantic stands for meaning and combined with the word "Markup", it stands for "meaningful markup" or writing meaningful HTML.
Why?
Code is callable & friendly to other applications.
Making code more accessible to developers and people in general.
More navigable for yourself.
Semantic Markup lets us understand our HTML document much easier because we are using a lot more specific elements to group our content.
Basic Elements of Semantic Markup:
<main> : The <main> element represents the more dominant section of the <body> of a document.
Example:
<nav>: The <nav> element represents a section of a document whose purpose is to provide navigation links.
Example: Added a hyperlink to the word motorcycle.
<article>: The <article> element represents a self-contained composition. It is used to group content together.
Example:
<section>: The <section> element represents a standalone section, which doesn't have a more specific semantic element to represent it. It is a subset of <article> element.
- <header>: The <header> element represents the introductory content of our HTML document.
- <footer>: The <footer> element represents the footer of a document. It holds the author of the document, copyright data or links related to other documents.
- <figure>: The <figure> element represents self-contained content, usually an image, with an optional caption, which is specified using the <figcaption> element.
The above elements are the most basic ones required to write semantic markup. You can read more about it here!