Hello readers!
Here is demo of HTML5 page structure. In this structure we are using semantic elements, so its also called Semantic HTML5 Page Layout.
Semantic Elements :- In many website we see html write like shown below-
<div class="header"></div>
<div id="nav"></div>
<div id="footer"></div>
But html5 offer some semantic elements for web pages.
<header></header>
<nav></nav>
<footer></footer>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Website Tital</title>
</head>
<body>
<!-- Header -->
<header>
<nav>
<ul>
<li>Navigation list</li>
</ul>
</nav>
</header>
<!-- /Header -->
<!-- Main section -->
<section>
<article>
<header>
<h2>Heading</h2>
<p>text in paragraph </p>
</header>
<p>(Text in paragraph) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</article>
<article>
<header>
<h2>Heading</h2>
<p>text in paragraph </p>
</header>
<p>(Text in paragraph) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</article>
</section>
<!-- /Main section -->
<!-- aside colom -->
<aside>
<h2>Aside Section</h2>
<p>(Text in paragraph) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</aside>
<!-- /aside colom -->
<!-- Footer -->
<footer>
<p>paragraph text in footer section (c)</p>
</footer>
<!-- /Footer -->
</body>
</html>
0 Comment(s)