How To Create Layout In HTML5

Ajay Malik
8y
9.5k
0
9

Article

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>