Home » Blog Posts » Basic HTML Tags and its functions

Basic HTML Tags and its functions

 Category:Web Design  
 By: usericon Nonny01  

fblog
 Posted: 9/28/2016 5:24:00 PM

Introduction

Learn the basic HTML Tags and its functions

This tutorial is an introduction to the basic HTML tags you will often use to create HTML Documents/Web pages. Even though there are over 90 tags in HTML, you usually get to use a handful 99% of the time.

Creating HTML Documents

All HTML documents must start with a type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

Example

<!DOCTYPE html>
<html>

<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>

</html>


HTML TAGS

The following are 10 HTML Tags you will use often. As you advance in HTML you will get to know more tags that are also useful.

1. HTML Headings

Description: Defines HTML headings

HTML headings are defined with the <h1> to <h6> tags:

Example

<h1>This is a h1 heading</h1>
<h2>This is a h2 heading</h2>
<h3>This is a h3 heading</h3>

2. HTML Paragraphs

Description: Defines a paragraph

HTML paragraphs are defined with the <p> tag:

Example
<p>This is the first paragraph.</p>
<p>This is another paragraph.</p>


3. HTML Links

Description: Defines a hyperlink

HTML links are defined with the <a> tag:

Example

<a href="https://www.classgist.com">classgist</a>

The link's destination is specified in the href attribute.

Attributes are used to provide additional information about HTML elements.


4. HTML Images

Description: Defines an image

HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), and size (width and height) are provided as attributes:

Example

<img src="logo.jpg" alt="sitelogo" width="100" height="100">

 

5. HTML Tables

Description: Defines a table

Tables are used to arrange data like text, images, links, other tables, etc. into rows and columns of cells

HTML tables are defined with the <table> tag:

Example

<table border="1" cellpadding="5" cellspacing="5">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
</table>

The border, cellpadding and cellspacing are attributes. Attributes are used to provide additional information about HTML elements.

 

6. HTML Divisions

Description: Defines a section in a document

Example

<div>This is a DIV container</div>

The Div tag is for creating structure in a web page. You can think of it like a container or a building block. You can put any type of content in a <div></div> tag even other HTML tags

 

7. HTML Lists

Description: Creates list of items

HTML lists are defined as folows:

<ul>  Defines an unordered list
<ol>  Defines an ordered list
<li>  Defines a list item  


Example  

Unordered list

<ul>
<li>Oranges</li>
<li>Bananas</li>
<li>Watermelons</li>
<li>Pineapples</li>
<li>Grapes</li>
</ul>


Ordered list

<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ol>


8. HTML Line breaks

Description: Inserts a single line break

HTML line breaks are defined with the <br> tag:

Example

This text contains a <br> line break
 

9. HTML Bold Text

Description: Defines bold text

HTML Bold Texts are defined with the <b> tag:

Example

<b>classgist</b>

Anything that appears within <b>...</b> element, is displayed in bold



10. HTML Italic Text

Description: Defines an italic text

HTML italic texts are defined with the <i> tag:

Example

<i> classgist</i>

Anything that appears within <i>...</i> element is displayed in italicized


Conclusion

These 10 HTML tags are what you will use often when creating web pages. Experiment with these tags in your web page – arrange and combine them in different ways. These tags will serve as building blocks for you as you go forward learning how to build web sites.

10  comments:


Anonymous Apr. 21, 2018

I love this. very informative. thanks

 

Reply  

 

Anonymous Jun. 5, 2018

Pretty useful

 

Reply  

 

Anonymous Aug. 13, 2018

Why don't the work with the headers?

 

Reply  

 

Anonymous Feb. 21, 2019

Very good. Thank you.<:)/>

 

Reply  

 

Anonymous May. 14, 2019

learned html with this! thanks

 

Reply  

 

Anonymous Jun. 18, 2019

Good and great, keep it up

 

Reply  

 

Anonymous Jun. 18, 2019

Good and great, keep it up

 

Reply  

 

Anonymous Sep. 8, 2019

Helpful

 

Reply  

 

Anonymous Jan. 16, 2021

Thank you. Are this the only times of html tags though? But this really helped me.

 

Reply  

 

Anonymous Nov. 3, 2022

Nice one, thanks

 

Reply  

 
Leave your comment/question
You can use some HTML tags, such as <b>, <i>, <a>