How to structure any UI(user interface) with HTML

Our goal is to learn to develop webpages with HTML and CSS together.

But first we need to learn to create the structure of webpages. Once we are good with that then we learn to apply css to get the desired look of webpage.
For that we will learn with an example.

Project 1
Look at this image which we are going to structure HTML. First we are going to divide it into sections and then structure each section: Project 1 image.
Now please observe the 3 sections separately as while designing we never develop the whole page in one go but always focus on one section at a time. So these sections are::



If you see the Project 1 image and then see all the sections then you will find that these sections are just part of the big image in Project 1.
Now please observe the section 3 image. Since this is a big seection so we have further divided into section 3.1 image and section 3.2 image.
Although section 3.2 image is also very big and we could further divide it into 3 small sections: left side section, middle section and right side section but i chose not to do it for this tutorial purpose.


Section 1 HTML : 

<header>
  <div class="left-side-nav">
      <img  src="/images/one"  alt="logo" />
      <p>Categories</p>
  </div>

  <nav>
      <ul>
          <li>Person Icon</li>
          <li>Message Icon</li>
          <li>Orders Icon</li>
          <li>Basket Icon</li>
          <li>Help</li>
          <li>English - USD</li>
          <li>Ship to</li>
          <li>More</li>
      </ul>
  </nav>
</header>


Possible HTML Structure : If you visually observe the section 1 image above, then you will observe that :
first it is a header section so i will use a semantic header tag.
Second, visually we can see that header section can be divided into 2 subsections : left subsection(where logo is there) and right subsection (where majority of navigation links are there).

Third, left section has 2 html items: logo image and Categories text.
Although Categories text has some icons also but we will consider only this as text element for this tutorial purpose.
We will use "img" tag for logo image and "p" tag for "Categories" text. We will wrap the image and text with a DIV tag that forms left subsection.

Fourth, right section has 4 icons and 4 texts. For simplicity purpose we consider 4 icons as 4 texts otherwise we need to define 4 icons by downloading it from somewhere which is out of scope of this tutorial
Since these are navigation links so we will use a "nav" tag to wrap all the childs inside it.
And the best way to define these 8 childs is using an "ul" and "li" tag.

Section 2 HTML : 

<div class="products">
  <div class='product-search'>
    <ul>
        <li>Products</li>
        <li>Manufacturers</li>
    </ul>

    <div class='search'>
        <input type="text" name="search" placeholder='queen size bed frame'>
        <button>Search</button>
    </div>

    <ul class='search-suggestions'>
        <li>glass can</li>
        <li>queen size bed frame</li>
        <li>men shorts set</li>
        <li>hoodie set</li>
        <li>yarn crochet</li>
        <li>pakistani salwar kameez</li>
        <li>plush toys</li>
    </ul>
  </div>
</div>


Possible HTML Structure : If you visually observe the section 2 image above, then you will observe that :
first it is a section of a webpage so i will use a semantic section tag.
Second, visually we can see that this section can be divided into 3 horizontal subsections : top subsection(where "Products" and "Manufacturers" text is there), middle subsection (where search box and button are there) and bottom subsection (where 7 search suggestion are mentioned).

Third, top subsection has only 2 texts : "Products" and "Manufacturers" and we can use "ul" and "li" tag wherever more than one elements are together and it is the case here, so we will use a "ul" tag here.

Fourth, middle subsection has a search box (defined by input tag) and a button tag together so we will wrap a "div" tag around input tag and button tag.

Fifth, bottom subsection has 7 texts and they are together so we will use an "ul" and "li" tag to define those texts.

Sixth, a "div" tag to wrap all those 3 subsections with a class name of "product-search" as these sections are horizontally and vertically centered with a background image on its container. This container will again define another "div" tag as the parent of everything with a class name of "products".

Section 3 HTML :
Since this section 3 has 2 subsections so we will use a "div" tag to wrap those 2 subsections as: 

<div class="main-content">
  // 2 subsections inside
</div>


Section 3.1 HTML :
Since this section 3.1 has 3 vertical subsections so we will use a "div" tag to wrap those 3 sub sections as: 

<div className='topbar'>
  <div>Request for quotation</div>
  <div>Ready to ship</div>
  <div>Logistics services</div>
</div>


Section 3.2 HTML :
Since this section 3.2 has 3 vertical subsections so we will use a "div" tag to wrap those 3 sub sections as: 

<div className='topbar'>
  <div>My markets</div>
  <img  src="/pic.jpg >
  <div>Buyers Club benefits</div>
</div>


Now in this section 3.2, we could make each "div" pretty big by adding other elements(as in image it is too much content) but for simplicity, we used a "div" tag for understanding purpose.
Hope you understood, how we write an html based on a design of webpage.

Prev