HTML Attributes and Formatting

HTML Attributes and Formatting

Welcome to InfinityGyan.in, Now we will discuss about HTML Attributes and Formatting. HTML Tags and their use such as title tag <h1>, <h2>, paragraph tag <p> 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 More about HTML:

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.

India's Cheapest Digital Services Provider skrcreations
  • 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 More about HTML:

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:

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 More about HTML:

Read More:

Share This Article:

This Post Has One Comment

  1. Hi You Write This Article Very Well. Now Learning From You, I Make A Tool For Weight Calculator, So, Can Check This And Tall me IS Good Or Not – WeightConverter

Leave a Reply