HTML Formatting

HTML Formatting is a process of formatting text for better look and feel.
HTML provides us ability to format text without using CSS. There are many
formatting tags in HTML. These tags are used to make text bold, italicized, or
underlined. There are almost 14 options available that how text appears in
HTML and XHTML.

In HTML the formatting tags are divided into two categories:

o Physical tag: These tags are used to provide the visual appearance to
the text.
o Logical tag: These tags are used to add some logical or semantic value
to the text.

Element Description
name

<b> This is a physical tag, which is used to bold the text written between it.

<strong> This is a logical tag, which tells the browser that the text is important.

<i> This is a physical tag which is used to make text italic.

<em> This is a logical tag which is used to display content in italic.

<mark> This tag is used to highlight text.

<u> This tag is used to underline text written between it.

<tt> This tag is used to appear a text in teletype. (not supported in HTML5)

<strike> This tag is used to draw a strikethrough on a section of text. (Not

supported in HTML5)

<sup> It displays the content slightly above the normal line.

<sub> It displays the content slightly below the normal line.

<del> This tag is used to display the deleted content.

<ins> This tag displays the content which is added

<big> This tag is used to increase the font size by one conventional unit.

<small> This tag is used to decrease the font size by one unit from base font size.
1) Bold Text
HTML<b> and <strong> formatting elements

the HTML <b> element is a physical tag which display text in bold font,
without any logical importance. If you write anything within <b>............</b>
element, is shown in bold letters.

example:

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

The HTML <strong> tag is a logical tag, which displays the content in bold
font and informs the browser about its logical importance. If you write
anything between <strong>???????. </strong>, is shown important text.

example:<p><strong>This is an important content</strong>, and this is n

ormal content</p>

2) Italic Text
HTML <i> and <em> formatting elements

The HTML <i> element is physical element, which display the enclosed
content in italic font, without any added importance. If you write anything
within <i>............</i> element, is shown in italic letters.

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

The HTML <em> tag is a logical element, which will display the enclosed
content in italic font, with added semantics importance.

example:<p><em>This is an important content</em>, which displayed in

italic font.</p>

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

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

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

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

strike>.</p>
5) 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.

example:<p>Hello <sup>Write Your First Paragraph in superscript.</

sup></p>

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

Example:
<p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>

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.

example:<p>Hello <sub>Write Your First Paragraph in subscript.</

sub></p>

9) Deleted Text
Anything that puts within <del>..........</del> is displayed as deleted text.

example:<p>Hello <del>Delete your first paragraph.</del></p>

10) 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 increases one font size larger than the
previous one.

example: <p>Hello <big>Write the paragraph in larger font.</big></p>

11) 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.

Example:
<p>Hello <small>Write the paragraph in smaller font.</small></p>
 12) Marked tag:
The content written between <mark> and </mark> tag will show as yellow
mark on browser. This tag is used to highlight a particular text.

Example: <p>This tag will <mark>highlight</mark> the text.</p>

Test it Now

13) Strong text:

This tag is used to display the important text of the content. The text written
between <strong> and </strong> will be displayed as important text.

Example:<p>In HTML it is recommended to use <strong>lower-case</

strong>, while writing a code. </p>

BLOCK TAGS
1. 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, from highest level h1 (main heading) to the least level h6 (least
important heading).

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.

A heading in HTML helps the search engine to understand and index

the structure of web page.

example:

1. <h1>Heading no. 1</h1>

2. <h2>Heading no. 2</h2>
3. <h3>Heading no. 3</h3>
4. <h4>Heading no. 4</h4>
5. <h5>Heading no. 5</h5>
6. <h6>Heading no. 6</h6>
 2. 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. An HTML <p>
tag indicates starting of new paragraph.

example:

1. <p>This is first paragraph.</p>

2. <p>This is second paragraph.</p>
3. <p>This is third paragraph.</p>

3. <br> and <hr> tag

An HTML <br> tag is used for line break and it can be used with paragraph
elements.

Example: <p><br>Papa and mama, and baby and Dot,

<br>Willie and me?the whole of the lot
</p>

An HTML <hr> tag is used to apply a horizontal line between two

statements or two paragraphs.

Example:<p> An HTML hr tag draw a horizontal line and separate two paragraph
s with that line.<hr> it will start a new paragraph.
</p>

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.

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

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
different types: scroll, slide and 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.

scrollamou defines scroll amount in number.

nt

loop defines loop for marquee content in number.

bgcolor defines background color. It is now deprecated.

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.


Tags Descriptions
<em> (Emphasis): Indicates text that should be emphasized, typically rendered in italics by
default.
<strong> (Strong Indicates text with strong importance, typically rendered in bold by default.
Importance)

<cite> (Citation): Defines the title of a work, such as a book, article, or song.

<code> (Code) Represents a fragment of computer code.

<del>(Deleted Defines the deleted text and is used to mark a portion of text which has
text) been deleted from the document.
<ins> (Inserted defines a text that has been inserted into a document. Browsers will usually
text) underline inserted text:

<dfn>(Definition
Used to indicate the defining instance of a term within the text.
Term)
Defines the variable in a mathematical equation or in the computer
<var>(Variable)
program.
<mark> This tag is used to highlight text.
<abbr> Defines an abbreviation
<kbd> (Keyboard Used to indicate user input, typically rendered in a monospaced font.
Input)
<samp> (Sample Used to indicate sample output from a program or system, typically
Output) rendered in a monospaced font.