HTML
HTML

HTML Basic Tags (Heading , Paragraph and Image)


Welcome to our second session on HTML learning. In last post (Learn Web Designing From Beginning) we described basic structure of a HTML page. Today we will explain some basic html tags which are used to create a structure or layout of a page.

We will discuss about some basic tags in this post and then we will move on step by step. The main content part of a webpage is its text part which provides the main information about a website or the message that we want to convey through our page. So we start from basic tags which are used for formatting text.

Heading Tags

On a web page what part firstly take your attention ?? That is Heading. What we are talking or reading about, is described in few words and that is the heading. So we start from heading.

How to create a heading or sub-heading in a webpage ?

HTML has six tags for headings and these tags are:

  • <h1></h1>
  • <h2></h2>
  • <h3></h3>
  • <h4></h4>
  • <h5></h5>
  • <h6></h6>

<h1> the biggest, defines the most important heading and <h6> the smallest, defines the least important heading. We create a new HTML document and apply these tags to show their effect on text. And here is the code:

<!doctype html>
<html>
<head>
<title>Heading Tags</title>
</head>
<body>
<h1>Heading One</h1>
<h2>Heading Two</h2>
<h3>Heading Three</h3>
<h4>Heading Four</h4>
<h5>Heading Five</h5>
<h6>Heading Six</h6>
</body>
</html>

And when we open this HTML file in any browser we get its output as:

HTML heading tags -Codelover

Search engines use the headings to index the structure and content of web page. So headings are very usefull for webpage SEO.

Paragraph Tag

Heading is ready for the essay but story is still pending. Now you must be thinking of writing a paragraph. Yes paragraph, the next HTML Tag, Paragraph tag is started as <p> and its closing tag is </p>.So lets create first paragraph with heading. Change the body part of HTML file we just created and type your first paragraph.

<!doctype html>
<html>
<head>
<title>Paragraph Tags</title>
</head>
<body>
<h1>What is Web Design?</h1>
<p>Design is the process of collecting ideas, and aesthetically arranging and implementing 
them, guided by certain principles for a specific purpose. Web design is a similar 
process of creation, with the intention of presenting the content on electronic 
web pages, which the end-users can access through the internet with the help of 
a web browser.</p>
</body>
</html>

Now we save the page and open it in browser. And here is, how our first essay look like.

HTML Paragraph Tag -Codelover

 

Now we have some formatting elements which are used to give special effects to text like bold, italic, underline etc. These formatting elements are :

HTML <b> and <strong> Element

To make a text bold we use <b>  or <strong> tag. There is only one difference that <strong> element add semantic strong importance. Example :

<!doctype html>
<html>
<head>
	<title>Formatting Elements - Bold</title>
</head>
	<body>
		<h1>What is Web Design?</h1>
		<p><b>Design</b> is the process of collecting ideas, and aesthetically arranging 
		and implementing them, guided by certain principles for a specific purpose. 
		<strong>Web design</strong> is a similar process of creation, with the intention of
		presenting the content on electronic web pages, which the end-users can access 
		through the internet with the help of a web browser.</p>
	</body>
</html>

Browser output of code :

HTML text formating Bold -Codelover

 

HTML <i> and <em> Element

To make a text italic we use <i>  or <em> tag. Same as <strong> element, <em> add semantic importance to text.Example :

<!doctype html>
<html>
<head>
	<title>Formatting Elements - Bold</title>
</head>
	<body>
		<h1>What is Web Design?</h1>
		<p><i>Design</i> is the process of collecting ideas, and aesthetically arranging 
		and implementing them, guided by certain principles for a specific purpose. 
		<em>Web design</em> is a similar process of creation, with the intention of
		presenting the content on electronic web pages, which the end-users can access 
		through the internet with the help of a web browser.</p>
	</body>
</html>

Browser Output :

HTML Text Formating Italic -Codelover

 

HTML <small> Element

The HTML <small> element defines smaller text. Example:

<!doctype html>
<html>
<head>
	<title>Formatting Elements - Small</title>
</head>
	<body>
		<h1>Small Tag Example</h1>
		<p>Codelover.in - Learn Web Development From Beginning.</p>
		<p><small>Copyright 2017 by Munish Chechi</small></p>
	</body>
</html>

Browser Output :

HTML Small Tag Codelover

 

HTML <mark> Element

To highlight a word or part of sentence we use HTML <mark> element. It mark that part of text as highlighted. Example:

<!doctype html>
<html>
<head>
	<title>Formatting Elements - Mark</title>
</head>
	<body>
		<h1>Mark Tag Example</h1>
		<p>Every web page is made up of a bunch of these <mark>HTML tags</mark> denoting 
		each type of content on the page.</p>
	</body>
</html>

Browser Output :

HTML Mark Tag -Codelover

 

HTML <del> Element

HTML <del> element display the text as deleted. Example :

<!doctype html>
<html>
<head>
	<title>Formatting Elements - Del</title>
</head>
	<body>
		<h1>HTML Del Tag Example</h1>
		<p>I can speak English, Hindi, Punjabi ,<del>Tamil</del>. </p>
	</body>
</html>

Browser Output :

HTML Del Tag - Codelover

 

HTML <ins> Element

HTML <ins> element defines inserted text. Example :

<!doctype html>
<html>
<head>
	<title>Formatting Elements - Ins</title>
</head>
	<body>
		<h1>HTML Ins Tag Example</h1>
		<p>I love <ins>coding</ins>.</p>
	</body>
</html>

Browser Output :

HTML insert<ins> tag - Codelover

 

HTML <sub> Element

HTML <sub> Element is used to show subscripted text. Example :

<!doctype html>
<html>
<head>
	<title>Subscript Text</title>
</head>
	<body>
		<h3>Subscripted Text</h3>
		<p>Chemical name of water is H<sub>2</sub>O. </p>
	</body>
</html>

Browser Output :

HTML <sub> Tag - Codelover

 

HTML <sup> Element

HTML <sup> Element is used to define superscripted text. Example :

<!doctype html>
<html>
<head>
	<title>Superscript Text</title>
</head>
	<body>
		<h3>Math Formula</h3>
		<p>(a+b)<sup>2</sup> = a<sup>2</sup>+b<sup>2</sup>+2ab. </p>
	</body>
</html>

Browser Output :

HTML <sup> tag - Codelover

 

These all elements are used to define special types of texts. This is all about text on HTML page.

Image Tag

Now the second most important content of a webpage is its images. Images make a website more attractive and create visual representation of content. Images are added to a webpage with “img” tag called as image tag. Image tag is a self-closing tag. Means we don’t need to write opening and closing tag both. It is defined as <img />. It has its main attribute “src” which means source. The “src” attribute is used to define source of image. Lets show you an example:

Search for an image in google. I search for “HTML 5”. In search results click one image and then  click view image and then copy the image address from browser address bar. My browsed image address is “https://www.w3.org/html/logo/downloads/HTML5_sticker.png”.Now write img tag in our HTML file as follow:

<!doctype html>
<html>
<head>
	<title>HTML IMG TAG</title>
</head>
	<body>
		<h3>Image Tag</h3>
		<img src='https://www.w3.org/html/logo/downloads/HTML5_sticker.png' />
	</body>
</html>

Now save the file and open in browser. Your browser will show that image as :

HTML Img tag - Codelover

Image may not fit in browser becouse of its large size. Image will be displayed in its actual size as we did not defined size for image. We will that in next step.

So you get some idea about image (<img>) tag. We just used a url as a source of image. But we don’t need every image to be used from web. We can also use our local image file in HTML page . Here is another example of image tag using a local image source.

Add local image to html page as described below:

1.Copy any image file from your system and paste it in the same location where your html file is. As I have my index.html file on my desktop, so I paste my copied image here on my desktop. My image file name is codelover.jpg.

2.Replace the “src” value of img tag from HTML code with the name of file as :

<img src=”codelover.jpg” />

3.Now save the fiel and  open it in browser. And here is the output:

HTML-img-tag-codelover

We have two more attributes for HTML <img> tag which define its dimensions to make it fit in your design .

  1. Width – can be defined in “px” or “%” or just the digits.
  2. Height – can be defined in “px” or “%” or just the digits.

Note: When we use just digits for attribute value then browser take it default as “px”.

Now we  add these two attributes to the image tag and see the changes. I have defined the width as 500px and height as 180px.

<!doctype html>
<html>
<head>
	<title>HTML IMG TAG</title>
</head>
	<body>
		<h1>Image Tag</h1>
		<img src='codelover.jpg' width='500px' height='180px' />
	</body>
</html>

Now open it in browser:

HTML-img-tag-codelover-1

If we just define the width or height of image then browser set its second value automatically according to image’s aspect ratio. So it is the best practice to just define either its width or height , not both at the same time, otherwise your image may look distorted or we can also assign the second attribute as “auto”. Try different sizes and check their effects in your browser.

If you have your images saved in a folder but in the same location then you can define its source path as “foldername/filename”. Lets take an example of it:

  1. I create a new folder on my desktop and name it as “images”.
  2. Now I move my image file from desktop to images folder.
  3. Now I change the “src” attribute of img tag as “images/img.jpg”.
  4. Now save the file and open in browser.
  5. Result will be same as before.

 

This was all about the image tag. If you have any doubt or question about any of Heading, Paragraph and Image tags then you can comment below. Keep coding keep loving .


Subscribe To Our Newsletter


Facebook By Weblizar Powered By Weblizar
View Comments
There are currently no comments.

three × five =