HTML Structure

This Template is a responsive Multipurpose HTML5 Template. It’s followed HTML5 structure. All of the information within the main body area is nested within an HTML5 tag. You will find all content in specific HTML5 tags such as <header>, <section>, <aside>, <article>, <footer> etc tags. Every section is separated with comments. We followed all coding standard procedure.

Head section structure: Here is the example of <head> section code.

<!doctype html>
<html lang=”en“>
<head>
<meta charset=”UTF-8“>
<title>Top Class Multipurpose HTML Templeman by JWTheme</title>
<meta name=”description” content=”Top Class Multipurpose HTML Templeman by JWTheme” >
<meta name=”author” content=”JWTheme“>
<!– Mobile Specific Meta –>
<meta name=”viewport” content=”width=device-width, initial-scale=1“>
<!–[if IE]><meta http-equiv=’X-UA-Compatible’ content=’IE=edge,chrome=1′><![endif]–>
<!– Bootstrap –>
<link href=”assets/css/bootstrap.min.css” rel=”stylesheet“>
<!– icon fonts font Awesome –>
<link href=”assets/css/font-awesome.min.css” rel=”stylesheet“>
<!– icon fonts linecons –>
<link href=”assets/css/linecons-font-style.css” rel=”stylesheet“>
<link href=”assets/css/jquery.fs.boxer.css” rel=”stylesheet” type=”text/css” media=”all” />
<!– Import Custom Styles –>
<link href=”assets/css/style.css” rel=”stylesheet“>
<!– Import Responsive Styles –>
<link href=”assets/css/responsive.css” rel=”stylesheet“>
<!– Important owl stylesheet –>
<link rel=”stylesheet” href=”assets/css/owl.carousel.css“>
</head>

Body section structure: Here is the structure of one section of <body> tag. It is very much well organized and well commented

 
<body>
<!– Page Top –>
<div id=”page-top“></div>
<!– Page Top End –>
<!– Top Section –>
<section id=”top-section“>
<div class=”top-section parallax-style“>
<div id=”top-carousel” class=”carousel slide top-carousel-container” data-ride=”carousel“>
<ol class=”carousel-indicators“>
<li data-target=”#top-carousel” data-slide-to=”0” class=”active“></li>
<li data-target=”#top-carousel” data-slide-to=”1“></li>
<li data-target=”#top-carousel” data-slide-to=”2“></li>
</ol><!– /.carousel-indicators –>
<div class=”carousel-inner“>
<div class=”item active“>
<div class=”top-headings“>
<h2 class=”top-heading-1“>
We are <span>Top</span>Class
</h2>
<h3 class=”top-heading-2“>
Embrace Yourself With our
</h3>
<h3 class=”top-heading-3“>
<span>Awesome</span> Works
</h3>
</div><!– /.top-headings –>
<div class=”button-container“>
<button type=”button” class=”btn btn-sm btn-default btn-effect“>Get Started</button>
</div><!– /.button-container –>
</div><!– /.item –>
<div class=”item“>
<div class=”top-headings“>
<h2 class=”top-heading-1“>
Ready to <span>Explorer </span>
</h2>
<h3 class=”top-heading-2“>
<span>Explorer</span> Yourself With our
</h3>
<h3 class=”top-heading-3“>
<span>Ex</span>perience
</h3>
</div><!– /.top-headings –>
<div class=”button-container“>
<button type=”button” class=”btn btn-sm btn-default btn-effect“>Get Started</button>
</div><!– /.button-container –>
</div><!– /.item –>
<div class=”item“>
<div class=”top-headings“>
<h2 class=”top-heading-1“>
<span>Multi</span>purpose
</h2>
<h3 class=”top-heading-2“>
<span>Top</span>Class Ready to <span>use for </span>
</h3>
<h3 class=”top-heading-3“>
<span>Multi</span>Works
</h3>
</div><!– /.top-headings –>
<div class=”button-container“>
<button type=”button” class=”btn btn-sm btn-default btn-effect“>Get Started</button>
</div><!– /.button-container –>
</div><!– /.item –>
</div><!– /.carousel-inner –>
<a class=”slide-nav left” href=”#top-carousel” data-slide=”prev“><i class=”fa fa-chevron-left“></i></a>
<a class=”slide-nav right” href=”#top-carousel” data-slide=”next“><i class=”fa fa-chevron-right“></i></a>
</div><!– /#top-carousel /.top-carousel-container –>
<div class=”next-section“>
<button id=”go-to-next” class=”btn“><i class=”fa fa-angle-double-down“></i></button>
</div>
</div><!– /.top-section –>
</section><!– /#top-section –>
<!– Top Section End –>
<!– Menu –>
<div class=”main-menu-continer“>
<div id=”main-menu” class=”navbar navbar-default“>
<div class=”container“>
<div class=”navbar-header“>
<!– Responsive Navigation –>
<button type=”button” class=”navbar-toggle” data-toggle=”collapse” data-target=”.navbar-collapse“>
<span class=”sr-only“>Toggle Navigation</span>
<i class=”fa fa-bars“></i>
</button> <!– /.navbar-toggle –>
<!– Logo –>
<a class=”navbar-brand” href=”./“>
Top<span>Class</span>
</a><!– /.navbar-brand –>
</div> <!– /.navbar-header –>
<nav class=”collapse navbar-collapse” role=”navigation“>
<!– Main navigation –>
<ul id=”headernavigation” class=”nav navbar-nav pull-right“>
<li class=”active“><a href=”#page-top“>Home</a></li>
<li><a href=”#about“>About</a></li>
<li><a href=”#team“>Team</a></li>
<li><a href=”#we-do“>Service</a></li>
<li class=”menu-item-has-children“>
<a href=”#works“>Works</a>
<ul class=”sub-menu“>
<li><a href=”portfolio.html“>Portfolio Page</a></li>
<li><a href=”portfolio-details.html“>Portfolio Details</a></li>
</ul><!– /.sub-menu –>
</li>
<li class=”menu-item-has-children“>
<a href=”#blog“>Blog</a>
<ul class=”sub-menu“>
<li><a href=”blog-page.html“>Blog Page</a></li>
<li><a href=”single-page.html“>Single Page</a></li>
<li><a href=”#“>Demo Menu 1</a></li>
<li><a href=”#“>Demo Menu 2</a></li>
<li class=”menu-item-has-children“>
<a href=”#“>Demo Menu 3</a>
<ul class=”sub-menu“>
<li><a href=”#“>Demo Menu 1</a></li>
<li><a href=”#“>Demo Menu 2</a></li>
<li><a href=”#“>Demo Menu 3</a></li>
</ul><!– /.sub-menu –>
</li>
</ul><!– /.sub-menu –>
</li>
<li class=”menu-item-has-children“>
<a href=”shortcodes.html” class=”not-in-home“>Shortcodes</a>
<ul class=”sub-menu“>
<li><a href=”404.html“>404 Page</a></li>
</ul><!– /.sub-menu –>
</li>
<li><a href=”#contact“>Contact</a></li>
</ul> <!– /.nav .navbar-nav –>
</nav> <!– /.navbar-collapse –>
</div> <!– /.container –>
</div><!– /#main-menu –>
</div><!– /.main-menu-continer –>
<!– Menu End –>