HTML Attributes and Formatting: Welcome to Ushanand Academy, Now we will discuss about HTML Attributes and Formatting. HTML Tags and their use such as title tag paragraph tag and other tags. We have used HTML Attributes and Formatting in their simplest form so far, but most HTML Tags can also contain attributes, which are additional pieces of information. In this article we will learn HTML Attributes and Formatting.

Learn HTML Attributes and Formatting

HTML Attributes

HTML Attributes: An attribute is used to define the attributes of an HTML element and to place it inside the element’s starting tag. All attributes are made up of two parts – a value and a name.

Name: That you want to set. The name is the property – for example, in the example the paragraph <p> element holds an attribute whose name is aligned, which you can use to indicate the alignment of the paragraph on the page.
Value: Price is what you want the value of the property to be determined and always kept within quotes. In the example below, three possible values of the aligned attribute appear: left, center, and right.

Property names and attribute values are case-insensitive. However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in its HTML 4 recommendation.

For Example:

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>Align Attribute  Example</title> 
   </head>
	
   <body> 
      <p align = "left">This is left aligned</p> 
      <p align = "center">This is center aligned</p> 
      <p align = "right">This is right aligned</p> 
   </body>
	
</html>

Results:
This is left aligned
This is center aligned
This is right aligned

Core Attributes

There are four main features that can be used on the majority of HTML elements –

Id
Title
Class
Style

Id Attributes

The id attribute of an HTML tag can be used to uniquely identify any element of an HTML page. You want to use an id attribute on an element for two primary reasons –

If an element carries an element as a specific identifier, it is possible to identify that element and its contents.
If there are two elements of the same name within the web page, you can use the id attribute to distinguish between elements of the same name.

Use the ID attribute to distinguish between two paragraph elements.

For Example:

<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>

Title Attributes

The title attribute returns the suggested title for the element. The syntax for the title attribute is explained for the id attribute –

The behavior of this attribute will depend on the element it carries, although it is often displayed as a tool tip when the cursor is over the element or when the element is loading.

For Example:

<!DOCTYPE html>
<html>

   <head>
      <title>The title Attribute Example</title>
   </head>
	
   <body>
      <h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
   </body>
	
</html>

Results:

Titled Heading Tag Example

Now try to bring your cursor to “Title Title Tag Example” and you will see that whatever title you have used in your code is coming as a tool tip of the cursor.

Class Attributes

The class attribute is used to associate an element with the style sheet, and specifies the element’s class. When you learn the Cascading Style Sheet (CSS), you will learn more about the use of the class attribute. So for now you can avoid it.

The value of an attribute can also be a space-separated list of class names. for example –

class = "className1 className2 className3"

Style Attributes

The style attribute allows you to specify cascading style sheet (CSS) rules within an element.

For Example:

<!DOCTYPE html>
<html>

   <head>
      <title>The style Attribute</title>
   </head>
	
   <body>
      <p style = "font-family:arial; color:#FF0000;">Some text...</p>
   </body>
	
</html>

Results:

Some text…

Internationalization Attributes

There are three internationalization features, which are available for most (though not all) XHTML elements.

dir
lang
xml:lang

dir Attributes

In which the text must flow. The dir feature allows you to point the browser in that direction. The dir attribute can take one of two values, as you can see in the following table –

Value	Meaning
ltr	Left to right (the default value)
rtl	Right to left (for languages such as Hebrew or Arabic that are read right to left)

For Example:

<!DOCTYPE html>
<html dir = "rtl">

   <head>
      <title>Display Directions</title>
   </head>
	
   <body>
      This is how IE 5 renders right-to-left directed text.
   </body>
	
</html>

Results:
This is how IE 5 renders right-to-left directed text.

When the dir attribute is used within the <html> tag, it determines how the text will be presented within the entire document. When used within another tag, it controls the direction of the text for the content of that tag.

Lang Attributes

The lang attribute allows you to indicate the main language used in a document, but this attribute was retained in HTML only for backwards compatibility with earlier versions of HTML. This attribute has been replaced by the xml: lang attribute in the new XHTML document.

HTML language code: The values of the lang attribute are ISO-639 standard two-character language codes.

ISO 639 for a complete list of language codes: Check HTML Language Codes

For Example:

<!DOCTYPE html>
<html lang = "en">

   <head>
      <title>English Language Page</title>
   </head>

   <body>
      This page is using English Language
   </body>

</html>

Results:
This page is using English Language

Xml: lang Attribute

The xml: lang attribute is the XHTML replacement for the lang attribute.

Generic Attributes

Here is a table of some other features that are easily usable with HTML tags.

Attribute	Options	Function
align	right, left, center	Horizontally aligns tags
valign	top, middle, bottom	Vertically aligns tags within an HTML element.
bgcolor	numeric, hexidecimal, RGB values	Places a background color behind an element
background	URL	Places a background image behind an element
id	User Defined	Names an element for use with Cascading Style Sheets.
class	User Defined	Classifies an element for use with Cascading Style Sheets.
width	Numeric Value	Specifies the width of tables, images, or table cells.
height	Numeric Value	Specifies the height of tables, images, or table cells.
title	User Defined	“Pop-up” title of the elements.

Learn HTML Attributes and Formatting

HTML Formatting

HTML Formatting: Only three out of ten options are available to indicate how text can appear in HTML and XHTML. If you use a word processor, you should be familiar with the ability to bold, italicize or underline text.

Bold Text

Anything that appears within the <b> … </b> element.

For Example:

<!DOCTYPE html>
<html>

   <head>
      <title>Bold Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <b>bold</b> typeface.</p>
   </body>
	
</html>

Results:
The following word uses a bold typeface.

Italic Text

Anything that appears within the element <i> … </i>.

For Example:

<!DOCTYPE html>
<html>

   <head>
      <title>Italic Text Example</title>
   </head>
	
   <body>
      <p>The following word uses an <i>italicized</i> typeface.</p>
   </body>
	
</html>

Results:
The following word uses an italicized typeface.

Underlined Text

Anything that appears within the <u> … </u> element.

For Example:

<!DOCTYPE html>
<html>

   <head>
      <title>Underlined Text Example</title>
   </head>
	
   <body>
      <p>The following word uses an <u>underlined</u> typeface.</p>
   </body>
	
</html>

Results:
The following word uses an underlined typeface.

Strike Text

Anything visible within the <strike> … </strike> element is displayed with a strike through, a thin line through the text shown below-

For Example:

<!DOCTYPE html>
<html>

   <head>
      <title>Strike Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <strike>strikethrough</strike> typeface.</p>
   </body>
	
</html>

Results:
The following word uses a ~~strikethrough~~ typeface.

Monospaced font

The content of the <tt> … </tt> element is written in monopause font. Most fonts are known as variable-width fonts because different characters are of different widths.

For Example:

<!DOCTYPE html>
<html>

   <head>
      <title>Monospaced Font Example</title>
   </head>
	
   <body>
      <p>The following word uses a <tt>monospaced</tt> typeface.</p>
   </body>
	
</html>

Results:
The following word uses a monospaced typeface.

Superscript Text

The content of the <sup> … </sup> element is written in superscript, The font size used is the same size as the characters around it, but the character’s height is displayed above the other characters.

For Example:

<!DOCTYPE html>
<html>

   <head>
      <title>Superscript Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <sup>superscript</sup> typeface.</p>
   </body>
	
</html>

Results:
The following word uses a ^superscript typeface.

Subscript Text

The content of a <sub> … </sub> element is written in subscript, The font size used is similar to the characters around it, but half the height of the character is displayed below the other characters.

For Example:

<!DOCTYPE html>
<html>

   <head>
      <title>Subscript Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <sub>subscript</sub> typeface.</p>
   </body>
	
</html>

Results:
The following word uses a _subscript typeface.

Inserted Text

Anything that appears within the <ins> … </ins> element is displayed as inserted text.

For Example:

<!DOCTYPE html>
<html>

   <head>
      <title>Inserted Text Example</title>
   </head>
	
   <body>
      <p>I want to drink <del>cola</del> <ins>wine</ins></p>
   </body>
	
</html>

Results:
I want to drink ~~cola~~ wine

Deleted Text

Anything that appears within the <del> … </del> element is displayed as deleted text.

For Example:

<!DOCTYPE html>
<html>

   <head>
      <title>Deleted Text Example</title>
   </head>
	
   <body>
      <p>I want to drink <del>cola</del> <ins>wine</ins></p>
   </body>
	
</html>

Results:
I want to drink ~~cola~~ wine

Larger Text

The content of the <big> … </big> element is shown to have a larger font size than the text shown below –

For Example:

<!DOCTYPE html>
<html>

   <head>
      <title>Larger Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <big>big</big> typeface.</p>
   </body>
	
</html>

Results:
The following word uses a big typeface.

Smaller Text

The content of the <small> … </small> element is shown to be a font size smaller than the rest of the text shown below-

For Example:

<!DOCTYPE html>
<html>

   <head>
      <title>Smaller Text Example</title>
   </head>

   <body>
      <p>The following word uses a <small>small</small> typeface.</p>
   </body>

</html>

Results:
The following word uses a small typeface.

Grouping Content

The <div> and <span> elements allow you to group multiple elements together to form a section or subdivision of a page.

For example, to indicate that all elements of a page want to be placed on a page within the <div> element, all elements of that <div> element are footnotes.

You can then attach a style to this <div> element so that they appear using a special set of style rules.

For Example:

<!DOCTYPE html>
<html>

   <head>
      <title>Div Tag Example</title>
   </head>
	
   <body>
      <div id = "menu" align = "middle" >
         <a href = "/index.htm">HOME</a> | 
         <a href = "/about/contact_us.htm">CONTACT</a> | 
         <a href = "/about/index.htm">ABOUT</a>
      </div>

      <div id = "content" align = "left" bgcolor = "white">
         <h5>Content Articles</h5>
         <p>Actual content goes here.....</p>
      </div>
   </body>
	
</html>

Results:

HOME | CONTACT | ABOUT

Content Articles

Actual content goes here…..

On the other hand the <span> element can only be used to group inline elements.

So, if you have part of a sentence or paragraph that you want to group together, you can use the <span> element as follows.

For Example:

<!DOCTYPE html>
<html>

   <head>
      <title>Span Tag Example</title>
   </head>
	
   <body>
      <p>This is the example of <span style = "color:green">span tag</span>
         and the <span style = "color:red">div tag</span> alongwith CSS</p>
   </body>
	
</html>

Results:
This is the example of span tag and the div tag alongwith CSS

These tags are commonly used with CSS so that you can attach a style to a section of a page.

Learn HTML Attributes and Formatting

HTML Attributes

Core Attributes

Id Attributes

Title Attributes

Titled Heading Tag Example

Class Attributes

Style Attributes

Internationalization Attributes

dir Attributes

Lang Attributes

Xml: lang Attribute

Generic Attributes

Learn HTML Attributes and Formatting

HTML Formatting

Bold Text

Italic Text

Underlined Text

Strike Text

Monospaced font

Superscript Text

Subscript Text

Inserted Text

Deleted Text

Larger Text

Smaller Text

Grouping Content

Content Articles

You Might Also Like

HTML Images and Comments

HTML Tutorial Series

Learn HTML Tables and Lists

Leave a Reply Cancel reply