#    
## Overview
Semantic Elements represent their meanings to both the developer and the browser. The tag in the code tells the developer and the browser what to do. It defines the different sections and layout of web pages, which makes HTML more easily understandable.

## Semantic elements in HTML
In HTML, there are some semantic elements used to define when developing the frontend of the web pages.

## Examples
Below are some examples of semantic tags:
* The **`<article>`** element specifies the independent, self-contained content.




<!DOCTYPE html>
<html>
<head>
    <title>Home Page</title>
  </head>
<body>
<article>
<h1>Educative</h1>
<h2>Leading provider of online learning platforms</h2>
<p>Educative is the leading provider of online learning platforms for today's developers. Text-based courses with interactive in-browser coding helps you learn only what you need.</p>
</article>
</body>
</html>

codemirror

* The **`<nav>`** element defines a set of navigation links.

<!DOCTYPE html>
<html>
<head>
    <title>Home Page</title>
     </head>
<body>
<nav>
  <a href="file/js/">JavaScript</a> |
  <a href="file/jquery/">jQuery</a>
  <a href="file/html/">HTML</a> |
  <a href="file/css/">CSS</a> | 
</nav>
</body>
</html>

* The **`<aside>`** element represents sidebars or call-out boxes.



<!DOCTYPE html>
<html>
<head>
    <title>Home Page</title>
    </head>
<body>
<aside>
<h1>Educative</h1>
<h2>Leading provider of online learning platforms</h2>
<p>Educative is the leading provider of online learning platforms for today's developers. Text-based courses with interactive in-browser coding helps you learn only what you need.</p>
</aside>
</body>
</html>

* The **`<section>`** element represents a section of the document.

<!DOCTYPE html>
<html>
<head>
    <title>Home Page</title>
    </head>
<body>
<section>
<h1>Educative</h1>
<h2>Leading provider of online learning platforms</h2>
<p>Educative is the leading provider of online learning platforms for today's developers. Text-based courses with interactive in-browser coding helps you learn only what you need.</p>
</section>
</body>
</html>

* The **`<details>`** tag specifies the tag for additional details.


<!DOCTYPE html>
<html>
<head>
    <title>Home Page</title>
     </head>
<body>
<details>
<summary>Educative</summary>
<h2>Leading provider of online learning platforms</h2>
<p>Educative is the leading provider of online learning platforms for today's developers. Text-based courses with interactive in-browser coding helps you learn only what you need.</p>
</details>
</body>
</html>

* The **`<header>`** tag represents a container for introductory content or a set of navigational links.





<!DOCTYPE html>
<html>
<head>
    <title>Home Page</title>
    </head>
<body>
<header>
    <h1>Educative</h1>
<h2>Leading provider of online learning platforms</h2>
  </header>
  </body>
</html>

* The **`<footer>`** tag defines a footer for a document or section.

<!DOCTYPE html>
<html>
<head>
    <title>Home Page</title>
    </head>
<body>
<footer>
  <p>Leading provider of online learning platforms</p>
  <p><a href="mailto:Example@gmail.com">Mail For Details</a></p>
</footer>
</body>
</html>

* The **`<main>`** tag specifies the main page.

<!DOCTYPE html>
<html>
<head>
    <title>Home Page</title>
</head>
<body>
<main>
  <h1>Educative</h1>
  <p>Leading provider of online learning platforms</p>

  <article>
   <h1>Educative</h1>
  <p>Leading provider of online learning platforms</p>
</article>
</main>
</body>
</html>

# Non-semantic elements in HTML
Non-semantic elements are similar to semantic elements, but they do not have any meaningful content.  They can be used with different attributes to mark up semantics usual to a group.

## Examples




* The **`<div>`** tag is used to make the division of content in the web pages. 

<!DOCTYPE html>
<html>
<head>
    <title>Home Page</title>
    <style type="text/css">
    </style>
</head>
<body>
    <div>
        <h5>hello World </h5>
        <span>Computer Science </span>
         Computer, a programmable device for processing, storing, and displaying information
    </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Home Page</title>
    <style type="text/css">
     span{
       font-weight: bold;
         color: blur;
         font-size: 29px ; 
            }
    </style>
</head>
<body>
    <div>
        <h5>hello World </h5>
        <span>Computer Science </span>
         Computer, a programmable device for processing, storing, and displaying information
    </div>
</body>
</html>

* The **`<span>`** tag is an inline container used to mark up a part of a document or a part of the text. 

<!DOCTYPE html>
<html>
<head>
    <title>Home Page</title>
    <style type="text/css">
     span{
       font-weight: bold;
         color: blur;
         font-size: 29px ; 
            }
    </style>
</head>
<body>
   <div>
        <h5>hello World </h5>
        <span>Computer Science </span>
         Computer, a programmable device for processing, storing, and displaying information
    </div>
</body>
</html>

What are the Semantic and Non-semantic elements in HTML?

 Overview Semantic Elements represent their meanings to both the developer and the browser. The tag in the code tells the developer and the browser what to do. It defines the different sections and layout of web pages, which makes HTML more easily understandable. 