Basic HTML Tags

In this chapter, we will learn some basic and essential HTML tags that are important and widely used in creating an HTML document. To understand them efficiently, let's take the example of an HTML document with basic tags.

Don't be afraid if you come across unfamiliar tags. We will explain them in detail in the coming chapters.

Example of a Basic HTML Document
<!DOCTYPE html>
<html>
<body>

<h1>Basic HTML Tags - This is a heading</h1>
<p>I can write a paragraph here. This is a paragrah.</p>

</body>
</html>

Have a habit of clicking the 'Try on Editor' button to see the result of the code. It will build a better understanding.

HTML Document

Some basic rules for an HTML document:

1. The first line of all HTML documents is a document-type declaration. <!DOCTYPE html> tells the browser that the document is an HTML 5 document.

It is mandatory to include a doctype declaration in your HTML document. So don't forget to add <!DOCTYPE>.

2. HTML document begins with the start of <HTML> tag and ends with </html> tag. We have discussed the same in the previous chapter of Basic HTML Page.

3. All tags whose contents are visible on the screen are placed between the <body> and </body> tags.

Now let's discuss some important tags mentioned in this example in more detail.

<!DOCTYPE> Declaration

The <!DOCTYPE> declaration always appears on top of the HTML document. It is always written at the start of the HTML code at line first. It can't be written anywhere else in the document. It is the first tag in an HTML document.

It is a document-type declaration. It helps browsers in understanding the tags and codes properly. For better rendering and displaying, you must include <!DOCTYPE> declaration in your HTML code.

The document type declaration for HTML5 is:

<!DOCTYPE html>

Though HTML is not a case-sensitive language, it is always a good practice to declare <!DOCTYPE> as shown above. i.e. The keyword DOCTYPE in uppercase letters and its type html in the lowercase letter.

Heading Tags

<h1> to <h6> are HTML heading tags. These tags define the headings in an HTML page.

The most important heading of the page is defined with <h1> tag and the least important heading of the page is defined with <h6> tag.

Browsers display the contents of headings in different sizes. See the example below:

<h1> to <h6> Tags Example
<!DOCTYPE html>
<html>
<body>

<h1>Result University</h1>
<h2>Result University</h2>
<h3>Result University</h3>
<h4>Result University</h4>
<h5>Result University</h5>
<h6>Result University</h6>

</body>
</html>

Click 'Try on Editor' to view the result of the above code.

Paragraph Tag

<p> tag defines the paragraph of an HTML page. A paragraph starts with an opening <p> tag and ends with a closing </p> tag.

An HTML document can have multiple paragraphs and, hence multiple <p> tags. See the example below for a better understanding.

<p> Tag Example
<!DOCTYPE html>
<html>
<body>

<p>First paragraph starts here.</p>
<p>Second paragraph starts here.</p>
<p>Third paragraph starts here.</p>
<p>Fourth paragraph starts here.</p>

</body>
</html>

Let's discuss some more basic HTML tags.

HTML Comment Tag

To add a comment in HTML codes, we use the HTML comment tag <!– comment –>. After <!- we write a comment and end it with ->.

Comments are kept hidden from the browser's visible screen and they are not displayed.

Comment Tag Example
<!DOCTYPE html>
<html>
<body>

<!-This is an HTML Comment ->
<p>First paragraph starts here.</p>
<p>Second paragraph starts here.</p>
<!- This is an another HTML Comment ->

</body>
</html>

Image Tag

An image is included in the document with HTML <img> tag. The <img> tag has different sets of attributes to be defined.

For example: src (The source file), alt (alternative text), width and height.

<img> Tag Example
<!DOCTYPE html>
<html>
<body>

<p>In this example we have an image with width 200px and height 200px.</p>
<img src="chromelogo.png" alt="Chrome Logo" width="200" height="200">

</body>
</html>

Link Tag

An HTML Link is defined with <a> tag. The <a> tag has an attribute 'href' where the destination is specified. Don't worry about these attributes. You will learn them in detail in upcoming chapters.

<a> Tag Example
<!DOCTYPE html>
<html>
<body>

<p>This is an example of an html link.</p>
<a href="https://resultuniversity.com">Link to Result University Website</a>

</body>
</html>

In the next chapters, you will study other HTML tags in detail.


  • Disclaimer: ResultUniversity.com is an independent private website and it is in no way affiliated to any Indian Government official website. The sole purpose of this website is to provide notifications regarding the latest results published. Though utmost care is being taken, we can not guarantee 100% correctness of information. Using this website confirms that you agree to all the terms and conditions.