<!–

main_leaderboard, all: [728,90][970,90][320,50][468,60]

–>

HTML Layout Elements and Techniques

The topic we are discussing is HTML layouts. The content of websites is often displayed in multiple columns (like in a newspaper or publication).

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><p><br>Example<br><br><br>Cities<br><br><br><br><br>Washington, D.C<br>London<br>Beijing<br><br><br><br>London<br>The capital of England is London. Over 13 million people live in its metropolitan area, making it the most populous city in the United Kingdom.<br>Since its founding by the Romans, Londinium was the name given to London, which stands along the River Thames.<br><br><br>Footer<br><br><br><br></p><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Table Of Content-

HTML Layout Elements

An HTML web page is constructed up of several semantic elements that define the various sections of the page:

HTML5 Semantic Elements
HTML5 Semantic Elements
  • <header> – Specifying a document’s or section’s header.
  • <nav> – Determining navigation links.
  • <section> – Defining a document’s section.
  • <article> – Describes an independent piece of content.
  • <aside> – Content separated from the content. (example sidebar)
  • <footer> – A section or document’s footer.
  • <details> – Supplies more details that the user can view and close at any time.
  • <summary> – It specifies the heading for the <details> element.
Tip : Learn more about semantic elements in HTML Semantics.

HTML Layout Techniques

Multicolumn layouts can be created using four different methods. When it comes to HTML layouts, every technique has its pros and cons:

  • CSS grid
  • CSS float property
  • CSS framework
  • CSS flexbox
  • CSS div

HTML layouts Normal flow

Default HTML layout OR HTML layouts is how the browser arranges HTML pages when you don’t control it. Here is an example of HTML:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Football clubs</p>
<ul>
<li>Arsenal</li>
<li>Real Madrid</li>
<li>Barcelona</li>
<li>PSG</li>
<li>Liverpool</li>
<li>AC Milan</li>
<li>Manchester City</li>
</ul>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

CSS Frameworks

You can use Bootstrap to create HTML layouts fast using a CSS framework.

CSS Float Layout

CSS float is generally used to layout whole web pages. The float and clear properties make float comfortable to learn.

Disadvantages: Elements that float are bound to the document flow, which decreases their flexibility. Our CSS Float and Clear chapter will cover more about float when it comes to HTML layouts.

CSS float another example:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html>
<head>
<style>
div.container {
width: 100%;
border: 1px solid black;
}
header{
padding: 5px;
color: blue;
background-color: red;
text-align: center;
}
navigation {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}
navigation ul {
list-style-type: none;
padding: 0;
}
navigation ul a {
text-decoration: none;
}
article {
margin-left: 158px;
border-left: 1px solid black;
padding: 5px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Games</h1>
</header>
<navigation>
<ul>
<li><a href="#">Baseball</a></li>
<li><a href="#">Football</a></li>
<li><a href="#">Tenis</a></li>
</ul>
</navigation>
<article>
<h2>Baseball</h2>
<p>Baseball is a bat-and-ball sport played between two teams of nine players each, taking turns batting and fielding. </p>
<p>The game occurs over the course of several plays, with each play generally beginning when a player on the fielding team, called the pitcher, throws a ball that a player on the batting team, called the batter, tries to hit with a bat.</p>
</article>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

CSS Div Layout

CSS div layout is given below:

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><title>Div layout</title><br><style><br>body{<br>margin:0px;<br>}<br>.header{<br>padding: 10px;<br>background-color:#C0C0C0;<br>text-align: center;<br>color:#FF0000 ;<br>}<br>.header h2{<br>color: rgb(187, 81, 81); }<br>.navigation{<br>background-color:#800000;<br>padding: 4px;<br>color:black;<br>font-weight:bold;<br>}<br>.navigation li{<br>list-style: none;<br>display: inline-block;<br>padding: 3px;<br>}<br>.navigation a{<br>color: rgb(213, 129, 129);<br>}<br>.navigation ul li a:hover{<br>text-decoration: none;<br>color: #4ba141;<br>}<br>.center{<br>float: left;<br>width: 100%;<br>min-height: 300px;<br>background-color: #183751;<br>text-align: center;<br>color:yellow;<br>}<br></style><br><br><br><div><br><div class="header"><br><h2>Div Layout Mr Examples</h2><br></div><br><div class="navigation"><br><ul><br><li><a href="#">HOME</a></li><br><li><a href="#">MENU</a></li><br><li><a href="#">ABOUT</a></li><br><li><a href="#">CONTACT</a></li><br><li style="float: right;"><a href="#">Sign-in</a></li><br><li style="float: right;"><a href="#">Log-out</a></li><br></ul><br></div><br><div style="height:440px"><br><div class="center"><br><p>Your information goes here</p><br></div><br></div><br></div><br><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

CSS Flexbox Layout

Flexbox is used in HTML layouts to ensure that elements behave predictably across screen sizes and display devices.

In our CSS Flexbox chapter, you can learn more about flexbox.

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body><p>Cities
Washington, D.C
London
Beijing
Beijing
With a population of more than 20 million, Beijing is China's capital and its second largest city after Shanghai. After the Chinese revolutions, it became the seat of the People's Republic of China and the country's cultural and educational center.
It is known for its flatness and regular construction. In the famous Forbidden City's Jingshan Park to the north, there are only three hills that can be found within the city limits. A concentric network of ring roads surrounds Beijing, much like the Forbidden City.
Footer
</p></body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

CSS Grid Layout

It allows web page designers to create layouts without using floats and positioning in HTML by using a grid-based layout system when it comes to HTML layouts.

Tip: Check out our CSS Grid View chapter to learn more about CSS grids.

Benefits of HTML Layout

Benefits of Using HTML Layout Elements and Techniques in Web Development:

1.<header>, <nav>, <main>, <aside>, and <footer> offer a semantic way to organize webpage content. They also helps search engines understand the content and improve SEO.

2.HTML Layout Elements Enhance Accessibility. Proper use of layout elements can improve accessibility for users relying on assistive technology like screen readers.
<nav> used for navigation links can help screen reader users navigate a website

3. HTML Layout Techniques Promote Separation of Content and Presentation. Using CSS to style page elements can separate content and presentation on a webpage. Altering appearance of a website without affecting underlying content becomes possible.

4. HTML Layout Techniques Enable Responsive Design. CSS media queries and flexbox help create responsive designs that adapt to different screen sizes and devices.

5. HTML Layout Elements and Techniques Promote Consistency and Maintainability. Consistent use of HTML layout elements and techniques across a website eases maintenance and updates. Guarantees a consistent user experience across different pages of the site.

Do subscribe to our Newsletter below to be in touch with the latest technical knowledge on this site.
We value your feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!
icon
By subscribing, you agree with our privacy policy and our terms of service.

Leave a Reply

Your email address will not be published. Required fields are marked *