- HTML Layout Elements and Techniques
- Example
- Cities
- London
- HTML Layout Elements
- HTML Layout Techniques
- CSS Frameworks
- CSS Float Layout
- Example
- Cities
- London
- CSS Flexbox Layout
- Example
- Cities
- London
- CSS Grid Layout
- HTML Layout
- HTML Layout Elements
- tag
- tag
- tag
- tag
- tag
- tag
- tag
- HTML Layout
- Example: HTML Layout
- Table of Contents
- HTML Layout
- HTML Layout Elements
- Conclusion
- Recommended Articles
HTML Layout Elements and Techniques
Websites often display content in multiple columns (like a magazine or a newspaper).
Example
Cities
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
HTML Layout Elements
HTML has several semantic elements that define the different parts of a web page:
— Defines a set of navigation links
— Defines a section in a document
— Defines an independent, self-contained content
— Defines content aside from the content (like a sidebar)
— Defines a footer for a document or a section
— Defines additional details that the user can open and close on demand
— Defines a heading for the element
- — Defines a header for a document or a section
- — Defines a set of navigation links
- — Defines a section in a document
- — Defines an independent, self-contained content
- — Defines content aside from the content (like a sidebar)
- — Defines a footer for a document or a section
- — Defines additional details that the user can open and close on demand
- — Defines a heading for the element
You can read more about semantic elements in our HTML Semantics chapter.
HTML Layout Techniques
There are four different techniques to create multicolumn layouts. Each technique has its pros and cons:
CSS Frameworks
If you want to create your layout fast, you can use a CSS framework, like W3.CSS or Bootstrap.
Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template, and host it for free.
CSS Float Layout
It is common to do entire web layouts using the CSS float property. Float is easy to learn — you just need to remember how the float and clear properties work. Disadvantages: Floating elements are tied to the document flow, which may harm the flexibility. Learn more about float in our CSS Float and Clear chapter.
Example
Cities
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
CSS Flexbox Layout
Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.
Learn more about flexbox in our CSS Flexbox chapter.
Example
Cities
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
CSS Grid Layout
The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
Learn more about CSS grids in our CSS Grid Intro chapter.
HTML Layout
As you can see we have various contents on the page like heading, footer, the home page, etc in a structured way.
HTML Layout Elements
There are various HTML Layout elements. They are as follows:
tag
A tag defines the document’s header. For example,
Browser output
tag
The tag represents a section of a page that links to other pages or to parts within the page.
tag
The tag in HTML represents a standalone section of content within a document. To learn more visit HTML .
tag
The tag in HTML represents a self-contained piece of content that can be reused.
tag
The tag is used to represent a portion of a document that is indirectly related to the main content. It is most commonly used as a sidebar in the document. To learn more visit HTML .
tag
The HTML tag defines the footer of the HTML document or section. To learn more visit HTML .
tag
The tag provides additional details that the user can view or hide on demand. For example,
The tag defines the visible heading for the element. Here, if we click on Click me the Hidden content will be displayed.
HTML Layout
Let’s create a simple layout using CSS.
In the above example, we have created a with a class box . Inside it, we have a and an element with class yellow and blue respectively. We have used CSS to arrange the elements.
- display: flex — arranges the box next to each other in a row
- height: 200 px — sets the height to 200 pixels
Then, we have also used CSS for the with class blue and yellow .
- width — sets the width of
- height — sets the height of
- background-color — sets the background color of
We’ll learn more about CSS layouts in our CSS tutorials.
Example: HTML Layout
Browser output
Table of Contents
HTML Layout
While designing a web page, we must arrange the web page elements in an elegant way. They should be easy to navigate for the user and simple. It provides a way to arrange these elements in a well-structured manner. HTML layout gives a very good look to the web page and provides an easy way to design. It is a simple way by which we can design web elements using simple standard HTML tags. HTML offers various layout elements by using which we can design various parts of the web page.
Web development, programming languages, Software testing & others
HTML Layout Elements
In this article, we will see different layout elements and their examples. Using these elements, we will design a simple structure similar to the newspaper.
1.
This element is used to define the header of the web page. It contains the title of the page or some logo or maybe introductory content.
2.
This element will contain links to the menu list. This element is like a container for different navigation links. The links will be on a different page or the same page.
Let us add a navigation element below our last example’s header. Add part into the element and part just below the header section.
3.
This element is like the main section of the web page. It can contain any kind of information. It can contain text, images, etc.
4.
As the name suggests, this element will contain content like a paragraph, any detailed description of something, or any kind of information. Generally, this will be the main part containing information on a web page.
5.
This element will define the content at the side of the main content, like a section or article. This information element is optional and generally contains additional information or advertisement content.
Let’s add all these three elements together below the navigation bar.
li < display: inline-flex; padding: 25px >section < background-color: #607D8B; width: 79%; position: absolute; height: 150px; >article < width: 79%; background-color: #607d8b70; position: absolute; top: 368px; height: 150px; >aside < background-color: #607d8b99; width: 20%; position: absolute; left: 80%; height: 300px; >h2 , p < text-align: center; color: #9c27b0; >ul Section Part
Some Text
Article Part
Some Detailed Text
6.
This element displays extra details about the web page to the user. This may contain additional information which is optional for the user. This element, by default, provides a feature to show or hide details upon clicking.
7.
This element is used along with the element. The information which is to be hidden and will be shown upon click will be in this tag. This element will be inside the details element.
Let us add details elements along with the summary element in our existing example. Add the code below after our aside section and article element parts in the tag.
Summary: click here to show details
Details: Upon clicking summary element, details will be shown to the user
details < margin-top: 330px; width: 100%; padding-top: 10px; padding-bottom: 50px; padding-left: 15px; background-color: #607d8bdb; >details p < font-size: 18px; >summary Output 1: Without clicking on the details element.
Output 2: After clicking on the details element.
8.
There will be one section at the bottom of every web page, known as a footer. This element defines the footer section at the bottom of the web page. The footer section will generally contain copyrights, year, contact information, etc. It’s a standard practice to have a footer in the web pages, which will be at the bottom of a web page.
Let us add-footer on our web page at the bottom part.
So our final code and its output will look like this,
Conclusion
So HTML layout elements are very much useful while designing a web page. They help developers to design well-structured web pages. Using these layout elements properly improves the reading experience of web pages. We have seen most of the main HTML layout elements in detail.
Recommended Articles
This is a guide to HTML Layout. Here we discuss HTML Layout Elements with the example, codes, and outputs in detail. You can also go through our other related articles to learn more –
89+ Hours of HD Videos
13 Courses
3 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5
97+ Hours of HD Videos
15 Courses
12 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5
HTML & CSS Course Bundle — 33 Courses in 1 | 9 Mock Tests
125+ Hours of HD Videos
33 Courses
9 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5