Introduction to Semantic HTML

When building web pages, we use a combination of non-semantic HTML and Semantic HTML. The word semantic means “relating to meaning,” so semantic elements provide information about the content between the opening and closing tags.

Semantic HTML?

For example, instead of using a <div> element to contain our header information, we could use a <header> element, which is used as a heading section. By using a <header> tag instead of a <div>, we provide context as to what information is inside of the opening and closing tag.

Why we use it?

Accessibility

: Semantic HTML makes webpages accessible for mobile devices and for people with disabilities as well. This is because screen readers and browsers are able to interpret the code better.

SEO

: It improves the website SEO, or Search Engine Optimization, which is the process of increasing the number of people that visit your webpage. With better SEO, search engines are better able to identify the content of your website and weight the most important content appropriately.

Easy to Understand

: Semantic HTML also makes the website’s source code easier to read for other web developers.

<header>

A <header> is a container usually for either navigational links or introductory content containing <h1> to <h6> headings.

<header>
  <h1>
     Everything you need to know about pizza!
  </h1>
</header>

This can be compared to the code below which uses a <div> tag instead of a <header> tag:

<div id="header">
  <h1>
    Everything you need to know about pizza!
  </h1>
</div>

<nav>

A <nav> is used to define a block of navigation links such as menus and tables of contents. It is important to note that <nav> can be used inside of the <header> element but can also be used on its own.

<header> 
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>      
    </ul>
  </nav>
</header>

<main> and <footer>

These elements along with <nav> and <header> help describing where an element is located based on conventional web development standards.

<main> is used to encapsulate the dominant content within a webpage. This tag is separate from the <footer> and the <nav> of a web page since these elements don’t contain the principal content.

<main>
  <header>
    <h1>Types of Sports<h1>
  </header>
  <article>
    <h3>Baseball</h3>
    <p>
      The first game of baseball was played in Cooperstown, New York in the summer of 1839.
    </p>
  </article>
</main>

<main> contains an <article> and <header> tag with child elements that hold the most important information related to the page.

The content at the bottom of the subject information is known as the footer, indicated by the <footer> element. The footer contains information such as:

• Contact information
• Copyright information
• Terms of use
• Site Map
• Reference to top of page links
  

<footer>
  <p>Email me </p>
</footer>
    ```
In the example above, the footer is used to contain contact information. The ```<footer>``` tag is separate from the ```<main>``` element and typically located at the bottom of the content.

## ```<article>``` and ```<section>```
The two elements we’re going to focus on now are ```<section>``` and ```<article>```.
 
```<section>``` defines elements in a document, such as chapters, headings, or any other area of the document with the same theme.
 
A website’s home page could be split into sections for the introduction, news items, and contact information.

```html
<section>
  <h2>Fun Facts About Cricket</h2> 
</section>

The<article> element holds content that makes sense on its own. <article> can hold content such as articles, blogs, comments, magazines, etc.

<section>
  <h2>Fun Facts About Cricket</h2>
  <article>
    <p>A single match of cricket can last up to 15 days.</p>
  </article>
</section>

the <article> element containing a fact about cricket was placed inside of the <section> element.It is important to note that a <section> element could also be placed in an <article> element depending on the context.

<figure> and <figcaption>

:to add an image or illustration

<figure>: an element used to encapsulate media such as an image, illustration, diagram, code snippet, etc, which is referenced in the main flow of the document.

<figure>
  <img src="overwatch.jpg"/>
</figure>

possible to add a caption to the image by using <figcaption>.

<figcaption>:is an element used to describe the media in the <figure> tag.
Usually, <figcaption> will go inside <figure>. This is different than using a <p> element to describe the content; if we decide to change the location of <figure>, the paragraph tag may get displaced from the figure while a <figcaption> will move with the figure. This is useful for grouping an image with a caption.

helps group the <figure> content with the <figcaption> content.

<figure>
  <img src="overwatch.jpg">
  <figcaption>This picture shows characters from Overwatch.</figcaption>
</figure>