Webpage Structure in HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webpage Structure in HTML</title>
</head>
<body>
<!--
<header> : usually a big strip across the top with a big heading, logo, tagline etc.
<nav> : links to the site's main sections, usually represented by menu buttons, links, or tabs.
<main> : big area in center that contains most of the Web-content. There will be ONLY one <main> per webpage
<article> : self-contained composition in a document, page, app, or website.
<section> : generic standalone section of a document, page or website.
<div> : generic container for flow content, "pure" container, <div> element does not inherently represent anything
<aside> : sidebar with some peripheral info, links, quotes, ads, etc.
<footer> : strip across the bottom of the page that generally contains fine print, copyright notices, or contact info.
-->
<!-- Here is the header that is used across all the pages of the website -->
<header>
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
<!-- A Search form is another common non-linear way to navigate through a website. -->
<form>
<input type="search" name="q" placeholder="Type here">
<input type="submit" value="Search">
</form>
</nav>
</header>
<!-- Here is the page's main content -->
<main>
<h1>Best Software Services</h1>
<a href="#bank">Banking</a> <br>
<a href="#insurance">Insurance</a> <br>
<a href="#personal">Personal Insurance</a> <br>
<a href="#commercial">Commercial Insurance</a>
<!-- main element contains an article -->
<article>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat exercitationem quibusdam vitae repellat facilis fugiat. Veniam et a quaerat officiis eaque reprehenderit inventore totam. Hic omnis ipsum quia ex et voluptatem eius, iusto consequuntur accusamus optio odit cum recusandae aperiam dolorem molestias voluptate. Labore modi voluptas exercitationem fugiat corporis veritatis.</p>
<p>Neque saepe laboriosam, ipsum incidunt corrupti asperiores blanditiis, minus quibusdam, officia nam minima nostrum fugit molestias quidem iste? Nemo provident, id dolorem dolores eum aut. Velit ipsam laborum aperiam obcaecati asperiores, reprehenderit voluptatibus perspiciatis et itaque doloribus atque labore blanditiis exercitationem porro unde vel quia iste provident nam vitae est.</p>
</article>
<article>
<section id="bank">
<h2>Banking</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dicta doloremque fuga esse alias excepturi sit ipsum, ab aspernatur quos harum voluptas obcaecati iure, incidunt nemo! Debitis soluta quam fugit pariatur!</p>
</section>
<section id="insurance">
<h2>Insurance</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eveniet nam aspernatur quas inventore. Omnis aut dolore dignissimos quibusdam nihil odio, vero veritatis fugit maiores, magnam deserunt quidem non dolorum repudiandae?</p>
<div id="personal" class="ins1">
<h3>Personal Insurance</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus magni nulla labore debitis quae! Nostrum laborum fugit illum possimus aliquam labore, nulla deleniti! Cupiditate, assumenda error tempore a laudantium facilis.</p>
<span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et commodi debitis unde cupiditate enim dolor veniam animi accusantium quasi deleniti nostrum iure voluptates doloremque, labore ipsam tempore, quis nobis sint?</span>
</div>
<div>
<h3>Commercial Insurace</h3>
<p id="commercial" class="ins2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus magni nulla labore debitis quae! Nostrum laborum fugit illum possimus aliquam labore, nulla deleniti! Cupiditate, assumenda error tempore a laudantium facilis.</p>
<span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et commodi debitis unde cupiditate enim dolor veniam animi accusantium quasi deleniti nostrum iure voluptates doloremque, labore ipsam tempore, quis nobis sint?</span>
</div>
</section>
</article>
<!-- the aside content can also be nested within the main content -->
<aside>
<h2>Blogs</h2>
<ul>
<li><a href="#">Digital Insights for Mobile Apps</a></li>
<li><a href="#">How to build effective Software</a></li>
<li><a href="#">Top Programming Languages</a></li>
<li><a href="#">Use of RPA for better results</a></li>
<li><a href="#">Effective Testing Strategies</a></li>
</ul>
</aside>
</main><br>
<!-- And here is the footer that is used across all the pages of the website -->
<footer>
© Copyright 2022 . All rights NOT reserved
</footer>
</body>
</html>