How To Make A Website Structure?

How To Make A Website Structure?


We use all kinds of documents every day of our lives. We read Newspapers, fill insurance forms, and shop catalogs… the list goes on. The several web pages act like electronic versions of these documents. For instance, newspapers show the same stories in print as they do on websites; we can apply for insurance over the web, and stores have online catalogs and e-commerce facilities. The structure is very important in helping readers to understand the messages we are trying to convey and to navigate around the document in all kinds of documents. So, it is very important to understand how to structure documents in order to learn how to write web pages.

How Pages Use Structure

Think about the stories we read in a newspaper: for each story, there will be a headline, some text, and possibly some images. There may be subheadings that split the story into separate sections or quotes from those involved if the article is a long piece. The structure always helps readers understand the stories in the newspaper.

When a news story is viewed online the structure is very similar. This is explained on the right with a copy of a newspaper alongside the corresponding article on its website.

Think about a very different type of document, for example, an insurance form. Often, the insurance forms have headings for different sections, and each section contains a list of questions with areas for us to fill in details or checkboxes to tick. Again, the structure is very similar online.

Structuring Word Documents

In any document, the use of headings and subheadings often reflects a hierarchy of information. For instance, a document might start with a large heading, followed by an introduction or the most important information.

This may be expanded upon under subheadings lower down on the page. We separate out the text to give it structure when using a word processor to create a document. Every topic may have a new paragraph, and each section can have a heading to describe what it covers.

We may see on the right a simple document in Microsoft Word. In the drop-down box, the different styles for the document for instance different levels of heading are shown. We might have also used the formatting toolbar or palette to do this if we regularly use Word.

HTML Describes the Structure of Pages

We may see a web page in the browser window that features exactly the same content as the Word document. We add code to the words we want to appear on the page to describe the structure of a web page. We can see the HTML code for this page below. Don’t worry about what the code means yet.

<h1>This is the Main Heading</h1>
<p>This text may be an introduction to the rest of the page. It may be split up into several sub-headings if the page is a long one.<p>
<h2>This is a Sub-Heading</h2>
<p>Many long articles have sub-headings so to help we follow the structure of what is being written. There may even be sub-sub-headings (or lower-level headings).</p>
<h2>Another Sub-Heading</h2>
<p>Here we can see another sub-heading.</p>


Each HTML element tells the browser something about the information that sits between its opening and closing tags.

The HTML Uses Elements to Describe the Structure of Pages

Let’s see closer at the above code. There are several different elements. Every element has an opening tag and a closing tag. Tags act like containers. They tell us something about the information that lies between their opening and closing tags.

Attributes Tell Us More About Elements

Additional information is being provided about the contents of an element. They are made up of two parts and appear on the opening tag of the element: a name and a value, separated by an equal sign. The attribute name indicates what kind of extra information we are supplying about the element’s content. It should be written in lowercase.

The value is the information/setting for the attribute. It should be placed in double-quotes. Different attributes can have different values. An attribute here called lang is used to indicate the language used in this element.

The HTML5 allows us to use uppercase attribute names and omit the quote marks, but this is not recommended. The majority of attributes may only be used on certain elements, although a few attributes can appear on any element.

Most attribute values follow a stipulated format or are pre-defined. As we introduce each new attribute we will look at the permitted values.

The value of the lang attribute is an abbreviated way for a specification which language is used inside the element that all browsers understand.

Body, Head & Title


We met the <body> element in the first example we created. Everything inside this element is shown inside the main browser window.
<title>This is the Title of the Page</title>
<h1>This is the Body of the Page</h1>
<p>Within the body of a web page is displayed anythin in the main browser window.</p>


Before the <body> element we will often see a <head> element. This contains information about the page. We will usually find a <title> element inside the <head> element.


The contents of the <title> element are either shown at the top of the browser, above where we usually type in the URL of the page we want to visit, or
on the tab for that page (if our browser uses tabs to allow us to view multiple pages at the same time).

Mansoor Ahmed is Chemical Engineer, web developer, a writer currently living in Pakistan. My interests range from technology to web development. I am also interested in programming, writing, and reading.
Posts created 422

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top