Back ArrowExplore all kits

HTML Structure for Company Website with Header, Navigation, Article, and Footer

share link

by vigneshchennai74 dot icon Updated: Mar 14, 2023

technology logo
technology logo

Guide Kit Guide Kit  

This HTML structure provides a basic layout for a company website that includes four essential components:

  • Header: Typically includes the website's logo, tagline, and main navigation menu.
  • Navigation: A section of the website that contains links to other pages within the website or external pages.
  • Article: The main content area of the website where information is presented to the user.
  • Footer: The bottom section of the website that often contains legal information, contact information, and links to social media accounts.


This structure helps create a consistent and organized layout for a company website, making it easier for users to navigate and find the information they are looking for. By separating different sections of the website into distinct HTML elements, it becomes easier to style and format each section of the website. It also makes it easier to update and maintain the website as changes can be made to individual sections without affecting the rest of the website.

Preview of the output that you will get on running this code from your IDE.

Code

HTML code we provided includes navigation links within a navigation menu, which is represented by the <nav> element.

Correcting HTML layout

HTMLdotLines of Code : 74dotLicense : Strong Copyleft (CC BY-SA 4.0)

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

* {
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

article {
  flex: 1;
}

header,
footer {
  padding: 1em;
  color: white;
  background-color: black;
  clear: left;
  text-align: center;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #111;
}

li {
  float: left;
  overflow: hidden;
}

li a {
  display: block;
  color: white;
  text-align: left;
  padding: 16px 16px;
  text-decoration: none;
}

/* Change the link color to #111 (black) on hover */

li a:hover {
  background-color: #333;
}
<div class="container">
  <header>
    <h1>Company Heading</h1>
  </header>
  <nav>
    <ul>
      <li><a href="#">Item1</a></li>
      <li><a href="#">Item2</a></li>
      <li><a href="#">Item3</a></li>
    </ul>
  </nav>
  <article id="main-content">
    <h3>Welcome to our collections</h3>
    <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
  </article>

  <footer>Copyright under process © CompanyName 2012-2020.</footer>
</div>

Instructions

  1. Download and install VS Code on your desktop.
  2. Open VS Code and create a new file in the editor.
  3. Copy the code snippet that you want to run, using the "Copy" button or by selecting the text and using the copy command (Ctrl+C on Windows/Linux or Cmd+C on Mac).
  4. Paste the code into your file in VS Code, and save the file with a meaningful name and the appropriate file extension (.html for HTML, .js for JavaScript, etc.).
  5. To run the code, open the file in VS Code and click the "Run" button in the top menu, or use the keyboard shortcut Ctrl+Alt+N (on Windows and Linux) or Cmd+Alt+N (on Mac). The output of your code will appear in the VS Code output console.


I hope you found this useful. I have added the version information in the following sections.


I found this code snippet by searching for "Correcting HTML layout "in kandi. You can try any such use case!

Enivronment Tested

I tested this solution in the following versions. Be mindful of changes when working with other versions.

  • Visual Studio Code Version 1.76.0


This HTML code provides a basic structure for a company website that includes a header, navigation menu, main content section, and footer. This process also facilities an easy to use, hassle free method to create a hands-on working version of code in Html.

Support

  1. For any support on kandi solution kits, please use the chat
  2. For further learning resources, visit the Open Weaver Community learning page


Open Weaver – Develop Applications Faster with Open Source

kandi

Community and Support

Company

Follow

  • © 2023 Open Weaver Inc.