Article Part
Some Detailed Text
Section Part
Some Text
Home > Article > Web Front-end > HTML Layout
HTML Layout
- 王林Original
- 2024-09-04 16:15:39478browse
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>
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
Summary: click here to show details
Details: Upon clicking summary element, details will be shown to the user