Main Article
This is the main content area where articles or main content will go.
HTML layouts are crucial for structuring and organizing web pages in a clear and responsive manner. They allow you to arrange various elements on a page to create a well-organized and visually appealing design. Effective layout design ensures that your website looks professional and functions well across different devices and screen sizes. Using CSS and JavaScript frameworks can further enhance your ability to create responsive and dynamic web layouts.
| Element | Description |
|---|---|
| <header> | Defines a header for a document or a section. Typically contains introductory content or navigational links. |
| <nav> | Contains navigation links. Helps users navigate through different sections or pages of a website. |
| <section> | Represents a section in a document. Used to group related content together, usually with a heading. |
| <article> | Defines an independent, self-contained piece of content, such as a blog post or news article. |
| <aside> | Contains content that is tangentially related to the content around it, like a sidebar or a call-out box. |
| <footer> | Defines a footer for a document or a section. Often contains information like copyright notices, contact details, or related links. |
| <details> | Represents a disclosure widget from which the user can obtain additional information or controls. |
| <summary> | Defines a heading for the <details> element. Used to summarize the content that will be revealed when the <details> element is toggled. |
<!DOCTYPE html>
<html lang="en">
<head>
<title>Complete HTML Layout Example</title>
<style>
header, nav, section, article, aside, footer, details { padding: 1rem; }
header { background-color: #f4f4f4; text-align: center; }
nav { background-color: #333; color: white; }
nav ul { list-style: none; padding: 0; }
nav ul li { display: inline; margin-right: 10px; }
nav ul li a { color: white; text-decoration: none; }
section { display: flex; }
article { flex: 3; background-color: #f9f9f9; }
aside { flex: 1; background-color: #f4f4f4; }
footer { background-color: #333; color: white; text-align: center; }
details { background-color: #e0e0e0; border: 1px solid #ccc; }
</style>
</head>
<body>
<header>
<h3>Welcome to 'Way to code'</h3>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a
href="#contact">Contact</a></li>
</ul>
</nav>
<section>
<article>
<h2>Main Article</h2>
<p>This is the main content area where articles or main
content will go.</p>
</article>
<aside>
<h3>Sidebar</h3>
<p>This is a sidebar with additional information or
links.</p>
</aside>
</section>
<details>
<summary>More Information</summary>
<p>This section provides additional details that can be toggled open
or closed.</p>
</details>
<footer>
<p>© 2024 My Website. All rights reserved.</p>
</footer>
</body>
</html>
This is the main content area where articles or main content will go.
This section provides additional details that can be toggled open or closed.