HTML Formatting

HTML Formatting is a process of formatting text for better look and feel. There are
many formatting tags in HTML. These tags are used to make text bold, italicized, or
underlined.

1) Bold Text
If you write anything within <b>............</b> element, is shown in bold letters.

See this example:

<p> <b>Write Your First Paragraph in bold text.</b></p>   

2) Italic Text
If you write anything within <i>............</i> element, is shown in italic letters.

See this example:

<p> <i>Write Your First Paragraph in italic text.</i></p>   

3) HTML Marked formatting

If you want to mark or highlight a text, you should write the content within
<mark>.........</mark>.

See this example:

<h2>  I want to put a <mark> Mark</mark> on your face</h2>  

4) Underlined Text
If you write anything within <u>.........</u> element, is shown in underlined text.

See this example:

<p> <u>Write Your First Paragraph in underlined text.</u></p>   

5) Strike Text
Anything written within <strike>.......................</strike> element is displayed with
strikethrough. It is a thin line which cross the statement.

See this example:

<p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>   
 Output:

Write Your First Paragraph with strikethrough.

6) Monospaced Font
If you want that each letter has the same width then you should write the content within
<tt>.............</tt> element.

Note: We know that most of the fonts are known as variable-width fonts because
different letters have different width. (for example: 'w' is wider than 'i'). Monospaced
Font provides similar space among every letter.

See this example:

<p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>   
Test it Now

Output:

Hello Write Your First Paragraph in monospaced font.

7) Superscript Text
If you put the content within ^{..............} element, is shown in superscript ;
means it is displayed half a character's height above the other characters.

See this example:

<p>Hello ^{Write Your First Paragraph in superscript.}</p>    
Test it Now

Output:

Hello Write Your First Paragraph in superscript.

8) Subscript Text
If you put the content within _{..............} element, is shown in subscript ;
means it is displayed half a character's height below the other characters.

See this example:

<p>Hello _{Write Your First Paragraph in subscript.}</p>  
Test it Now
 Output:

Hello Write Your First Paragraph in subscript.

9) Larger Text
If you want to put your font size larger than the rest of the text then put the content
within <big>.........</big>. It increase one font size larger than the previous one.

See this example:

<p>Hello <big>Write the paragraph in larger font.</big></p>   
Test it Now

Output:

Hello Write the paragraph in larger font.

10) Smaller Text

If you want to put your font size smaller than the rest of the text then put the content
within <small>.........</small>tag. It reduces one font size than the previous one.

See this example:

<p>Hello <small>Write the paragraph in smaller font.</small></p>   
Test it Now

Output:

Hello Write the paragraph in smaller font.

11) HTML Heading

A HTML heading or HTML h tag can be defined as a title or a subtitle which you want to
display on the webpage. When you place the text within the heading tags
<h1>.........</h1>, it is displayed on the browser in the bold format and size of the text
depends on the number of heading.

There are six different HTML headings which are defined with the <h1> to <h6> tags.

h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most
important heading and h6 is used for least important.

See this example:

<h1>Heading no. 1</h1>  
<h2>Heading no. 2</h2>  
<h3>Heading no. 3</h3>  
<h4>Heading no. 4</h4>  
<h5>Heading no. 5</h5>  
<h6>Heading no. 6</h6>  
Output:

Heading no. 1
Heading no. 2

Heading no. 3

Heading no. 4

Heading no. 5

Heading no. 6

12) HTML Paragraph

HTML paragraph or HTML p tag is used to define a paragraph in a webpage. Let's take a
simple example to see how it work. It is a notable point that a browser itself add an
empty line before and after a paragraph.

See this example:

<p>This is first paragraph.</p>  
<p>This is second paragraph.</p>  
<p>This is third paragraph.</p>  
Output:

This is first paragraph.

This is second paragraph.

This is third paragraph.

Space inside HTML Paragraph

If you put a lot of spaces inside the HTML <p> tag, browser removes extra spaces and
extra line while displaying the page. The browser counts number of spaces and lines as a
single one.

<p>  
I am  
going to provide  
you a tutorial on HTML  
and hope that it will  
be very beneficial for you.  
</p>  
<p>  
Look, I put here a lot  
of spaces                    but            I know, Browser will ignore it.  
</p>  
<p>  
You cannot determine the display of HTML</p>  
<p>because resized windows may create different result.  
</p>  
Output:

I am going to provide you a tutorial on HTML and hope that it will be very beneficial for
you.

Look, I put here a lot of spaces but I know, Browser will ignore it.

You cannot determine the display of HTML

because resized windows may create different result.

13) HTML Anchor

The HTML anchor tag defines a hyperlink that links one page to another page. The
"href" attribute is the most important attribute of the HTML a tag.

href attribute of HTML anchor tag

The href attribute is used to define the address of the file to be linked. In other words, it
points out the destination page.

The syntax of HTML anchor tag is given below.

<a href = "..........."> Link Text </a>

Let's see an example of HTML anchor tag.

<a href="second.html">Click for Second Page</a>  

Appearance of HTML anchor tag

An unvisited link is displayed underlined and blue.

A visited link displayed underlined and purple.

 An active link is underlined and red.

14) HTML Image

HTML img tag is used to display image on the web page. HTML img tag is an empty tag
that contains attributes only, closing tags are not used in HTML image element.

Let's see an example of HTML image.

<h2>HTML Image Example</h2>  
<img src="good_morning.jpg" alt="Good Morning Friends"/>  
<img align="left|right|middle|top|bottom">
Attributes of HTML img tag
The src and alt are important attributes of HTML img tag. All attributes of HTML image
tag are given below.

1) src
It is a necessary attribute that describes the source or path of the image. It instructs the
browser where to look for the image on the server.

The location of image may be on the same directory or another server.

2) alt
The alt attribute defines an alternate text for the image, if it can't be displayed. The
value of the alt attribute describe the image in words. The alt attribute is considered
good for SEO prospective.

3) width
It is an optional attribute which is used to specify the width to display the image. It is
not recommended now. You should apply CSS in place of width attribute.

4) height
It specifies the height of the image. The HTML height attribute also supports iframe,
image and object elements. It is not recommended now. You should apply CSS in place
of height attribute.
15) HTML Table
HTML table tag is used to display data in tabular form (row * column). There can be
many columns in a row.

HTML tables are used to manage the layout of the page e.g. header section, navigation
bar, body content, footer section etc. But it is recommended to use div tag over table to
manage the layout of the page .

HTML Table Tags

Tag Description

<table> It defines a table.

<tr> It defines a row in a table.

<th> It defines a header cell in a table.

<td> It defines a cell in a table.

<caption> It defines the table caption.

<colgroup> It specifies a group of one or more columns in a table for formatting.

<col> It is used with <colgroup> element to specify column properties for each colu

<tbody> It is used to group the body content in a table.

<thead> It is used to group the header content in a table.

<tfooter> It is used to group the footer content in a table.

HTML Table Example

Let's see the example of HTML table tag. It output is shown above.
<table>  
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>  
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>  
<tr><td>James</td><td>William</td><td>80</td></tr>  
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>  
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>  
</table>  
Output:

First_Name Last_Name Marks

Sonoo Jaiswal 60

James William 80

Swati Sironi 82

Chetna Singh 72

HTML Table with Border

There are two ways to specify border for HTML tables.

1. By border attribute of table in HTML

2. By border property in CSS

1) HTML Border attribute

You can use border attribute of table tag in HTML to specify border. But it is not
recommended now.

<table border="1">  
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>  
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>  
<tr><td>James</td><td>William</td><td>80</td></tr>  
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>  
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>  
</table>  
Test it Now

Output:
 First_Name Last_Name Marks

Sonoo Jaiswal 60

James William 80

Swati Sironi 82

Chetna Singh 72

HTML table with caption

HTML caption is diplayed above the table. It must be used after table tag only.

<table>  
<caption>Student Records</caption>  
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>  
<tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr>  
<tr><td>Mike</td><td>Warn</td><td>60</td></tr>  
<tr><td>Shane</td><td>Warn</td><td>42</td></tr>  
<tr><td>Jai</td><td>Malhotra</td><td>62</td></tr>  
</table>  

16) HTML Lists

HTML Lists are used to specify lists of information. All lists may contain one or more list
elements. There are three different types of HTML lists:

1. Ordered List or Numbered List (ol)

2. Unordered List or Bulleted List (ul)

3. Description List or Definition List (dl)

HTML Ordered List or Numbered List

In the ordered HTML lists, all the list items are marked with numbers. It is known as
numbered list also. The ordered list starts with <ol> tag and the list items start with
<li> tag.

<ol>  
 <li>Aries</li>  
 <li>Bingo</li>  
 <li>Leo</li>  
 <li>Oracle</li>  
</ol>  
Output:
 1. Aries

2. Bingo

3. Leo

4. Oracle

HTML Unordered List or Bulleted List

In HTML Unordered list, all the list items are marked with bullets. It is also known as
bulleted list also. The Unordered list starts with <ul> tag and list items start with the
<li> tag.

<ul>  
 <li>Aries</li>  
 <li>Bingo</li>  
 <li>Leo</li>  
 <li>Oracle</li>  
</ul>  

Output:

o Aries

o Bingo

o Leo

o Oracle

HTML Ordered List | HTML Numbered List

HTML Ordered List or Numbered List displays elements in numbered format. The HTML
ol tag is used for ordered list. There can be different types of numbered list:

o Numeric Number (1, 2, 3)

o Capital Roman Number (I II III)

o Small Roman Number (i ii iii)

o Capital Alphabet (A B C)

o Small Alphabet (a b c)

To represent different ordered lists, there are 5 types of attributes in <ol> tag.

Type Description
 Type "1" This is the default type. In this type, the list items are numbered with numbers.

Type "I" In this type, the list items are numbered with upper case roman numbers.

Type "i" In this type, the list items are numbered with lower case roman numbers.

Type "A" In this type, the list items are numbered with upper case letters.

Type "a" In this type, the list items are numbered with lower case letters.

HTML Ordered List Example

Let's see the example of HTML ordered list that displays 4 topics in numbered list. Here
we are not defining type="1" because it is the default type.

<ol>  
 <li>HTML</li>  
 <li>Java</li>  
 <li>JavaScript</li>  
 <li>SQL</li>  
</ol>  
Output:

1. HTML

2. Java

3. JavaScript

4. SQL

ol type="I"
Let's see the example to display list in roman number uppercase.

<ol type="I">  
 <li>HTML</li>  
 <li>Java</li>  
 <li>JavaScript</li>  
 <li>SQL</li>  
</ol>  
Output:

I. HTML

II. Java

III. JavaScript

IV. SQL

ol type="i"
Let's see the example to display list in roman number lowercase.

<ol type="i">  
 <li>HTML</li>  
 <li>Java</li>  
 <li>JavaScript</li>  
 <li>SQL</li>  
</ol>  
Output:

i. HTML

ii. Java

iii. JavaScript

iv. SQL

ol type="A"
Let's see the example to display list in alphabet uppercase.

<ol type="A">  
 <li>HTML</li>  
 <li>Java</li>  
 <li>JavaScript</li>  
 <li>SQL</li>  
</ol>  
Output:

A. HTML

B. Java

C. JavaScript
 D. SQL

ol type="a"
Let's see the example to display list in alphabet lowercase.

<ol type="a">  
 <li>HTML</li>  
 <li>Java</li>  
 <li>JavaScript</li>  
 <li>SQL</li>  
</ol>  
Output:

a. HTML

b. Java

c. JavaScript

d. SQL

start attribute
The start attribute is used with ol tag to specify from where to start the list items.

<ol type="1" start="5"> : It will show numeric values starting with "5".

<ol type="A" start="5"> : It will show capital alphabets starting with "E".

<ol type="a" start="5"> : It will show lower case alphabets starting with "e".

<ol type="I" start="5"> : It will show Roman upper case value starting with "V".

<ol type="i" start="5"> : It will show Roman lower case value starting with "v".

<ol type="i" start="5">  
 <li>HTML</li>  
 <li>Java</li>  
 <li>JavaScript</li>  
 <li>SQL</li>  
</ol>  
Output:

v. HTML

vi. Java
 vii. JavaScript

viii. SQL

HTML Unordered List | HTML Bulleted List

HTML Unordered List or Bulleted List displays elements in bulleted format. The HTML
ul tag is used for the unordered list. There can be 4 types of bulleted list:

o disc

o circle

o square

o none

To represent different ordered lists, there are 4 types of attributes in <ul> tag.

Type Description

Type "disc" This is the default style. In this style, the list items are marked with bullet

Type "circle" In this style, the list items are marked with circles.

Type "square" In this style, the list items are marked with squares.

Type "none" In this style, the list items are not marked .

HTML Unordered List Example

<ul>  
 <li>HTML</li>  
 <li>Java</li>  
 <li>JavaScript</li>  
 <li>SQL</li>  
</ul>  

Output:

o HTML

o Java
 o JavaScript

o SQL

ul type="circle"
<ul type="circle">  
 <li>HTML</li>  
 <li>Java</li>  
 <li>JavaScript</li>  
 <li>SQL</li>  
</ul> 

Output:

o HTML

o Java

o JavaScript

o SQL

ul type="square"
<ul type="square">  
 <li>HTML</li>  
 <li>Java</li>  
 <li>JavaScript</li>  
 <li>SQL</li>  
</ul>  

Output:

o HTML

o Java

o JavaScript

o SQL
 ul type="none"
<ul type="none">  
 <li>HTML</li>  
 <li>Java</li>  
 <li>JavaScript</li>  
 <li>SQL</li>  
</ul>  

Output:

o HTML

o Java

o JavaScript

o SQL

17) Marquee HTML

The Marquee HTML tag is a non-standard HTML element which is used to scroll a image
or text horizontally or vertically.

In simple words, you can say that it scrolls the image or text up, down, left or right
automatically.

Marquee tag was first introduced in early versions of Microsoft's Internet Explorer. It is
compared with Netscape's blink element.

Marquee HTML Example

<marquee>This is an example of html marquee </marquee>  

HTML Marquee Attributes

Marquee's element contains several attributes that are used to control and adjust the
appearance of the marquee.

Attribute Description

behavior It facilitates user to set the behavior of the marquee to one of the three dif
alternate.

direction defines direction for scrolling content. It may be left, right, up and down.
 width defines width of marquee in pixels or %.

height defines height of marquee in pixels or %.

hspace defines horizontal space in pixels around the marquee.

vspace defines vertical space in pixels around the marquee.

scrolldelay defines scroll delay in seconds.

scrollamount defines scroll amount in number.

loop defines loop for marquee content in number.

bgcolor defines background color. It is now deprecated.

HTML Scroll Marquee

It is a by default property. It is used to scroll the text from right to left, and restarts at
the right side of the marquee when it is reached to the end of left side. After the
completion of loop text disappears.

<marquee width="100%" behavior="scroll" bgcolor="pink">  
This is an example of a scroll marquee...  
</marquee>  
Test it Now

HTML Slide Marquee

In slide marquee, all the contents to be scrolled will slide the entire length of marquee
but stops at the end to display the content permanently.

<marquee width="100%" behavior="slide" bgcolor="pink">  
This is an example of a slide marquee...  
</marquee>  
Test it Now

HTML Alternate Marquee

It scrolls the text from right to left and goes back left to right.
<marquee width="100%" behavior="alternate" bgcolor="pink">  
This is an example of a alternate marquee...  
</marquee>  
Test it Now

Direction in HTML marquee

This is used to change the direction of scrolling text. Let's take an example of marquee
scrolling to the right. The direction can be left, right, up and down.

<marquee width="100%" direction="right">  
 This is an example of a right direction marquee...  
</marquee>  

Nested marquee example

<marquee width="400px" height="100px" behavior="alternate" style="border:2px solid re
d">  
<marquee behavior="alternate">  
Nested marquee...  
</marquee>  
</marquee>  
Test it Now 

Disadvantages HTML marquee

1) Marquee may be distracting because human eyes are attracted towards movement
and marquee text constantly.

2) Since Marquee text moves, so it is more difficult to click static text, depending on the
scrolling speed.

3) It is a non-standard HTML element.

4) It draws user's attention needlessly and makes the text harder to read.

18) HTML Comment

The comment tag is used to insert comments in the source code. Comments
are not displayed in the browsers.
We can use comments to explain our code, which can help you when we edit
the source code at a later date. This is especially useful if we have a lot of
code.

Example
An HTML comment:

<!--This is a comment. Comments are not displayed in the browser-->

<p>This is a paragraph.</p>

We can also use the comment tag to "hide" scripts from browsers without
support for scripts (so they don't show them as plain text):

<script type="text/javascript">
<!--
function displayMsg() {
    alert("Hello World!")
}
//-->
</script> 

Note: The two forward slashes at the end of comment line (//) is the
JavaScript comment symbol. This prevents JavaScript from executing the -->
tag.

19) HTML <audio> Tag
The <audio> tag defines sound, such as music or other audio streams.

Currently, there are 3 supported file formats for the <audio> element: MP3,
Wav, and Ogg:

The <audio> tag is new in HTML5.

MIME Types for Audio Formats

Format MIME-type

MP3 audio/mpeg
 Ogg audio/ogg

Wav audio/wav

Example
Play a sound:

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

20) HTML <map> Tag
The <map> tag is used to define a client-side image-map. An image-map is
an image with clickable areas.

The required name attribute of the <map> element is associated with the
<img>'s usemap attribute and creates a relationship between the image and
the map.

The <map> element contains a number of <area> elements, that defines

the clickable areas in the image map.

Example
An image-map, with clickable areas:

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#pla
netmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>