HTML Tags & attributes18 min read

An HTML tag is usually composed of two tags, the opening tag, and the closing tag. An opening tag consists of the element’s name enclosed by the lesser than “<” and greater than “>” signs. One can also nest the tags. It can be defined as placing one element inside another. When two HTML tags are opened, they must be closed in reverse order. 

<U> <I> <B> Hiberstack is an open community for anyone that codes </B> </I></U>

Thus in the above example, reading from left to right the HTML tags that are opened are U, I, B. so when you need to close them in reverse order i.e. B, I, U.

Classification of HTML Tags that appear in Body Section of HTML

HTML Body tags can be classified as 

  1. Logical Tags 
  2. Layout Tags 
  3. Text/Character Formatting Tags 
  4. List Tags 
  5. Multimedia Tags 
  6. Miscellaneous Tags

1. Logical Tags (Comments)

  • Anything that is enclosed within a pair of <!– ….. –> is considered a comment and known as logical tags.
  • These comments are included for some documentation on explanation. This is greatly helpful to other users to understand the purpose of HTML programs or tags.
  • There is no restriction on the number of comments that can be included in the HTML file.
  • These comments are ignored by the browser on loading the HTML page i.e. it is not visible when a document is loaded by the web browser.

The comment tag is an empty tag.

Comment tag consists of:

  1. Opening angle bracket ( < ), followed by 
  2. The exclamation (!) symbol, followed by
  3. Double Dash (–) followed by
  4. Horizontal space, followed by
  5. Any comment in the form of text. This text may be of any length and in any case letter, followed by
  6. Horizontal space, followed by
  7. Double Dash (–) and finally
  8. Closing angle bracket (>)

Example:

<HTML>
  
  <HEAD>
    <TITLE> Comments </TITLE> 
  </HEAD>
  
 <BODY>
     <!-- Tag <P> is use to specify paragraph -->
   <P Align="Center"> This text is Visible </P>
 </BODY> 
  
</HTML>

2. Layout Tags

These tags add white spaces to web pages to display contents in a better look or design and it is equivalent to the <Enter> key in word processing documents. It supports the following features,

  1. Helps in displaying the contents of web pages in logical sections. 
  2. It affects the structure, spacing, and layout of a web page. 
  3. Layout tags consist of the following tags
    • a) Break Tag 
    • b) Paragraph Tag

a) Break Tag <BR> (Line Break)

It is a singular tag and does not require end tags. This tag inserts a line break. Any content that follows the <BR> tag will be displayed on the next line and justifying it to the left alignment. It tells the browser to wrap the text that follows onto a new line without inserting an extra space between the lines.

b) Paragraph Tag <P>

If the entire text is typed between the <BODY> and </BODY> tags, it will be considered by the web browser as a single paragraph. As in HTML, space and return (Enter) do not break the text into paragraphs when displayed on the screen. The paragraph <P> tag is used to mark the beginning of a new paragraph or block of text. The text immediately following the tag <P> is forced to the next line and left-justified. It automatically adds one blank line before and after the contents (line of text) containing the <P> tag.

Attributes of Paragraph Tag

  1. <P Align="Left"> text is aligned to left (Default) 
  2. <P Align="Right"> text is aligned to right.
  3. <P Align="Center"> text is aligned to the center.

When a paragraph has aligned other than the Left value then some browsers do not use default alignment i.e. left for the next paragraph implicitly.

3. Text/Character Formatting Tags

On a web page, the characters can be made bold, italic, underline, etc. by using some HTML tags. There are two methods of formatting characters. They are

  • Logical Styles
  • Physical Styles

a) Logical Styles Format

The logical styles inform the browser what kind of text to present. The browser takes care of how to present it. For eg, consider the <em> tag. This tag tells that emphasis must be given. The browser takes care of how to present it so that it gets the emphasis required. Lists of the logical style tags are given below,

Sr. No.Tag Description
1)Em>—-</Em> This emphasize tag is used to highlight text and it displays that text in italics.
2)<Strong>—-</Strong>This tag is to present characters in the bold Style
3)<Dfn>—-</Dfn>Definition tag is used to explain a definition. 
4)<Code>—-</Code>This tag is used to display code samples in Courier font.
5)<Samp>—-</Samp>Used for displaying computer output or status message
6)<Kbd>—-</Kbd>Display text to be typed by the user. 
7)<Var>—-</Var> This value is displayed as italic or underline and it indicates the name of the variable.
8)<Cite>—-</Cite>The citation tag is used to display a quote or citation in an HTML document.

Logical Format tag

<HTML> 

  <HEAD> <TITLE> Demo of Logical Format </TITLE> </HEAD> 
  
  <BODY>
    <EM> Education means knowing unknown from known </EM> <BR>
    <STRONG> Life is what you decide </STRONG> 
  </BODY> 
  
</HTML>

b) Physical Styles Format

The physical styles format tags implicitly inform the browser how the characters must be shown in bold, italic, etc. Physical style tags are given below with their meaning,

Sr. No.Tag Description
1)<B>—-</B> Bold Face
2)<I>—-</I>Italics 
3)<TT>—-</TT>Teletype
4)<U>—-</U>Underline
5)<STRIKE>—-</STRIKE>Strike through
6)<SUB>—-</SUB> Subscript 
7)<SUP>—-</SUP> Superscript
8)<BIG>—-</BIG>Large Font
9) <SMALL>—-</SMALL>Small Font

1) BOLDFACE

A Physical tag <B> i.e. Boldface is used to specify that the selected text, within a container tag, is to be displayed in boldface.

Example

<BODY> 
  Today there is an <B> Important Meeting</B> at 4.00 PM 
</BODY> 

2) ITALICS

A Physical tag <I> i.e. Italic tag is used to specify that the selected text, within a container tag, is to be displayed in italic.

Example

<BODY> 
  Venue of Meeting <I> Subhedar Hall </I> 
</BODY>

3) UNDERLINE

A Physical tag <U> i.e. Underline tag is used to specify that the selected text, within a container tag, is to be displayed with an underline.

Example

<BODY> 
  Bring <U> an Important Document US for Meeting </U>
</BODY>

4) STRIKEOUT

A Physical tag <STRIKE> ie a Strikeout tag is used to strike out the text or word within a container tag. 

Example

<BODY> 
  Circulate Meeting Agenda to Manager/ <STRIKE> Assistant Manager </STRIKE> /Clerk 
</BODY>

5) BIG

A physical container tag <BIG> tag is used to specify that the selected text be displayed in a bigger font size compared to the font for the rest of the text and it also displays, the text in bold.

Example

<BODY>
  <BIG> ICAT Computer </BIG> Institute 
</BODY>

6) SMALL

A physical container tag <SMALL> is used to specify that the selected text is displayed in smaller font size as compared to the font of the rest of the text.

Example

<BODY>
  <SMALL> 18, Opposite Mount Convent</SMALL> Chandrapur 
</BODY>

7) SUBSCRIPT

A physical container tag <SUB> is used to specify that the selected text is to be displayed as a subscript. It lowers the text below the baseline and changes it to a smaller font size.

Example

<BODY>
  H<SUB>2</SUB>SO<SUB>4</SUB> 
</BODY>

8) SUPERSCRIPT

A physical container tag SUP is used to specify that the selected text is to be displayed as a superscript. It raises the selected text above the baseline.

Example

<BODY>
  a <SUP> 2 </SUP> b 
</BODY>

9) TYPEWRITER

A physical container tag TT> is used to display text or words in mono-typewriter font style.

Example

<BODY>
  <TT> The text appears in small Typewriter Font</TT> 
</BODY>

Demonstration of Physical (Formatting) style tags

<HTML> 
  
  <HEAD> 
    <TITLE> Demo of Physical Style Tag </TITLE> 
  </HEAD>
  
  <BODY> 
    
    <B>     The text appear Bold                   </B>      <BR> 
    <I>     The text appear Italic                 </I>      <BR>
    <U>     The text appear Underlined             </U>      <BR>
    <TT>    The text appear Small Type writer font </TT>     <BR> 
    <SMALL> The text appear Small                  </SMALL>  <BR> 
    <STRIKE>The text appear Strike                 </STRIKE> <BR> 
    
    H<SUB> 2 </SUB> <BR>
    a<SUP> 2 </SUP>B <BR>
    
    <BIG> The text appear big </BIG> <BR>
    
  </BODY>
    
</HTML>

Block Alignment

The block alignment is used to define the elements in a certain block. For example, left, center, or right.

Demonstration of Block Alignment 

<HTML>
<HEAD> 
  
  <TITLE> DEMO OF BLOCK ALIGNMENT </TITLE> </HEAD> 
  
  <BODY>
    <H1>IT Contents</H1> 
    <DIV ALIGN="Center">
      <H3> Networking </H3>
    </DIV>
    <DIV ALIGN="Left">
      <H3> Internet </H3>
    </DIV>
    <DIV Align="Right">
      <H3> E-Commerce </H3> 
    </DIV>
  </BODY>
  
</HTML>

PRE-FORMAT Text Tag

You can make the text appear exactly as it appears in text editors by using the preformatted text tag. All the spaces and line breaks that are generally ignored by HTML will appear in the web browser as they appear in a text editor using this tag. The preformatted text tag <PRE> is a container tag.

Demonstration of Preformat tag

<HTML>
  <HEAD> 
    <TITLE> Preformatted Text </TITLE> 
  </HEAD> 
  
  <BODY> 
    <PRE>
      This is an example of preformatted text 
    </PRE> 
  </BODY>
<HTML>

ADDRESS Tag

The address element is used to display an address in HTML. In the address, you can specify different types of information such as the Signature of the developer or the name of the organization that created the web page within <ADDRESS> and <ADDRESS>. This tag automatically indents the text and formats it in italic.

Demonstration of ADDRESS tag

<HTML> 
  <BODY>
    <ADDRESS>
      R.T.M. Nagpur University, Nagpur <BR></BR> 
      Opposite Maharaj Bag <BR></BR>
      Sitabuldi, Nagpur - 442 401 (M.S)
    </ADDRESS>  
  </BODY>
</HTML>

FONT Tags

Using this tag you can control the font, font size, and color of the text using the attributes FACE, SIZES, and COLOR

A) FONT-FACE

This tag is used to change the whole face of the text. Using the <font face> tag you can specify the font name between quotation marks. When the browser encounters a page with <font face> it searches the system for the given font names and then displays the text in that font. You must also remember that fonts have different names on different systems. So if you are using this tag then it is safe to give two or three font names as in case the browser fails to find the first one, it will display the text in another font.

Syntax:

<FONT FACE="VALUE1", ["VALUE2",] [ "VALUE3") ......> <FONT FACE="Arial", "Times New Roman", "Helvetica", "Comic sans ms"> this is the font face section</FONT>

B) FONT SIZE

Just as you can change the font face, you can also manipulate font sizes. You can use the <font size> tag on one word or a whole paragraph.

Syntax: <FONT SIZE=N> Text </FONT>

The value for size can be from 1 to 7 where the number 3 is the default font size. Font size is also defined by using the relative value to the default size of 3. This is done by using the + or – symbol.

Syntax: <FONT SIZE= +VALUE>

changing font size using the relative value.

Demonstration of Font Face and Size 

<HTML>
  
  <BODY>
    
  <P><FONT FACE="TIMES NEW ROMAN"SIZE=1> KEYBOARD</FONT></P> 
  <P><FONT SIZE=2> MOUSE </FONT></P>
  <P><FONT SIZE=3> LIGHT PEN </FONT></P> 
  <P><FONT SIZE=4> OPTICAL MARK READER </FONT></P> 
  <P><FONT SIZE=5> SCANNER </FONT></P> 
  <P><FONT SIZE=+3> PRINTER </FONT></P>
  <P><FONT SIZE=7> PLOTTER </FONT></P> 
    
  </BODY>
  
</HTML>

C) FONT COLOR

Users can use the Color Attribute to specify the color of the enclosed text. Syntax to represent Color attribute is

Syntax: <FONT COLOR="VALUE">

One can specify the name of color such as RED, GREEN, BLUE, YELLOW, WHITE, LIME, etc, or can specify the color using a hexadecimal value that is basically a combination of three primary colors called Red, Green, and Blue in the format #RRGGBB. For example, #000000 represent Black, #FFFFFF represent white. Thus 00 and FF indicate the decimal value 0 to 255 respectively. Thus we can specify 256 colors.

Example

<FONT COLOR = "RED"> HELLO </FONT> 
Or <FONT COLOR = "FF0000"> HELLO </FONT>

Horizontal Line (<HR> Tag)

A horizontal line can be added to the HTML document using the <HR> tag. This tag does not have any closing tag i.e. it is a singular tag. This tag is useful to divide different sections of text in an HTML document and it inserts a shaded line, which is also called a horizontal rule at a specific point in the page. When the <HR> tag is used at the end of a sentence or a paragraph then the horizontal line is inserted above it.

Demonstration of <HR> tag

<HTML>
  
  <HEAD> <TITLE> Demo of HR tag </TITLE> </HEAD> 
    
  <BODY> 
    <HR>
      
      <P> C++          <BR>
          Visual C++   <BR>
          Java
      </P> 
      
   </BODY>
    
</HTML>

Attributes of HR Tags

The <HR> tag has several attributes; you can specify the width, color, and thickness of the line.

Sr. No.AttributesDescription
1)ALIGN It helps to align the text. One can align the text Left, Center, or Right. For Ex. <HR Align=”Left”>. The default align is Center. 
2)SIZEIt changes the size or thickness of the rule Line. For Ex. <HR SIZE=”5″>
3)WIDTHIt sets the width of the rule line. It can be fixed as a fixed number of pixels or in percentage. For Ex. <HR WIDTH = “60%”> 
4)COLORTo display ruler lines in a specific color. For Ex. <HR COLOR=”RED”>
5)NOSHADE When a solid bar is required, then this attribute specifies that the horizontal rule should not be shaded. It does not require any value.

Demonstration of HR Tag Attributes

<HTML>
  
  <HEAD> <TITLE> Demo of HR tag </TITLE> </HEAD> 
    
  <BODY>
    
    <H3> Object based programming languages </H3>
    <HR Size = "10" COLOR = "RED" WIDTH = "20%" ALIGN = "LEFT">
      
     <P>
          C++          <BR>
          Visual       <BR>
          Java         <BR>
     
     </P>
      
   </BODY>
    
</HTML>

Marquee Tag

This tag is very important to scroll text in your file. Some web browser does not support this feature. The marquee element uses the <MARQUEE> and </MARQUEE> tags to make the enclosed text scroll. The selected text which is highlighted will scroll the text from right to left and vice versa.

Syntax: <MARQUEE> Text </MARQUEE>

Attributes of Marquee Tag

  • ALIGN: This is the alignment for the marquee text; it can be “Middle”, “Top” or “Bottom”.
  • BGCOLOR: The background color for the marquee text.
  • DIRECTION: By default marquee text is scrolled from right to left. Using the DIRECTION attribute you can change this default setting. DIRECTION=”RIGHT” will move the text from left to right.
  • WIDTH: The width of the marquee text can be specified either in terms of percentage of window, width, in terms of pixels.
  • HEIGHT: This specifies the height of the marquee text area with respect to the screen. It can be specified either in percentage or in terms of pixels. for example, height=”50%”, defines half of the screen height as a marquee text area but it does not change the text size itself.
  • SCROLLDELAY: This attribute is useful to control the speed at which the marquee text is drawn on the screen. Time must be specified in milliseconds.
  • BEHAVIOR: This is the way the marquee text will behave. It takes one of the following values,
    • 1) SLIDE – is the default effect
    • 2) ALTERNATE – make the text move alternately between the left and right boundaries of the window.
    • 3) SCROLL – provides scrolling effect

Demonstration of Scrolling Text using Marquee 

<HTML>
  
<BODY>
  
   <H3> 
     
     <MARQUEE ALIGN="TOP" BGCOLOR="BLUE" DIRECTION="RIGHT" SCROLLDELAY= "100"> MS-WORD </ MARQUEE>
     
   </H3> 
  
   <PRE>
  
     MS-Word is the application software and one of the most powerful word processors in the Windows operating system. 
     It is used for the formatting of letters or text. In simple meaning it is a word processor having various functions for text, 
     you may insert different objects like pictures, sound, and video, or calendar in a word file.
  
   </PRE> 
  
 </BODY> 

</HTML>

No Break Tag (<NOBR>)

This tag helps to prevent the line from being broken when it exceeds the defined length in a browser. The no-break HTML tag uses the <NOBR> and </NOBR> tags to prevent the enclosed text from going into a new line. When the text exceeds 80 characters, the web browser automatically shows a scroll bar at the bottom.

Demonstration of No Break Tag

<HTML> 
  <BODY>
    
    <NOBR>
      MS-Word is the application software and one of the most powerful word processors in the Windows operating system. 
      It is used for the formatting of letters or text. In simple meaning, it is a word processor having various functions 
      for the text you may insert different objects like pictures, sound, and video, or calendar in a word file. 
    </NOBR>
      
  </BODY> 
</HTML>

Share:

Leave a Reply