Hi Everyone,
Today I will discover HTML 5 features that you should know for focusing your web development. In this topic I will show you some main tags especially for layouting your web page. They are:
<header>
<footer>
<nav>
<section>
<article>
<aside>
<meter>
<progress>Let starting with the right HTML5 standard tags before we do some layouting.
<!DOCTYPE html> <html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>MyHTML5 Page</title>
</head>
<body>
</body>
</html>Here's the layout that we want to build.
We started from top of layout there is header. Body is first declared in initial html tags.
new
Header
First header is page header that contains web title inside page. We call our web page as "My First Blog".
<header id="page-header">
<h1>My First Blog</h1>
</header>We put <h1> tag inside header as large heading, also we put id for top first header "page-header" for future advancing style or just identification.
Nav
Inside top header and right section we have <nav> tags that will be our navigation menu later. For top header and side section nav put after <h1> tags.
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="recent">Recent Post</a></li>
<li><a href="popular">Popular Post</a></li>
<li><a href="about">About Us</a></li>
<li><a href="contact">Contact Us</a></li>
</ul>
</nav>
Section
Section put below header and we separate 2 sections. Left section for body of blog post and right section for right navigation.
<section id="main-section">
</section>
<section id="rightnav-section">
</section>In rightnav-section we put a header with h1 and same as above top header is nav after header.
<section id="rightnav-section">
<header>
<h1>Navigation</h1>
</header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="recent">Recent Post</a></li>
<li><a href="popular">Popular Post</a></li>
<li><a href="about">About Us</a></li>
<li><a href="contact">Contact Us</a></li>
</ul>
</nav>
</section>
Article
Inside main-section we have to insert article. Article will be main page content that contains of title heading, paragraph, aside contain a paragraph and also footer.
<article>
<header>
<h1>My First Blog Post</h1>
</header>
<p>
Lorem ipsum dolor sit amet, albucius euripidis abhorreant eos in. Sit utroque torquatos in, qui dolor adipisci an. Debet utamur voluptatibus ut nec, solet accumsan mediocritatem ut his, vide labitur suavitate in vix. Mel congue volumus no.
</p>
<p>
Eripuit nusquam antiopam ne has, at mel quidam possit, quot choro quando at nam. No mel nemore eruditi interpretaris. Nam dignissim forensibus ut. Per ex sale neglegentur. In case feugiat sea, his justo illum te, ea eos utamur officiis perpetua. Vero partiendo repudiandae eos no, error legendos id has, nam ut modo consequuntur.
</p>
<aside>
<p>
Lorem ipsum dolor sit amet, albucius euripidis abhorreant eos in. Sit utroque torquatos in, qui dolor adipisci an. Debet utamur voluptatibus ut nec, solet accumsan mediocritatem ut his, vide labitur suavitate in vix. Mel congue volumus no.
</p>
</aside>
<footer>
Reference: Djamware Blog
</footer>
</article>Footer
The last tag in layout is footer that will keep our copyright or footnote content.
<footer>
Copyright 2016. Djamware.com
</footer>
And here is complete code for layout.
<!DOCTYPE html> <html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>MyHTML5 Page</title>
</head>
<body>
<header id="page-header">
<h1>My First Blog</h1>
</header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="recent">Recent Post</a></li>
<li><a href="popular">Popular Post</a></li>
<li><a href="about">About Us</a></li>
<li><a href="contact">Contact Us</a></li>
</ul>
</nav>
<section id="main-section">
<article>
<header>
<h1>My First Blog Post</h1>
</header>
<p>
Lorem ipsum dolor sit amet, albucius euripidis abhorreant eos in. Sit utroque torquatos in, qui dolor adipisci an. Debet utamur voluptatibus ut nec, solet accumsan mediocritatem ut his, vide labitur suavitate in vix. Mel congue volumus no.
</p>
<p>
Eripuit nusquam antiopam ne has, at mel quidam possit, quot choro quando at nam. No mel nemore eruditi interpretaris. Nam dignissim forensibus ut. Per ex sale neglegentur. In case feugiat sea, his justo illum te, ea eos utamur officiis perpetua. Vero partiendo repudiandae eos no, error legendos id has, nam ut modo consequuntur.
</p>
<aside>
<p>
Lorem ipsum dolor sit amet, albucius euripidis abhorreant eos in. Sit utroque torquatos in, qui dolor adipisci an. Debet utamur voluptatibus ut nec, solet accumsan mediocritatem ut his, vide labitur suavitate in vix. Mel congue volumus no.
</p>
</aside>
<footer>
Reference: Djamware Blog
</footer>
</article>
</section>
<section id="rightnav-section">
<header>
<h1>Navigation</h1>
</header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="recent">Recent Post</a></li>
<li><a href="popular">Popular Post</a></li>
<li><a href="about">About Us</a></li>
<li><a href="contact">Contact Us</a></li>
</ul>
</nav>
</section>
<footer>
Copyright 2016. Djamware.com
</footer>
</body>
</html>This html is unstyle so this is not same as in layout mockup. For this plese go to styling tutorial here.
Thanks.