HTML Semantics

HTML semantic element clearly describe the purpose of element to both browser and developer.

Example: <table>, <header> , <form> these are example of html semantic elements they are clearly describing their purpose.

HTML Semantic Elements

In HTML there are some semantic elements that are use to define the visual representation of different parts of html page. Lets discuss some semantic tags below:

Tag	Description
<header>	Defines the header for page.
<aside>	Defines sidebar for page.
<article>	Defines independent content of page.
<nav>	Defines navigation links.
<section>	Defines a section in a document..
<main>	Defines the main content of html page.
<figure>	Defines self-contained content like diagrams , illustrations , photos.
<figcaption>	Defines caption for <figure> element.
<details>	Defines additional details that user can view or hide.
<time>	Defines date and time.
<summary>	Defines heading for detail element.
<footer>	Defines the footer of document.

HTML Header

HTML <header> element is used to define the header for html document/section. A header tag contains the logo or heading of page can also contain some navigation and search tools. There can be more than one header tag in html document.

Note: A header tag cannot be used within footer, address or another header element.

            <header width="200px" style="background-color:pink; height:100px;  text-align:center; padding-top:20px">
                <h1>Header</h1>
            </header>

HTML <aside> Element

The html <aside> element defines a content that is not part of main content but somehow it is linked with webpage. Basically it acts as a side bar for webpage.

<aside>
<p>A markup language is a programming language that describes elements inside a document using tags. It is human-readable, which means that markup files use common words rather than programming syntax.</p>
</aside>

HTML <nav> Element

The HTML <nav> element defines the section of navigation links in the HTML document.

Note: It is not necessary to include all links in <nav> section. The <nav> element is intended for major navigation link blocks only.

<nav>
  <a href="/cpp-overview/">C++</a> |
  <a href="/php-tutorial/">PHP</a> 
</nav>

HTML <section> and <article> Elements

• An article defines the independent content of page. It can be used for forum post, blog post and Newspaper articles.
• A section element defines the section of page and is thematic grouping of content. It can be used mainly for introduction, content and contact information.

The article element can contain section element and vice versa.

<section>
  <h1>HTML</h1>
  <p>HTML(Hypertext Markup Language) is the most commonly and widely used language to write webpages. It is being widely used to format web pages with the avail of different tags available in HTML language. Basically HTML is known as backbone of webpages.</P>

<section>
  <h1>History</h1>
  <p>The roots of HTML dates back to 1980, when CERN (European Organization for Nuclear Research) physicist Tim Berners-Lee proposed a new hypertext method to exchange information.</p>
</section>


<article>
<h2>Article Example</h2>
<p>The article> feature designates a self-contained piece of content that could potentially be distributed as a standalone unit to websites and platforms.</p>
</article>

HTML <figure> and <figcaption> Elements

The html <figure> element specifies a separate section for self-contained content like diagrams , illustrations , photos.

The html <figcaption> defines caption for <figure> element.

The <img> element define the actual image/illustration.

<figure>
  <img src="/media/nature.jpg" alt="Nature" style="width:100%">
  <figcaption>Fig.1 - Nature</figcaption>
</figure>

Figure Example

The html figure element specifies a separate section for self-contained content like diagrams , illustrations , photos.The html

HTML <footer> Element

The html <footer> element defines the footer of html document. The can be several footer elements in a single page.

A footer elements contains contact information, sitemap, copyright information, back to top links and related document.

            <footer width="200px" style="background-color:pink; height:100px;  text-align:center; padding-top:20px">
                <h1>Footer</h1>
            </footer>

For more visit HTML Semantics.