Components

HeaderHero AreaContent AreaFooterLayout

Header

The header is a top part of a website contains links of other webpages of your website and a company’s or brand’s logo. A website have many webpages for different different reasons like when you go to e-commerce website for online shopping and you see there is a header with the links – Cart, My Account i.e..
And these all are clickable and let you reach different different webpages via a click.


When visitors reach to a website they see the header first. Basically, It’s the part that never changes on any page of your website means it always shows with the navigation links and the logo.

The logo is a image under the anchor tag and the links are the text under the anchor tags.

Header UI For Small Device

When you see a website on your mobiles and tables, the header links converts into a menu icon and a dropdown list as in the below screenshot.

It’s a basic UI for mobiles but depends on you, you can develop it as a sidebar or else.

Basic Header

There are many variants of header, you would get basic header of them here.

Header With Mobile Support

HTML Structure

<header class="header">
  <div class="logo">
    <a title="Home" href="#">
      <img src="ADD LOGO IMAGE PATH HERE" alt="Logo">
    </a>
  </div>
  <div class="wrapper">
    <button class="navigation-button">☰</button>
    <nav class="nav">
      <a href="#">About Us</a>
      <a href="#">Products</a>
      <a href="#">Services</a>
      <a href="#">Reach Us</a>
    </nav>
  </div>
</header>

CSS: For header section UI

.header {
  background-color: #000;
    padding: 0 30px;
    align-items: center;
    display: flex;
    height: 90px;
    justify-content: space-between;
}
    .nav.active{
   background-color: #000;
    right: 0;
    left: 0;
    top: 90px;
    display: inline-block;
    position: absolute;
      z-index: 999;
}
   .nav a {
    border-bottom: 1px solid #fff;
    color: #fff;
    display: none;
    font-size: 16px;
    padding: 0 20px 0 0;
    width: auto;
   padding-bottom: 10px;
}
  .nav a:last-child {
    border-bottom: 0;
  }
   .nav.active a{
  display: block;
    margin: 10px 25px;
  color: #fff;
  }
    .navigation-button{
    display: inline-block;
      background-color: transparent;
    border: 0;
    color: #fff;
    font-size: 20px;
  }
  @media (min-width: 768px){
  .navigation-button{
  display: none;
  }
 .nav a {
    display: inline-block;
   border-bottom: 0;
   padding-bottom: 0;
}
}

Javascript Code: Function of mobile menu icon

  function headerNav(){
  var navButton = document.querySelector('.navigation-button');
  var navList = document.querySelector('.nav');

  navButton.onclick = function() {
  navList.classList.toggle('active');
  }
 }
headernav();

Hero Area

Hero area is a large banner area just after the header. Hero area describes your product or highlights your main content of your website. Hero area has a big image, small description text for your product, a button (depends on requirement). Hero area not always static, you can set it as a slider using slider plugins or custom code, include animation into it also height is not always same of the hero area, you can set the height as per your requirement.

Basically hero area shows on all pages but on e-commerce websites, the hero area shows only on homepage.

Each website’s UI is different from each other so depends on you, how you want the hero area.

Hero area screenshot

HTML Structure

<section class="hero-area">
  <div class="inner-wrapper">
    <h1>About My Product</h1>
    <p>Lorem ipsum is simple dummy text of the of the printing and typesetting in industry</p>
  </div>
</section>

CSS: For hero section UI

   

.hero-area{

    background-image: url(banner.jpg);
    background-position: center;
    background-size: cover;
    height: 300px;
    padding: 0 20px;
    text-align: center;
    width: 100%;
}

.inner-wrapper{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    max-width: 610px;
    margin: 0 auto;
}

.hero-area h1{
  font-size:45px;
}


.hero-area p{
font-size:20px
}



Content Area

Content area is like body for your content i.e. heading for your products, text about your products, anchor links as a button if you add in the content area, sidebar with the clickable links if you need to show some extra links for the extra links for another webpages, images of your products, etc..

Content area contains different types of tags to each other to create a clean structure of HTML.

Here I’ll let you show website content area with some tags. You can see a sidebar on the left side and the heading with the text & button on right side, called content area.

HTML Structure

 <main>

<aside class="article-sidebar">    
   <div class="collapsible-sidebar">
     <ul>
<li>
    <a href=#" class="side-bar-item">Sidebar link</a>
</li>
 <li>
   <a href=#" class="side-bar-item">Sidebar link</a>
 </li>
 <li>
<a href=#" class="side-bar-item">Sidebar link</a>
 </li>
 <li>
<a href=#" class="side-bar-item">Sidebar link</a>
   </li>
<li>
<a href=#" class="side-bar-item">Sidebar link</a>
   </li>
<li>
<a href=#" class="side-bar-item">Sidebar link</a>
   </li>
  </ul>
 </aside>
<article>

     <section>
        <h1>Heading</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
</section>


<section>
<h3>Sub Heading</h3>
<p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
<section>


<section>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.
 <a>Click Link</a>

    </section>
  </article>
</main>

CSS: For content section UI

.container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 5%;
}

.content-container{
    display: flex;
    flex-direction: column;
}

@media (min-width:1024px){
.content-container{
    flex-direction: row;
 }
}


aside {
  flex: 1 0 25%;
  min-width: 25%;
}

article{
    flex: 1 0 70%;
    min-width: 70%;
}

.sidebar ul{
border: 1px solid #ddd;
    padding: 10px;
    margin-right: 30px;
    margin-top: 15px;
}



.sidebar ul li{
padding:5px 0;
}



.sidebar ul li a{
color:#000;
}

article button{

background-color: #000;
color: #fff;
    border: 1px solid #000;
    padding: 5px 20px;
    margin-top: 10px;
    font-size: 13px;
    border-radius: 4px;
    cursor: pointer;
}

Footer

Footer area is a bottom area or can say you can see the footer section at the end on webpage. It contains copyright text, privacy & policy links, terms and use link, a logo, contact links like email, contact number, address, meet time etc., social media icons like linked in, facebook, twitter, instagram, Google+, etc.

You can create a very basic footer area using the given code

HTML

<footer>
  <section class="container">
  <div class="footer-wrapper">
    <p> Copyright@ 2000. All rights reserved. Contact us by <a href="mailto:example@example.com">example@example.com</a></p>
   
  </div>
     </section>
</footer>

CSS: For footer section UI

footer {
padding:20px 0;
background-color: #000;
color: #fff;
margin-top:40px;
}

footer p{
text-align: center;
}

footer a{
color:#fff;
}

  • <header> – Defines a header for a document or a section
  • <nav> – Defines a set of navigation links
  • <section> – Defines a section in a document
  • <article> – Defines an independent, self-contained content
  • <aside> – Defines content aside from the content (like a sidebar)
  • <footer> – Defines a footer for a document or a section
  • <details> – Defines additional details that the user can open and close on demand
  • <summary> – Defines a heading for the <details> element
  • Header: The part of a front end which is used at the top of the page. <header> tag is used to add header section in web pages.
  • Navigation bar: The navigation bar is same as menu list. It is used to display the content information using hyperlink.
  • Index / Sidebar: It holds additional information or advertisements and is not always necessary to be added into the page.
  • Content Section: The content section is the main part where content is displayed.
  • Footer: The footer section contains the contact information and other query related to web pages. The footer section always put on the bottom of the web pages. The <footer> tag is used to set the footer in web pages.

https://www.digiworks.co.za/13-parts-of-a-website-you-should-know-about/