Semantic markup is markup that describes the meaning of content rather than define its presentation is.

<header>
    <h1><a><img> Logo
    <nav>
        <ul>
            <li><a>

<section> 
    <h2>main content title
    <p>main content body
    <article>
        <h3>secondary content title
        <p>secondary content body   

<footer>
    <nav>
    <p> copyright

<title>

1. Appears when you add the page to your favorites.
2. Serves as the title in search engine results.
3. Appears in the browser’s toolbar.

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

There are six heading elements in HTML, h1 through h6.
Each identifies a new section of content and represents a different level of importance on their page, h1 being the highs level and h6 the lowest.

<section>

It’s the section users come to the page to see. It contains the most important content on the page. Such as blog entries, videos, news articles, photo galleries, recipes, and so on. The first element inside a <section> should be a heading (<h1>-<h6>) element that indicates what the section is about.

<article>

An article element should wrap content that could be syndicated and pulled into another website, or linked to via social media, or a news aggregation site like reddit.com. This includes individual posts, articles or any independent chunk of content.

Article elements SHOULD always include a heading that identifies the article.

<aside>

It represents a section of content, that’s complementary to the main content, could be considered separate from that content, and can also have different meanings based on whether it’s placed inside or outside an article element, such as an aside wrapping a short inline quote <q> element.

<nav>

Also a structuring element for navigation menu.
Note: Use structuring elements right before the actual content.

<main>

The main element represents the main content inside the body of the page.
The purpose of the main tag is to help screen readers and other assistive technologies identify exactly where the main content of a page begins. You can exclude repeated elements like the header, footer and aside elements from the main element.

You should use <main> only once per page.

<div>

When no other element is suitable, you can group content with a div element.
The div is a generic container that has almost no semantic meaning, it’s just a wrapper that groups together related content.

Designers and developers use the div element as the wrapper for the entire page.

<blockquote>

There are two ways you can create a blockquote :

<blockquote cite="https://www.quotewebsite.com"> ... Bill Gates </blockquote>

OR

<blockquote> 
   ... 
   <footer>
      <cite><a href="https://www.quotewebsite.com"> Bill Gates</a></cite>
   </footer>
</blockquote>

<img alt=”” />

So it’s important to write alternative text that describes the contents of the image and that helps describe the image to users. The alt attribute is an important accessibility attribute that displays replacement or alternative text to users when for some reason the image can’t be viewed.

<a> wrapping <h1>

Now, <a> elements can wrap <h1> elements

<a href="index.html">
    <h1>Bashar Ghadanfar</h1>
    <h2>Designer</h2>
</a>

<figure> & <figcaption>

The figure element provides a container for images and their caption.
And the figcaption element lets you add a caption to an image.

<figure>
  <img src="img/vr-space.jpg" alt="User experiencing space in VR" \>
  <figcaption>Virtual reality user can explore faraway places and feel as though they are right in the middle of the action. </figcaption>
</figure>

Breaking Content

<br /> for breaking lines.
<hr /> for breaking paragraphs.

Path Types

• Relative <a href="../pets/doggos.html">
• Absolute <a href="http://www.cutepets.com/pets/doggos.html">
• Root-relative <a href="/pets/doggos.html">
  Always starts with a “/” which represents the root of your site.
  For this to work, you should have a server running.