Article Part
Some Detailed Text
HTML Layout
html
html5
HTML Tutorial
HTML Properties
HTML tags
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.
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.
Code:
<!DOCTYPE html> <html> <head> <title> EduCba </title> </head> <body> <header style = "height: 100px; width: 100%; background-color: #607D8B;" > <h1 style=" color: #fff; text-align: center; padding-top: 25px; font-size: 30px;" > Header Section</h1> </header> </body> </html>
Copy after login
Output:
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.
Code:
Let us add a navigation element below our last example’s header. Add
Header Section
Section Part
Some Text
Summary: click here to show details
Details: Upon clicking summary element, details will be shown to the user