Index Page Main Content

Main area structure

In the previous lesson we created the header section, including links between the index.html and the dashboard.html pages. Below this, there will be a search bar and a products section:

During this HTML section we will be adding the content. Later we will use CSS to create the styling and layout, and JavaScript to provide the product data and filter products using the search.

Extend the index.html page to include the main section, below the header:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width">
    <title>Online Store: Home</title>
  </head>
  <body>
    <header>
      <h1>Online Store- Home Page</h1>
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="dashboard.html">Dashboard</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <input type="text" placeholder="Search products..." />
      <h2>All products</h2>
      <div></div> <!-- products area -->
      <div>1</div> <!-- pagination -->
    </main>
  </body>
</html>

Breaking it down:

<main>: The main element is a semantic (descriptive) element used to represent a main content area of the document. Only one main element should be used on a page.
<input />: HTML input elements allow input from a user. Commonly used in a form such as a contact us section or a sign up area. This element only has one tag (ends with />), unlike many elements which have an opening and closing tag. This is because no content is required to go between the tags, such as the p element that requires text content inside.
<h2>: A level two heading about the products area. Remember, we should only use h1 once in a document, h2 will represent the next level of importance for our page content.
div: The div (division) element represents a generic container for content. This element adds no content to the page, but is often used to create sections, and can be styled using CSS.
: A HTML comment is used for notes to explain an area of code. Comment syntax can vary between languages. HTML comments begin with . Usually text content is placed inside, and this comment is ignored by the browser.

The input element comes in various types, using the type attribute. We are using the type of text (default) which is a single-line of text input. Other types include url, number, image, submit, color, and password.

<input type="text" placeholder="Search products..." />

The type can modify the input usage, and also provide input restrictions or validation.

For example:

The color type will open a color picker if supported in the browser.
A number type will restrict the user to entering only numbers.
The password type will hide the password the user enters.
radio inputs will display one or more clickable (usually circle) options. The user is restricted to only selecting one from a group.
The email type looks similar to text, but offers validation to check the input is formatted as an email.

The placeholder attribute is used to provide the initial text content, before the user enters a value. If supported by the input type, this text is used to provide a hint to the user as to the type of data to enter.

Creating products

Continuing with the main section, we have two div areas. One for the products, and one for pagination:

<main>
  <input type="text" placeholder="Search products..." />
  <h2>All products</h2>
  <div></div> <!-- products area -->
  <div>1</div> <!-- pagination -->
</main>

The pagination area will display a clickable page number, based on the number of pages of available products. Since this will later be generated using JavaScript, a simple placeholder of 1 will be used for now.

We will now update the products area <div></div> to display a product inside. Each product will be wrapped inside an article element:

<main>
  <input type="text" placeholder="Search products..." />
  <h2>All products</h2>
  <div>
    <article>
      <section></section> <!-- image section -->
      <section></section> <!-- wrapper for product details -->
    </article>
  </div>
  <div>1</div> <!-- pagination -->
</main>

This product is constructed using the article element as a container. The article element is intended to be used for standalone content, such as a product or news article. This contains two section elements inside for structure. The section element is generally used for grouping related content.

Although article and section elements are used in this example, other elements could also be used such as a div.

Add the product name, description, and price to the product details section:

<article>
  <section> <!-- image section --> </section>
  <section>
    <h3>Stylish long-sleeve t-shirt in blue / medium</h3>
    <p>A stylish long sleeve blue t-shirt, in size medium.</p>
    <p>$20.95</p>
  </section>
</article>

Images

The final part of the product is the image. The product data (including the image) will later be provided using the API. You can leave this section until later or, add a placeholder image.

For this, you will need an image to work with. If you don't have one, you can download one from free sites such as Pixabay.

Create an images folder inside your project folder, and place your image inside:

online-store/
├── index.html
├── dashboard.html
├── images/
    ├── t-shirt-blue.png

The HTML <img> element is used to embed images into your web document:

<article>
  <section>
    <img src="images/t-shirt-blue.png" alt="blue t-shirt with short sleeves" />
  </section>
  <section>
    <h3>Stylish long-sleeve t-shirt in blue / medium</h3>
    <p>A stylish long sleeve blue t-shirt, in size medium.</p>
    <p>$20.95</p>
  </section>
</article>

<img>: As with the <input> element, this is another element without a closing tag.
src="": The src attribute is required, and contains a path to the image to use. This can be an internal image, as used in our project, or, a link to an image hosted externally (e.g. https://you-image-location.com).
alt="": The alt attribute is used to describe the image in text format. Used for screen readers to read out the image description, and also displayed in place of the image if unable to load.

You should now see the additional content by refreshinig the browser. Things may not look as expected, but we will later style this using CSS.

Basic Project Structure And Header Dashboard Page Table And Modal

Index Page Main Content

Main area structure

Input types in more detail

Creating products

Images

Table of contents