Some common tags | HTML | Beginner lesson | 2021

 

Hey all, Welcome to Geeksforjobs

Heading helps to emphasize important topics. In HTML there are 6 type of heading format available.

  • H1 – H1 is the largest heading
  • H2 – H2 is comparatively smaller than H1 tag
  • H3 – H3 is comparatively smaller than H2 tag
  • H4 – H4 is comparatively smaller than H3 tag
  • H5 – H5 is comparatively greater than H6 tag
  • H6 – H6 is the smallest heading

Example :

<html>

<head>

<title> Heading example </title>

<body>

<h1> Heading 1 </h1>

<h2> Heading 2 </h2>

<h3> Heading 3 </h3>

<h4> Heading 4 </h4>

<h5> Heading 5 </h5>

<h6> Heading 6 </h6>

</body>

</html>

html headings

Header attributes

  • Align : <h2 align =”center / left /right”> Example of aligning header </h2>
  • Style : <h2 style =”write css properties “> Example of style attribute </h2>

The <p> tag marks a block of text as paragraph. <p> marks the beginning of the paragraph and </p> marks the end of the paragraph. Only single spaces are considered between any two words.

Body tag

The body tag consist of all the content that is going to be displayed on the web browser screen. The body tag consists of various attributes.

  • Bgcolor : It is used to change the background color of the complete html document body.
  • Link : Link basically specifies the color of unvisited link
  • Alink : Alink specifies the color of active link
  • Vlink : Vlink specifies the color of visited link
  • Text : Text specifies the color of html document font.

Images can be embedded into the web page. To add images as a background for the whole html document the following syntax is used:

<body background =”nature.jpg”>

  • Both gif and jpeg file can be used as HTML backgrounds.
  • If image is smaller in size compare to the html document then it will repeat itself in the web page.

Images can be embedded between the blogs using <img> tag.

The <img> tag has following attributes :

  • src: hypertext reference contains the url of the image / the name of the image along with the image format.
  • height : The height of image.
  • width : The width of image.
  • alt : Alternative text is for blind people.It is an important aspect for increasing the accessibility of an html document.

Hyperlink

A hyperlink is a link between web pages. As soon as you click on a hyperlink it will redirect you to another web page or some section of the same page.

Anchor tag

Anchor tag <a> is used to create hyperlinks in a html document. Inside the <a> tag you give the reference to another web page.

Attributes of <a> tag

  • href : hypertext reference or href attribute consist of the url to which you want to redirect your web page.
  • title : It is like tooltip of your hyperlink
  • download :Directs the browser to download the linked resource rather than opening it.
  • target : It is the way in which you want the hyperlink to open –
  • hreflang : Specifies the language of the linked web page.
  • name : names the anchor so that it may be a target of another anchor
  • rel : defines the relationship of the object being linked to.
  • rev : defines the relationship of the current object to the object being linked to.

To make a clickable image link. First create an anchor tag <a> and give the reference link in href attribute. And inside the <a> tag create a <img > tag and give the image reference in the src attribute of <img> tag. When you click on the image the link which was mentioned in the <a> tag will be opened.

Example :

<a href=”https://geeksforjobs.com/hypertext-markup-language-html-web-development/” >

<img src=”geeksforjobs.jpd” alt=”Web engineering lecture 1″>

</a>

<table> tag

The HTML table allows you to arrange data in rows and columns. It consist of various attributes.

Example

<table>

<tr>

<td> NAME </td>

<td> AGE </td>

<td>CITY </td>

</tr>

<tr>

<td> Era</td>

<td> 20</td>

<td> Chandigarh</td>

</tr>

<tr>

<td> Tina</td>

<td> 40</td>

<td> Gwalior</td>

</tr>

<tr>

<td>Jay</td>

<td> 27</td>

<td> Kolkata</td>

</tr>

<tr>

<td>Tanish</td>

<td> 23</td>

<td> Bhopal</td>

</tr>

table
Output

Attributes of table tag

  • Cell Spacing
  • cell padding
  • align
  • border
  • colspan
  • rowspan

Cell spacing and cell padding

These are the attributes of <table> tag used for the enhancement of table. For the below table let’s understand cell spacing and cell padding.

table tag
  • Space between two cells is called as cell spacing.
  • Space between cells wall and content is called cell padding.

For scrolling of the text around the screen <marquee> tag is used. The text included between the tags is transformed into a scrolling text.

Example:

<marquee> geeksforjobs is the best website </marquee>

Attributes of marquee tag

  • height : Defines the height of marquee.
  • direction : up /down /left /right
  • loop : Specifies how many times to loop.

There are two types of list in HTML , ordered list and unordered list.

Ordered list

An ordered list starts with <ol> tag. Inside this <ol> tag each item starts with a <li> tag.

Example

<ol>

<li> mango </li>

<li> grapes </li>

<li> apple </li>

<li> banana </li>

</ol>

ordered list
Output : Ordered list

Attributes

  • reversed : Specifies that the list order should be in decreasing order
  • start : Specifies the starting value of the list ( eg : start =101)

Unordered list

An unordered list is a list marked with bullets. It starts with <ul> tag.

Example :

<ul>

<li> mango </li>

<li> grapes</li>

<li> apple </li>

<li> banana </li>

</ul>

unorderd list
output : unordered list

Attributes of unordered list

  • type : Specifies the kind of marker to use in the list. Value of type can be

Leave a Comment

Your email address will not be published. Required fields are marked *