HTML5 Semantics

HTML5 Semantics elements have significant names that reflect the component type. Let take an example table, header, footer etc.

• For HTML4, developers use their own id/class names to design elements such as tops, headers, bottoms, menus, footers, primary, navigation, material, objects, topnavs, sidebars, etc., so on. However, because of this, Search engines were unable to identify the correct content of the web page.

  Examples of HTML5 Semantics

  Now let’s see some examples of HTML5 Semantics element:

  Example #1 –

  It refers to the header of a page introductory segment, as the name suggests. Many headers can be found on one page.

  Code:

  
  
  <title>Header Element for the page</title>
  <style>
  h1, h4 {
  Color:#red;
  Text-align:centre;
  margin-bottom:2px;
  }
  p {
  font-size:23px;
  text-align:centre;
  margin-top:2px;
  }
  </style>
  
  
  <article>
  <header>
  <h1 id="Educba-learning-bridge">Educba learning bridge</h1>
  <h3 id="Become-a-techinal-learner-with-EDUCBA">Become a techinal learner with EDUCBA</h3>
  <p>Hey the best online training institute in ASIA </p>
  </header>
  </article>
  
  

  Output:

  

  Example #2 –

  A collection of navigation links is used to describe the navigation menu or navigation bar.

  Code:

  
  
  <title>Navigation Element</title>
  <style>
  h1 {
  color:#Grey;
  }
  </style>
  
  
  <h1 id="Navigation-Bar-for-EduCBA">Navigation Bar for EduCBA</h1>
  <nav>
  <a href="https://www.educba.com/">Home</a> |
  <a href="https://www.educba.com/data-science/">Data Science</a> |
  <a href="https://www.educba.com/software-development/">Software Development</a> |
  <a href="https://www.educba.com/design/">Design</a> |
  <a href="https://www.educba.com/finance/">Finance</a>
  </nav>
  
  

  Output:

  

  Example #3 –

  A page could be broken down into sections such as Introduction, Contact, Details, etc., with an element for each section.

  Code:

  
  
  <title>Have a look for Section Element in EduCBA</title>
  <style>
  h1 {
  color:#Grey;
  }
  p {
  font-size:20px;
  text-align:left;
  margin-top:2px;
  }
  </style>
  
  
  <section>
  <h1 id="AWS-Tutorials-for-EduCBA">AWS Tutorials for EduCBA</h1>
  <p>Amazon Web Services (AWS) is one of the world's most popular and used cloud services. 175 supported services are available in AWS. </p>
  </section>
  <section>
  <h1 id="Data-Mining">Data Mining</h1>
  <p>AThrough technological development such as big data and data science companies around the world have benefited from data mining by recognize opportunities and making their organizations efficient through waste reduction, to achieve their business goals.
  </p>
  </section>
  
  

  Output:

  

  Example #4 – 

  This mark element is used to highlight the text.

  Code:

  
  
  <title>EduCBA mark Element</title>
  <style>
  h2 {
  color:#Grey;
  }
  </style>
  
  
  <h1 id="How-to-mark-text">How to mark text </h1>
  <p> In theory, this method transforms <mark>raw data into valuable information</mark> or insights.</p>
  
  

  Output:

  

  Example #5 –

  It is an aspect of a block or a segment division. It is used as a package.

  Code:

  
  
  <title>div Element</title>
  <style>
  .edu {
  color:#grey;
  }
  </style>
  
  
  <h1 id="div-Element-for-educba">div Element for educba </h1>
  <div class="EduCBA">
  <h1 id="Data-Science">Data Science</h1>
  <p>Data analatics computer Science nachine learning </p>
  </div>
  
  

  Output:

  

  Example #6 –

  and

  • This element is used to define additional details that can be viewed or hidden by the user.
  • This element is used to define a visible heading for an
    element

  Program to implement

  and

  Code:

  
  
  <title>Details for the EduCBA Summery</title>
  <style>
  .GFG {
  Color:#red;
  font-size:60px;
  Text-align:left;
  margin-bottom:0px;
  }
  p {
  font-size:25px;
  text-align:left;
  margin-top:3px;
  }
  </style>
  
  
  <details>
  <summary class="EDUCBA">Make your Study easily with us</summary>
  <p>One of the best Data Science and web portal
  where you can learn good skills of programming.
  </p>
  </details>
  
  

  Output:

  

  

  7. :
     This element is used for specifying the content aside from the page content.
  8. : This element is used for specifying time or date.
  9. :
     This element is used for specifying the main content of the document.

  How to Implement all the elements Code in one Example?

  Here we see how to implement the elements code in one example.

  Code:

  
  
  <title>Header Element for the page</title>
  <style>
  color:red;
  h1, h4 {
  Color:#red;
  Text-align:centre;
  margin-bottom:2px;
  }
  p {
  font-size:20px;
  text-align:centre;
  margin-top:2px;
  }
  </style>
  
  
  <article>
  <header>
  <h1 id="Educba-learning-bridge">Educba learning bridge</h1>
  <nav>
  <a href="https://www.educba.com/">Home</a> |
  <a href="https://www.educba.com/data-science/">Data Science</a> |
  <a href="https://www.educba.com/software-development/">Software Development</a> |
  <a href="https://www.educba.com/design/">Design</a> |
  <a href="https://www.educba.com/finance/">Finance</a>
  </nav>
  <details>
  <h3 id="Become-a-technicall-learner-with-EDUCBA">Become a technicall learner with EDUCBA</h3>
  <section>
  <h1 id="mark-AWS-Tutorials-for-EduCBA-mark"><mark>AWS Tutorials for EduCBA</mark></h1>
  <p>Amazon Web Services (AWS) is one of the world's most popular and used cloud services. 175 supported services are available in AWS. </p>
  </section>
  <section>
  <h1 id="mark-Data-Mining-mark"><mark>Data Mining</mark></h1>
  <p>Through technological development such as big data and data science companies around the world have benefited from data mining by recognize opportunities and making their organizations efficient through waste reduction, to achieve their business goals.
  </p>
  </section>
  <p><em>EduCBA is the best online training institute in ASIA</em></p>
  </details></header>
  </article>
  
  

  Output:

  

The above is the detailed content of HTML5 Semantics. For more information, please follow other related articles on the PHP Chinese website!