The HTML Layouts specifies the arrangement of components on an HTML web page. There are many HTML semantic elements that defines different section of a web page.
Following are the semantic HTML elements used for HTML layout:
Tag | Explanation |
---|---|
header | It specifies a header for a section or for a document. |
section | It represents a section in a document. |
nav | It specifies a container for navigation links. |
article | It specifies an independent self-containing article. |
aside | It specifies a tag for content aside from main content (like a sidebar). |
footer | It specifies a footer for a section or for a document. |
details | It specifies a tag for additional details. |
summary | It specifies a header for the <details> element. |
Techniques used for HTML web page layouts:
- CSS float property
- CSS flexbox
- CSS framework
- CSS grid
- HTML tables
Example
Let us see an example of HTML Layouts:
<!DOCTYPE html> <html> <style> * { box-sizing: border-box; } body { color: #000; background-color: #8BC6EC; background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%); text-align: center; } header { background-color: #000; padding: 20px; text-align: center; color: white; } nav { float: left; width: 20%; height: 200px; background: #282828; padding: 60px 10px; } nav ul { list-style-type: none; padding: 0; } nav ul li a { text-decoration: none; color: #fff; } article { float: left; padding: 80px 10px; width: 80%; background-color: #fff; height: 200px; text-align: center; } section:after { content: ""; display: table; clear: both; } footer { background-color: #000; padding: 20px; text-align: center; color: white; } </style> <body> <h1>HTML Layouts Demo</h1> <header>This is Header</header> <section> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <article>This is an article element.</article> </section> <footer>This is Footer</footer> </body> </html>