HTML Basics: Fundamental Tags and Elements
HTML Basics:
In this tutorial we are going to study about the fundamental tags and elements. These tags are the building blocks of any web page. To create and try your web pages you need the following two utilities or software:
- Text editor such as Notepad for Windows
- Web Browser such as Firefox or Internet Explorer
Your First HTML web page
Let’s start by creating a simple web page in HTML. Open the Notepad (or any text editor) and type the following code in it.
- <HTML>
- <BODY>
- <TITLE> First HTML web page </TITLE>
- <H1> HTML </H1>
- <P> This is an example of HTML </P>
- </BODY>
- </HTML>
Save the file as HTML file by using extension as .htm or .html. To test the created HTML web page open the .html file using a web browser. Following is the example of output using Firefox browser.
Here is the explanation of the above code. As we know each html page is composed of tags and elements. The fundamental tags are as follows:
Html and /Html
<Html> is one of the most important tags in HTML. It’s important because this is what makes a text file a web page. The starting tag is <html> and </html> is the corresponding closing tag. The entire code between these two tags is the contents of the web page. In other words anything between <html> and </html> is the part of the web page whereas the code that is not enclosed between these tags is associated with the browser, renderer or scripts.
Title and /Title
<title> and </title> tags are the starting and closing tag for the title element. They are used to provide a title to the web page. As you can see in the above image, the text written between these two tags becomes the title of the web page in the web browser. Unlike html element, the title element is not a mandatory requirement to create a web page. If no title is written, there will be no title for the HTML web page in the web browser.
Body and /Body
The body element is the visible part of a HTML web page. Anything that you want to display to the user of the web page must be enclosed within the body tags. The body tag is one of the several tags that have some kinds of attribute to be used to enhance the effectiveness. For example “bgcolor” is an attribute associated with the body tag which is used to provide a background colour to the web page. We will discuss more about the attributes in upcoming articles.
Headings: <Hi> and </Hi>
<Hi> and </Hi> tags are used to define headings in a web page. Here ‘i’ is used as a variable that can take values from 1 to 6. In other words, there are six types of headings that can be used in a HTML web page. The <H1> heading is the largest in size. The size of the heading decreases as we go from <H1> to <H6>. This will become clear with the help of following image:
Paragraph: <P> and </P>
The paragraph element, as name suggests, is used to write text as paragraph. Anything written between <P> and </P> appears as a different paragraph. The closing tag automatically ads a blank line after the paragraph’s end.
So, these were the most fundamental tags in HTML. In the coming tutorials we will describe more about the popular tags that will be used to enhance the functionality and appearance of our web pages.
