How To Create Layout In HTML5

HTML5 has new attractive tags to create a layout in an easy and simple way. These tags are listed below:

<header>: used to define a header section in HTML doc.
<nav>: used to define a navigation bar in HTML doc.
<section>: used to define a section in HTML doc.
<article>: used to define an independent self contained article in HTML doc.
<aside>: used to define a content aside from the content like a sidebar in HTML doc.
<footer>: used to define a footer for a document or a section in HTML doc.
<details>: used to define additional details in HTML doc.
<summary>: used to define a heading for the <details> element in HTML doc.

Now, start creating a layout, step by step.

Here, I am using Notepad to write HTML code but if you want to use the HTML editor, it's up to you.

Step 1: Open Notepad and save the file with .html extension (shown in the image below):

After clicking on the save button, the file is saved as an HTML document

Step 2: Open HTML (index) file,

After opening the file, we write our HTML code here.

Html code

<!DOCTYPE html>
<html>
<head>
<title>my layout</title>
<link rel="stylesheet" type="text/css" href="my.css">
</head>
<body>
<header id="header">
<h1>c# corner</h1>
</header>
<nav id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Article</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<aside id="side">
<h1>news</h1>
<a href="#"><p>creating html website</p></a>
<a href="#"><p>learn css</p></a>
<a href="#">learn c#</a>
</aside>
<article id="article">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, mei cu dolor tamquam impedit. Congue partiendo cu sed, quo eu ipsum offendit. Ad mei nulla patrioque torquatos, adhuc recusabo eum in. Omnium scriptorem ad nec, vidit iracundia vim in.
</p>
<p>
Stet epicuri an eum, tempor utroque fierent mei ei. Mei veri indoctum splendide id, eum eu scaevola efficiendi neglegentur. Per no aliquando instructior. Has tempor admodum quaerendum ei.
</p>
<p>
No latine detraxit praesent duo, porro soleat copiosae ne cum. Labitur nostrud et pro, mel ut dolor vidisse. Ad liber oporteat qui, te est sumo integre commune, ne sed dico nihil. Ex vel commodo equidem reformidans, sit in elitr repudiandae, ne est tritani suavitate. Ei augue audiam vivendo vim. Vim ut facer instructior, partiendo qualisque ad est. Nam eu autem illud iriure, eleifend praesent expetendis in nam, mutat commune ius ea.
</p>
<p>
Ei eos enim exerci persequeris. Ea est veri omnium probatus, scripta sensibus eu ius, no pri semper maluisset cotidieque. Cum mollis phaedrum concludaturque ne, ad aliquid detraxit mel. Ad nam habeo apeirian, an eleifend evertitur intellegam per. At albucius offendit cum.
</p>
<p>
Ea usu atqui choro tation. Ei eius salutandi adversarium vis, mentitum accommodare ullamcorper nec ei. Alterum invenire suavitate usu ei, eam invenire efficiantur at. Ex cum tale prodesset, ius ad minim timeam adipiscing. Eu appetere invenire mediocritatem est. His nibh mazim neglegentur ad, qui assum consul qualisque et.
</p>
</article>
<footer id="footer">
copyright @c# corner
</footer>
</body>
</html>

I have provided ID in HTML tags for styling. Open index.htm in the Web Browser.

Our Webpage looks as shown in the image below:

Our Web page is not looking good. In the next step we are going to change our Webpage view, using CSS.

Step 3: Open new file in Notepad and save with .css extension (shown in the image, given below):

Open my.css file in Notepad and write the code.

Css code

#header{
color: #247BA0;
text-align: center;
font-size: 20px;
}
#nav{
background-color:#FF1654;
padding: 5px;
}
ul{
list-style-type: none;
}
li a {
color: #F1FAEE;
font-size: 30px;
column-width: 5%;
}
li
{
display: inline;
padding-left: 2px;
column-width: 20px;
}
a{
text-decoration: none;
margin-left:20px
}
li a:hover{
background-color: #F3FFBD;
color: #FF1654;
padding:1%;
}
#side{
text-align: center;
float: right;
width: 15%;
padding-bottom: 79%;
background-color: #F1FAEE;
}
#article{
background-color: #EEF5DB;
padding: 10px;
padding-bottom: 75%;
}
#footer{
background-color: #C7EFCF;
text-align:center;
padding-bottom: 5%;
font-size: 20px;
}

Save file and run HTML file in web browser

Our webpage is looking better(shown in picture),

Now, learn the attributes in my.css file, shown below:

#header{
color: #247BA0;
text-align: center;
font-size: 20px;

#header is id used in <header> for styling.

color- is to set text color.

text-aling is used to aline text or show text in center.

font-size to set font size.

#nav{
background-color:#FF1654;
padding: 5px;
}

#nav is id of <nav>.

Background-color is used to set the background color of our navigation bar.

Padding is used to expand our navigation bar.

ul{
list-style-type: none;
}

Here, we remove dot from the list element,

li a:hover{
background-color: #F3FFBD;
color: #FF1654;
padding:1%;
}

Hover is used for the navigation bar hover.

13 Comments

Join the conversation! Your thoughts help the community grow.

Madhanmohan Devarajan10y ago
Good for start up
Delpin Susai Raj10y ago
Nice
Ajay Malik10y ago
Tq..
Raja10y ago
Nice Article..
Chandra Shekher10y ago
Nice article.
Ajay Malik10y ago
Tq..
Prasanna Murali10y ago
Nice one...
Ajay Malik10y ago
Tq..
Vignesh Mani10y ago
Good one
Ajay Malik10y ago
Tq
Subash10y ago
Simple and easy to read
Ajay Malik10y ago
Tq..
kalu singh rao10y ago
Nice...