HTML layouts offer a method for organizing web pages in an organized, structured, and adaptable manner. They define how web pages are structured and how visual elements are positioned within an HTML document.
When developing a website, it is crucial to prioritize the web page layout to ensure a professional and visually appealing appearance. Utilizing frameworks based on CSS and JavaScript can aid in crafting layouts that are responsive and dynamic for website design.
Note: Modern practices use semantic layout elements to structure with HTML and responsively arrange and design layout with CSS (Flexbox and Grid).
Each webpage is designed with a unique structure to present information in a particular way.
Following are different HTML5 elements which are used to define the different parts of a webpage.
- <header>: It is used to define a header for a document or a section.
- <nav>: It is used to define a container for navigation links
- <section>: It is used to define a section in a document
- <article>: It is used to define an independent self-contained article
- <aside>: It is used to define content aside from the content (like a sidebar)
- <footer>: It is used to define a footer for a document or a section
- <details>: It is used to define additional details
- <summary>: It is used to define a heading for the <details> element
Note: HTML layouts create an individual space for every part of the web page. So that every element can be arranged in a significant order.
Description of various Layout elements
HTML <header>
Syntax:
<header>
<!-- Your header content will go here -- >
</header>
Example
<header>
<h1>Welcome to our tutorial </h1>
</header>
<style>
header {
background-color: #303030;
height: 80px;
text-align: center;
padding: 15px 0;
}
header h1 {
font-size: 30px;
color: white;
}
</style>
HTML <nav>
The <nav> element serves as a wrapper for the primary set of navigation links. Within this element, you can include links that lead to different sections of the current page or to external pages.
Syntax:
<nav>
<ul>
<li><a href= "#" >Any Content</a></li>
</ul>
</nav>
Example
<nav style="background-color: #bcdeef;">
<h1 style="text-align: center;">Navigation Links</h1>
<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
</ul>
</nav>
HTML <section>
HTML <section> elements serve as a distinct portion of a webpage that houses interconnected elements organized collectively. Within these elements, one can include various content types such as text, images, tables, videos, and more.
Syntax:
<section>
<h2>Section Title</h2>
<p> This is the content of the section.</p>
</section>
Example
<section style="background-color:#ff7f50; width: 100%; border: 1px solid black;">
<h2>Introduction to HTML</h2>
<p>HTML is a markup language which is used for creating attractive web pages with the help of styling, and which looks in a nice format on a web browser..</p>
</section>
HTML <article>
The <article> element is used to encapsulate self-sufficient content that is capable of existing on its own, like a blog post, news article, comment, or product description.
Syntax:
<article>
<h2>Article Title</h2>
<p>This is the content of the article.</p>
</article>
Example
<article style="width: 100%; border:2px solid black; background-color: #fff0f5;">
<h2>History of Computer</h2>
<p>Write your content here for the history of computer</p>
</article>
HTML <aside>
The <aside> element is used to display content that is tangentially related to the main content, such as a sidebar, callout, or note.
Syntax:
<aside>
<h3> Related Links </h3>
<ul>
<li><a href= "#">Related Article</a></li>
</ul>
</aside>
Example
<aside style="background-color: #e6e6fa">
<h2> Sidebar information </h2>
<p>This contains information that will represent like a sidebar for a webpage</p>
</aside>
HTML <footer>
The <footer> tag is responsible for specifying the footer content on a webpage or within a specific section or article. Typically, this section includes details such as the author's name, copyright information, and relevant links.
Syntax:
Example
HTML <footer>
The HTML <details> element is utilized to include additional information on a web page, which users can choose to hide or reveal based on their needs.
Syntax:
<details>
<summary> Click to reveal more details </summary>
<p> Hidden content that can be expanded. </p>
</details>
Example
<details style="background-color: #f5deb3">
<summary>This is a visible section: click to show other details</summary>
<p>This section only shows if the user wants to see it. </p>
</details>
HTML <summary>
HTML <summary> element is used with the <details> element in a web page. It is used as summary, captions about the content of <details> element.
Syntax:
<details>
<summary>Click for more information</summary>
<p>Hidden details about the topic.</p>
</details>
Example
<details>
<summary>What does HTML stand for?</summary>
<p>HTML stands for <strong> Hypertext Markup Language</strong>.</p>
</details>
Note: Use <details> and <details> for content that can be expanded or collapsed. They are natively interactive and accessible without JavaScript.
Responsive Design
Responsive design allows web layouts to adapt to different screen sizes, ensuring a seamless user experience across devices ranging from mobile phones to desktop computers. Developers commonly utilize fluid units, media queries, as well as modern frameworks like flexbox and grid to achieve this dynamic layout adjustment.
Example:
@media (min-width: 768px) {
.container { flex-direction: row; }
}
The layout changes according to the screen width to provide a responsive design that guarantees a uniform and easy-to-use experience on any device.
Conclusion
Web design heavily depends on layouts, whether it's a simple single-column structure or a complex grid system. The layout chosen significantly impacts the user's experience when browsing a website. Responsive design ensures layouts can adjust seamlessly to different devices, making them versatile for future technologies. By mastering different layout techniques, developers can create websites that are not only visually appealing but also functional, flexible, and user-friendly.