Formatting refers to changing the presentation or appearance of a document to make it more appealing. Formatting is important because:
- We may customize the look of our web page according to our wish.
- It helps to improve the readability of our web page.
Users are usually influenced by the presentation. If your web page looks like an essay no one could probably show interest in reading it. When you present the same text by formatting it accordingly, the user will more likely have a favorable attitude towards it.
HTML has many tags designed for this purpose.
Since they are used for styling the content, they are used at block level i.e. within the body tag.
These tags are used to give a newer look to your content. Let us discuss about all formatting tags in detail.
Bold text- The <b> Tag:
<b> tag displays the content in bold.
Syntax for <b> tag:
<b>Content </b>
End tag is compulsory.
Example:
<b>We have used bold tag</b
<p>This tag makes the text <b>bold</b></p>
The output will be:
We have used bold tag This tag makes the text bold
Differences between HTML4 & HTML5:
There is no difference.
Attributes supported by <b> tag:
Global Attributes:
The <b> tag supports all the global attributes of HTML.
Event Attributes:
The <b> tag supports all the Event attributes of HTML.
Remember:
- We can also use “font-weight” property of CSS to set the text to bold.
- Do not use this tag to specify headings. Use h1, h2, h3, h4, h5, h6 tags instead.
- This tag is supported in all major browsers.
Emphasized text –The <em> tag:
When you want to emphasize (give special importance) a part of a phrase we use this tag.
em element is used to emphasize the enclosed text so that browser knows the data within is special and should be emphasized. In most browsers, the emphasized text is rendered in italic visually, though it’s not necessary.
. Syntax for <em> tag:
<em>Content</em>
End tag is Compulsory.
Example:
<em>This text is Emphasized</em>
The output will be:
This text is Emphasized
Differences between HTML4 & HTML5:
There is no difference.
Attributes supported by <b> tag:
Global Attributes:
The <em> tag supports all the global attributes of HTML.
Event Attributes:
The <em> tag supports all the Event attributes of HTML.
Remember:
- This tag is not deprecated, but it is possible to achieve the same effect by using CSS.
- The <em> is a Phrase element. Phrase elements add structural information to the content.
- We can also use “font-style: italic” property in CSS to emphasize the text.
- The <em> tag is supported in all major browsers.
Italic Text- The <i> tag:
The <i> tag renders the text in italics. Anything that is placed between <i> and </i> will be displayed in italics.
Syntax for <i> tag:
<i>Text to be italicized</i>
End tag is Mandatory.
Example:
<i>This text is Italicized</i>
The output will be:
This text is Italicized
Differences between HTML4 & HTML5:
In HTML 4.01, we use <i> tag to specify the text in italics. However in HTML5, we can use style sheets to style the text.
Attributes supported by <b> tag:
Global Attributes:
The <b> tag supports all the global attributes of HTML.
Event Attributes:
The <b> tag supports all the Event attributes of HTML.
Remember:
- The <i> tag can be used to specify any technical terms, a phrase or a citation.
- Though the output of <em> & <i> are same, there are different semantically. The difference will be more pronounced in speech browsers, the text within <i> tag will be pronounced normally whereas the text within the <em> will be rendered in high pitch or volume.
- The <em> should be used whenever possible over <i> tag.
- The <i> tag is supported in all major browsers.
Small Text – The <small> tag:
The content of this tag will be displayed one font size smaller than the rest of the content surrounding it.
Syntax for <small> tag:
<small>Content</small>
End tag is Mandatory.
Example:
<p> This content is displayed in <small> smaller fonts</small></p>
The output will be:
This content is displayed in smaller fonts
Differences between HTML4 & HTML5:
There is no difference.
Attributes supported by <small> tag:
Global Attributes:
The <small> tag supports all the global attributes of HTML.
Event Attributes:
The <small> tag supports all the Event attributes of HTML.
Remember:
The <small> tag is supported in all major browsers.
Strong Text – The <strong> tag:
This tag is used for displaying important text. This tag gives stronger emphasis to the content enclosed within <strong> and </strong>
Syntax for <strong> tag:
<strong>Content</strong>
End tag is Mandatory.
Example:
<p> This tag is used to specify <strong> strongly emphasized</strong> text</p>
The output will be:
This tag is used to specify strongly emphasized text
Differences between HTML4 & HTML5:
In HTML 4.01, this tag defines strong emphasized text whereas in HTML5 it defines important text.
Attributes supported by <strong> tag:
Global Attributes:
The <strong> tag supports all the global attributes of HTML.
Event Attributes:
The <strong> tag supports all the Event attributes of HTML.
Remember:
- The <strong> tag is supported in all major browsers.
- The <strong> tag is a phrase tag.
- This tag is not deprecated, but it is possible to get richer effect with CSS.
Subscript text - The <sub> tag:
This tag defines subscripted text .Subscripted text appear half a character below the baseline .This can be used for representing Chemical formulas.
Syntax for <sub> tag:
<sub>Content to be subscripted</sub>
End tag is Mandatory.
Example:
<p> This tag is used to specify <sub> subscripted</sub> text</p>
The output will be:
This tag is used to specify subscripted text
Differences between HTML4 & HTML5:
There is no difference.
Attributes supported by <sub> tag:
Global Attributes:
The <sub> tag supports all the global attributes of HTML.
Event Attributes:
The <sub> tag supports all the Event attributes of HTML.
Remember:
The <sub> tag is supported in all major browsers.
Superscript text - The <sup> tag:
The text within this tag is superscripted .Superscripted text appears half a character above the baseline .This can be used for representing Chemical formulas. This tag is used for writing footnotes like Copy rights reserved ©
Syntax for <sup> tag:
<sup>Content to be superscripted</sup>
End tag is Mandatory.
Example:
<p> This tag is used to specify <sup> superscripted</sup> text</p>
The output will be:
This tag is used to specify superscripted text
Differences between HTML4 & HTML5:
There is no difference.
Attributes supported by <sup> tag:
Global Attributes:
The <sup> tag supports all the global attributes of HTML.
Event Attributes:
The <sup> tag supports all the Event attributes of HTML.
Remember:
The <sup> tag is supported in all major browsers.
Insert text - The <ins> tag:
The <ins> tag is used to mark up a section of the document that is inserted. Browsers will normally underline the inserted text.
Syntax for <ins> tag:
<ins>Content to be superscripted</ins>
End tag is Mandatory.
Example:
<p> This tag is used to <ins>insert </ins> text</p>
The output will be:
This tag is used to insert text.
Differences between HTML4 & HTML5:
There is no difference.
Attributes supported by <ins> tag:
Attribute | Value | Description |
cite | URL | Specifies a URL to a document that explains the reason why the text was inserted/changed |
YYYY-MM-DDThh:mm:ssTZD | Specifies the date and time when the text was inserted/changed YYYY - year (e.g. 2009) MM - month (e.g. 01 for January) DD - day of the month (e.g. 08) T - a required separator hh - hour (e.g. 22 for 10.00pm) mm - minutes (e.g. 55) ss - seconds (e.g. 03) TZD - Time Zone Designator (Z denotes Zulu, also known as Greenwich Mean Time)
|
Global Attributes:
The <ins> tag supports all the global attributes of HTML.
Event Attributes:
The <ins> tag supports all the Event attributes of HTML.
Remember:
- The <ins> tag is supported in all major browsers.
- For best results, use <ins> & <del> together to markup and modify the content.
- The datetime attribute does not show any visible effect in regular browsers, it is used by screen readers.
- This tag is mostly useful in draft legislation where lawmakers need to view the changes.
Delete text - The <del> tag:
The <del> tag is used to mark up a section of the document that is deleted. Browsers will normally strike a line through the deleted text.
Syntax for <del> tag:
<del>Content to be deleted</del>
End tag is Mandatory.
Example:
<p> This tag is used to <del>delete</del> text</p>
The output will be:
This tag is used to delete text
Differences between HTML4 & HTML5:
There is no difference.
Attributes supported by <del> tag:
Attribute | Value | Description |
cite | URL | Specifies a URL to a document that explains the reason why the text was deleted |
YYYY-MM-DDThh:mm:ssTZD | Specifies the date and time when the text was deleted YYYY - year (e.g. 2009) MM - month (e.g. 01 for January) DD - day of the month (e.g. 08) T - a required separator hh - hour (e.g. 22 for 10.00pm) mm - minutes (e.g. 55) ss - seconds (e.g. 03) TZD - Time Zone Designator (Z denotes Zulu, also known as Greenwich Mean Time)
|
Global Attributes:
The <del> tag supports all the global attributes of HTML.
Event Attributes:
The <del> tag supports all the Event attributes of HTML.
Remember:
- The <del> tag is supported in all major browsers.
- For best results, use <ins> & <del> together to markup and modify the content.
- The datetime attribute does not show any visible effect in regular browsers, it is used by screen readers.
- This tag is mostly useful in draft legislation where lawmakers need to view the changes.
- The author of the document can add the comments about the inserted or deleted text using <title> attribute for <ins> & <del> tags.
As we have seen different text formatting tags, let us write a sample code using all the tags we have learnt in this section.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <body> <p> <b>Satya Nadella</b> is new <em>CEO</em> of Microsoft</p> <p>Microsoft’s founder and Chairman of board <strong>Bill Gates</strong> said <i> "During this time of transformation, there is no better person to lead <del>Google</del> <ins>Microsoft</ins> than Satya Nadella"</i></p> <p>Example for small, sub & sup elements</p> <p> The chemical formula for water is H<sub>2</sub>O</p> <p>Einstein proposed the principle of relativity E=mc<sup>2</sup></p> <p><small>copy rights reserved<sup>©</sup></small></p> </body> </html>
The output of the above program will be:
The <code> tag:
If you want to insert computer code in your web page, use this element. It can be useful to show functions, programming code or variables.
The browsers usually render the content of this tag with a fixed–width font style (also known as monospace font).
Syntax for <code> tag:
<code>Computer Code</code>
End tag is Mandatory.
Example:
<code> for (i=0;i++)<br/> i=i+1; </code>
The output will be:
for (i=0;i++)
i=i+1;
<br/> is break tag.
Differences between HTML4 & HTML5:
There is no difference.
Attributes supported by <code> tag:
Global Attributes:
The <code> tag supports all the global attributes of HTML.
Event Attributes:
The <code> tag supports all the Event attributes of HTML.
Remember:
- The <code> tag is supported in all major browsers.
- You should not use this tag for displaying monospaced font, instead use “font-family” property of CSS.
- We have an attribute named code for <applet> tag. Don’t get confused with the <code> tag & code attribute.
Preformatted text- The <pre> tag:
This element defines preformatted text.
This is used for only visual purpose, as the text remains same with or without applying this tag.
The browsers usually render the content of this tag with a fixed–width font style (also known as monospaced font).
The <pre> tag preserves all the line breaks and spaces.
Syntax for <code> tag:
<pre>Pre-formatted tag</pre>
End tag is Mandatory.
Example:
|
The output will be:
|
Differences between HTML4 & HTML5:
The width attribute is not supported in HTML5
Attributes supported by <pre> tag:
Attribute | Value | Description |
width | number | Not supported in HTML5. |
Global Attributes:
The <pre> tag supports all the global attributes of HTML.
Event Attributes:
The <pre> tag supports all the Event attributes of HTML.
Remember:
- The <pre> tag is supported in all major browsers.
- Use <pre> tag to display unusual formats like the outputs of computer programs, program code etc.
- The width attribute may not work with some old browsers.
Variable - The <var> tag:
This tag is used for defining variable or user supplied information. The content of this element is usually displayed in italics.
It is often used in representations of computer code.
Syntax for <var> tag:
<var>variable</var>
End tag is Mandatory.
Example:
|
The output will be:
|
Differences between HTML4 & HTML5:
There is no difference.
Attributes supported by <var> tag:
Global Attributes:
The <var> tag supports all the global attributes of HTML.
Event Attributes:
The <var> tag supports all the Event attributes of HTML.
Remember:
- The <var> tag is supported in all major browsers.
- If you need your code to be displayed in italics use “Font-style” property of CSS. Do not use <var> tag.
Sample Text - <samp> Tag:
This tag is used to designate sample output from computer programs or scripts. The output of this tag is usually rendered using monospaced font.
Syntax for <samp> tag:
<samp>Sample output of a computer program or script</samp>
End tag is Mandatory.
Example:
|
The output will be:
|
Differences between HTML4 & HTML5:
There is no difference.
Attributes supported by <samp> tag:
Global Attributes:
The <samp> tag supports all the global attributes of HTML.
Event Attributes:
The <samp> tag supports all the Event attributes of HTML.
Remember:
- The <samp> tag is supported in all major browsers.
- If you want to display monospaced font do not use <samp> tag instead use style sheets.
Keyboard input - <kbd> tag:
This tag is used to define keyboard input. The output of this tag is usually rendered using monospaced font.
Syntax for <kbd> tag:
<kbd>Keyboard input</kbd>
End tag is Mandatory.
Example:
|
The output will be:
|
Differences between HTML4 & HTML5:
There is no difference.
Attributes supported by <kbd> tag:
Global Attributes:
The <kbd> tag supports all the global attributes of HTML.
Event Attributes:
The <kbd> tag supports all the Event attributes of HTML.
Remember:
- The <kbd> tag is supported in all major browsers.
- If you want to display monospaced font do not use <kbd> tag instead use style sheets
In this section, we have seen tags for displaying computer output. Let us now, discuss some tags for displaying quotations, citations & definitions.
Abbreviation - <abbr> tag
The <abbr> tag represents an abbreviation like UNESCO.
- It is optional to provide description for the abbreviation. We can use title attribute for <abbr> tag to provide the description when the user hovers the cursor on the abbreviation.
- We should either mark up an abbreviation using an abbr element with title attribute or include the expansion in the text, when it is first time used.
Syntax for <abbr> tag:
<abbr>Abbreviation</abbr>
End tag is Mandatory.
Example:
|
The output will be:
|
An example using title attribute:
The title attribute provides an expanded form of abbreviation.
|
The output will be:
Differences between HTML4 & HTML5:
There is no difference.
Attributes supported by <abbr> tag:
Global Attributes:
The <abbr> tag supports all the global attributes of HTML.
Event Attributes:
The <abbr> tag supports all the Event attributes of HTML.
Remember:
- The <abbr> tag is supported in all major browsers except IE6 and its earlier versions.
- Different browsers support the <abbr> tag by giving different visual outputs.
- So, we cannot expect the same output from different browsers.
- The markup (or expanded form) can be seen by only mouse users. Keyboard users cannot see the expanded form
- As a result, many people prefer to write out the full form in the first instance within the text instead of using this element.
Definition - <dfn> tag:
This tag is used for marking up a term that is being defined. We have to provide definition for a term when we introduce it to the user for the first time. The definition of the term specified within <dfn> </dfn> should be given by the tags like <p>. This tag is usually used for defining technical terms, industry specific jargon etc.
Syntax for <dfn> tag:
<dfn>Definition term</dfn>
End tag is Mandatory.
Example:
|
The output will be:
|
Differences between HTML4 & HTML5:
There is no difference.
Attributes supported by <dfn> tag:
Global Attributes:
The <dfn> tag supports all the global attributes of HTML.
Event Attributes:
The <dfn> tag supports all the Event attributes of HTML.
Remember:
- The <dfn> tag is supported in all major browsers.
- Some, but not all browsers display the definition term in italics, as it is generally used for defining new terms.
- If the term is not rendered in italics, we can use CSS to format the definition.
- The <dfn> must not contain any nested <dfn> tags i.e., <dfn> within <dfn> is not allowed.
- Note that, dfn specifies defining instance not the definition, we should not place the actual definition of the term between <dfn> and </dfn>.
The <cite> tag:
The <cite> tag of HTML is used for a simple purpose. This tag indicates citation or reference to another source. We use this tag for referring to creative works like titles of the books, any other web page, a tweet, a song, a painting, a film or any other work to which we refer.
Syntax for <cite> tag:
<cite>Citation</cite>
End tag is Mandatory.
Example:
|
The output will be:
|
Differences between HTML4 & HTML5:
In HTML4, we can use cite element to refer to a name of the person.
In HTML5, The cite element can only have reference to title of a work;
For example, the title of a book, paper, poem, essay, score, song, script, film, TV show, game, painting, sculpture, theater production, play, opera, musical, exhibition, legal case report, or other such creative works.
Attributes supported by <cite> tag:
Global Attributes:
The <cite> tag supports all the global attributes of HTML.
Event Attributes:
The <cite> tag supports all the Event attributes of HTML.
Remember:
- The <cite> tag is supported in all major browsers.
- Most browsers render the citation in italics. If you want to display it in other style you can use CSS.
The <address> tag:
We use <address> tag for specifying the contact information of the author/ owner of the document.
- Usually, the content of the address element will be displayed in italics. Most browsers will add a line break before and after the address.
- This element usually appears either at the top or at the bottom of a page.
- The <address> element in the <body> tag represents contact information for the document.
- The <address> element inside an <article> element (HTML element for specifying independent content) represents contact information for that article.
Syntax for <address> tag:
<address> Contact information </address>
End tag is Mandatory.
Example:
|
The output will be:
|
Differences between HTML4 & HTML5:
HTML 4.01 does not support <article> tag, so an <address> element in HTML 4.01 always represents the address of the author of the document.
Attributes supported by <address> tag:
Global Attributes:
The <address> tag supports all the global attributes of HTML.
Event Attributes:
The <address> tag supports all the Event attributes of HTML.
Remember:
- The address element should not be used for specifying Geographical location alone. It can also contain Virtual addresses like e-mail ids, web site addresses etc.
- We suggest you to specify the contact information at the bottom of your page.
The <blockquote> element:
The <blockquote> tag is used for specifying a block of text that is quoted from another source or another document or by a person. The block may contain just few lines or many paragraphs (which would be marked up by nested <p> elements). The referred content is always indented and displayed.
|
Syntax for <blockquote> tag:
End tag is Mandatory.
Example:
|
The output will be:
|
Differences between HTML4 & HTML5:
In HTML 4.01, the <blockquote> tag specifies a long quotation.
In HTML 5, this tag specifies a section that is quoted from another source.
Attributes supported by <blockquote> tag:
The cite attribute for <blockquote> tag:
This attribute specifies the source of the quotation.
The cite attribute does not show any visible effect in browsers.
This attribute is used by search engines to get additional information about the quotation.
Attribute | Value | Description |
cite | URL | Specifies the source of the quotation |
Example using cite attribute:
|
Output of this will be:
Even the greatest fool can accomplish a task if it were after his or her heart. But the intelligent ones are
those who can convert every work into one that suits their taste.
Global Attributes:
The <blockquote> tag supports all the global attributes of HTML.
Event Attributes:
The <blockquote> tag supports all the Event attributes of HTML.
Remember:
- The <blockquote> tag is supported in all major browsers.
- Do not use <blockquote> tag to indent the text.
- Some old browsers render the content of this tag in italics.
- Do not get confused with <cite> tag & cite attribute.
- The <cite> tag should contain only titles & cite attribute can only contain valid URLs.
Short Quotation - <q> tag:
The <q> tag is just like the <blockquote> tag where the <blockquote> tag is used for quoting block of text whereas <q> tag is used for quoting short sentences.
Browsers normally insert quotation marks (“ “) around the quotation.
It can also have an optional cite attribute to specify the location from where it is quoted.
|
Syntax for <q> tag:
<q>Quotation</q>
End tag is Mandatory.
Example:
|
The output will be:
|
Differences between HTML4 & HTML5:
There is no difference.
Attributes supported by <q> tag:
The cite attribute for <q> tag:
This attribute specifies the source of the quotation.
The cite attribute does not show any visible effect in browsers.
This attribute is used by search engines to get additional information about the quotation.
Attribute | Value | Description |
cite | URL | Specifies the source of the quotation |
Example using cite attribute:
|
Output of this will be:
Albert Einstein said, “Try not to become a man of success, but rather try to become a man of value.”
Global Attributes:
The <q> tag supports all the global attributes of HTML.
Event Attributes:
The <q> tag supports all the Event attributes of HTML.
Remember:
- The <q> tag is supported in all major browsers.
- This is an inline tag (They don't start new lines when you use them, and they generally only contain other inline tags and text or data), so we can use it to define quotations in between paragraphs.
- Do not quote the quotation, because the browser by default encloses the quotation within quotes.
The <bdo> tag:
This tag is used for changing the output direction of the text that is enclosed between <bdo> and </bdo>. bdo is Bi-directional override.
Technically, this tag overrides the “Unicode bi-directional algorithm.”
We can change the current text direction by using this tag.
|
Syntax for <bdo> tag:
<bdo dir=" { ltr | rtl } "></bdo>
End tag is Mandatory.
Example:
|
The output will be:
|
Differences between HTML4 & HTML5:
There is no difference.
Attributes supported by <bdo> tag:
The dir attribute for <bdo> tag:
This attribute specifies the direction of text.
Attribute | Value | Description |
dir | ltr or rtl | Specifies the direction of text inside the <bdo> element. This is not an optional attribute. |
Global Attributes:
The <bdo> tag supports all the global attributes of HTML.
Event Attributes:
The <bdo> tag supports all the Event attributes of HTML.
Remember:
- The <bdo> tag is supported in all major browsers.
- A bdo element should always have a dir attribute.
- This element may be used to embed some text from another language that is different from the language of the document.
- Sometimes, the user may use it for aesthetic reasons.