Popular HTML Tags and Elements [2020]

0
2287
HTML tags

HTML Tags

HTML tag determines the way, the browser would display the text. A tag an HTML command that controls the structure and appearance of the page document that is created. Every tag has attributes or special properties. The tags are always enclosed within a pair of angle brackets, i.e., <and > the text is written often the tags.

HTML tags are of two types.

  • Container tags or non-empty tags
  • Empty tags

Container tag

Container tags require an opening or ON tags and closing or OFF tags. ON tags are written within the angular brackets and OFF tags are also written within the angular brackets, but using a slash before the command. For example: <title> learning HTML </title>

Empty tag

Empty tags are those that do not require a closing tag. They just carry out their specific job.

For example: <HR>, <BR>

HTML Tag Structure

The structure of an HTML tag is being discussed in following lines:

  • Every HTML tag consists of a tag name, sometimes followed by an optional list of attributes, all placed between opening and closing angle brackets (< and >).
  • Tag attributes, if any, come after the tag name, each separated by one or more tab, space, or return characters. This order of appearance is not important.
  • A tag attribute’s value, if any, is given after the equal sign (=), in quotes generally after the attribute name. For examples: <font size-5, color-“red”> Alphabet </font>

Basic HTML Tags

There are three HTML elements that form the basic document structure of a Web page. These are:

  • HTML
  • HEAD
  • BODY

HTML Element

The <HTML> and </HTML> tags are used to mark the beginning and end of an HTML document. This tag does not have any effect on appearance of document, This tag is used to make browsers and other programs know that this is an HTML document. Inside the <HTML> and </HTML>, document’s <HEAD> and <BODY> tags lie.

HEAD Element

The title of any document tells you about the contents of the document. It is used between <HEAD>..</HEAD> tags. This tag contain a number of other tags. The <TITLE>…</TITLE> tag is placed within the <HEAD>..</HEAD> tags enables you to provide a title for an HTML page.

For example:

<HEAD>

<TITLE>MY HOME PAGE</TITLE>

</HEAD>

BODY Element

The BODY element contains all the contents of a document which contains information about the document. Various mark-up elements are allowed within the body to indicate headings, paragraphs, lists, hypertext links, images and so on.

Some of the common attributes of the body element are:

The BACKGROUIND attribute

This attribute is used to point to an image file that will be tiled across the browser  window, providing a background for the document. The format is:

<BODY BACKGROUND-“URL'” or “image file”>

Document text here

</BODY>

The BGCOLOR attribute

This attribute allows setting of the background colour for the document. The format is:

BODY BGCOLOR=color name or hexadecimal value>

Document text here

</BODY>

The TEXT attribute

This attribute is used to used to set the foreground, or text color of the page. The format is:

<BODY TEXT=color name or hexadecimal value>

Document text here

</BODY>

The LEFTMARGIN attribute

The LEFTMARGIN attribute allows the left-hand margin to be set.

<BODY LEFTMARGIN-“60”>

This text is indented 60 pixels from the left hand side of the page.

</BODY>

The TOPMARGIN attribute

The TOPMARGIN attribute allows the top margin of the document to be set

<BODY TOPMARGIN=”60″>

This document is indented 60 pixels from the top of the page.

</BODY>

THE HEADING ELEMENT

There are six levels of headings that correspond to different sections of the document. Heading level 1 is larger in size and bolder than the remaining five headings. It can be used to specify all the font changes, paragraph breaks before and after, and the white space necessary to show the heading. The heading range from <H1> to <H6>

Example

<HTML>

<BODY>

<HI>THIS IS HEADING 1</H1>

<H2>THIS IS HEADING 2</H2>

<H3>THIS IS HEADING 3</H3>

<H4>THIS IS HEADING 4</H4>

<H5>THIS IS HEADING 5</H5>

<H6>THIS IS HEADING 6</H6>

</BODY>

</HTML>

THE PARAGRAPH ELEMENT

This element uses <P>…</P> tags to indicate a paragraph. The text between <p>…</P> tags is surrounded by a vertical space of one line or half a line. The paragraph can be aligned left, right, or canter by using the ALIGN attribute.

Example

<HTML>

<BODY>

<p>THIS IS A PARAGRAPH.</P>

</BODY>

</HTML>

THE FONT ELEMENT

The FONT element is used for specifying various font styles. This element requires the following attributes:

The SIZE attribute

The SIZE attribute is represented as <FONT size-value>. The valid ranges from 1-7 and the default size is 3. For example:

<FONT SIZE=7>ALPHABET COMPUTER SCIENCE</FONT>

The COLOR attribute

The COLOR attribute changes the colour of the text that will appear on the screen. It can be set by giving the name of the colour supported by the browser.

For example:

<FONT COLOR=BLUE> ALPHABET COMPUTER SCIENCE</FONT>

The FACE attribute

The FACE attribute sets the typeface that will be used to display the text on the screen provided the typeface is already installed on the user’s machine. Substitute typefaces are specified in case the chosen typeface is not installed on the customer’s computer. If no match is found, the text is displayed in the default type according to the browser preference settings. For example:

<FONT FACE=”ARIAL”> LOKSEWA COMPUTER OPERATOR</FONT>

Solved Example

<HTML>

<HEAD>

TITLE>TESTING FONT ELEMENT</TITLE>

</HEAD>

<BODY>

<FONT SIZE=1 COLOR=”GREEN” FACE=”TIMES NEW ROMAN”>

Loksewa Computer Operator

<BR></FONT>

<FONT SIZE=2 COLOR=”RED” FACE=”COURIER”>

ALPHABET COMPUTER

<BR></FONT>

</BODY>

</HTML>

Pratice and learn in detail:HTML Programming

Learn more: webpage designing

LEAVE A REPLY

Please enter your comment!
Please enter your name here