Structuring Web Pages Using HTML

In our lives, we come across countless documents every day. We study them, retain information from them, we process the information and then use It for our own benefit. Like for instance many of us read Newspapers, Books, Catalogues, Magazines, Technical booklets etc. All of these documents comprise of words, what makes them distinctive from one another is the way they are organised. Headings, Sub headings, Fonts, Writing style and other important characteristics. Just like that a website is distinctive and different from every literary document.

Like every other document, a webpage has its own structure. It contains various headings, line and page breaks, notations, tags etc. All of this, structuring a website, creating its literary content is done in HTML.

HTML stands for Hyper Text Markup Language. HTML is the standard markup language that is most widely used to create and structure webpages and web based applications. Now as you have read above that HTML is a markup language (A markup language is a system for annotating a document in a way that is syntactically distinguishable from the text) It has a specific and unique syntax, that tells the computer what to do. Just like programming languages, in order to successfully use HTML to structure websites you need to know the syntax in which this language is used. You cannot create a web page if you don’t know the proper instructions.

So, let’s take a look at an example of simple HTML Code:





<h1>This is the Main Heading</h1>

<p>Paragraph explaining the heading <p>

<h2>This is a sub-Heading</h2>

<p>Paragraph explaining the sub-heading</p>

<h2>Another Sub-Heading</h2>

<p>Here you can see another sub-heading</p>




The HTML Code is in blue color, the rest is your context. These words in blue are called HTML elements or tags. There is a total of 89 tags used in HTML. You saw these elements/tags in “<”, “>” brackets in the above example. Each HTML element tells the browser something about the information it contains. An HTML element usually consists of 2 tags. An Opening tag and a Closing tag. These tags act like capsules or containers that contain the information that is provided to them. They keep the information intact and distinctive from everything else.
For example,

<h1> Main Heading </h1>


In the above example “<h1>” is an opening tag in which the “h” is an assigned key word for the main heading, “1” means that this is the first main heading in the web page. As you may see that in the closing tag there is a forward slash, this slash differentiates between both of the tags. “/” is a designated instruction that must always be used in the closing tag.


<html> (opening tag) and </html> (closing tag) indicates that everything in between them is HTML code.

<Head> and </Head> tag contains information about the web page. Which you rather wouldn’t see in the webpage like font size color and text style.

<body> and </body> tags contain the context for the main body of the web page.


So, this is the simplest way of creating your own webpages. Once you grasp the instructions regarding different types of tags used in html you will be able to create more complex types of web pages in a freelance web designer singapore.