Semantic-Html.html

<!-- Semantic Html -->

<!-- Semantic Html refers to the practice of using HTML tags in a meaningful and
structured to represent information on a web page. By applying semantic Html, you give each
element a clear semantic purpose, which makes the code more readable and understandable, both
for developers as well as for search engines and assistive technologies. -->

<!-- Here are some of the most common semantic tags in HTML5 that help structure and give
meaning to a web page. -->

     <!-- 1. **`<header>`**: Represents the header of a section or the main header of the page.
     May include logos, titles, navigation bars and other elements related to the
     introduction of the content.

     2. **`<nav>`**: Used to define the main navigation or menu bars on a web page.

     3. **`<main>`**: Indicates the main content of the page. There must be a single `<main>` element
     on each page.

     4. **`<article>`**: Used to encapsulate self-contained and meaningful content, such as an article
     news, a blog post, or a forum post.

     5. **`<section>`**: Used to group thematically related content within a page. Is
     a versatile tag that can be used to subdivide content into logical sections.

     6. **`<aside>`**: Used to define related but non-essential content such as bars
     sides, advertisements or support elements.

     7. **`<figure>` and `<figcaption>`**: `<figure>` is used to wrap content that needs to be
     explained, such as images, graphics or videos. `<figcaption>` is used to provide a description
     of the content within `<figure`.

     8. **`<footer>`**: Defines the footer of a web page, which usually contains information
     such as copyright, contact links and other details related to the page.

     9. **`<time>`**: Used to represent dates and times. You can include `datetime` attributes for
     provide additional information about the date and time.

     10. **`<mark>`**: Highlight or mark part of the text within a paragraph or block of text.

     11. **`<abbr>` and `<acronym>`**: Used to define abbreviations and acronyms, respectively, and
     provide full expansions when you hover over them. -->

<!-- Using these semantic tags not only improves the clarity and structure of the code, but also
It also benefits accessibility and search engine optimization. Additionally, it helps maintain
consistency in the design and presentation of the website. -->