How to Format Text in HTML?

HTML is nothing but a markup language using tags. You can use different HTML formatting tags to format content on the web page. The text content on a webpage can be marked up with two techniques:

• Structural Markup – using heading and paragraph tags
• Semantic Markup – using bold, strong, underline, etc.

Combining structural and semantic markups, you can showcase the text content in a more readable format for your users. Let us explain the markups in an more understandable manner.

Formatting it Differently

Markups are used to format the text content. Formatting the content is required in order to make a webpage look more understandable, legible and attractive. Formatting could be a logical or physical. The difference is that the logical formatting marks the text according to its meaning while physical styles indicate the specific appearance of a section.

Let’s take the example of <EM> and <I> tags.

• <EM> (Emphasis) is a logical tag
• <I> (Italics) is a physical tag

Create a simple HTML page with this – “This is <EM>emphasized text</EM> and this is <I>italicized text</I>” – in your text editor. See what it looks like on your browser.

It will look like below:

This is emphasized text and this is italicized text.

It looks absolutely the same, doesn’t it!? Then what is the fundamental of having both logical styles and physical styles? Read on further…

It’s Quite Logical – HTML Formatting

A logical tag gives some kind of indication about the content but does not dictate the presentation. For e.g. there is a level 1 heading i.e. <H1> – this indicates the highest level heading in the page. However it does not specify whether this should be Arial or Times New Roman, 20 pt or 24 pt. So if you wanted to change the presentation of all H1 tags, you could just change its definition (This can be done by using stylesheets).

Another advantage of logical tags is that they help enforce consistency in your documents. For example, consider the <STRONG> tag. Most browsers render it in bold text. What if you wanted to also have it underlined? Logical styles offer the flexibility of changing the display attributes while making minimum changes to code.

The Physical – HTML Formatting

Logical tags seem to be doing a good job! Then what is the role of physical tags? If you do not want the browser to display the content in any other way than what is in your mind, use physical tags. For e.g. <I> will always display the content in italics, <B> will always display it in bold and so on.

It is however advisable to stick to one kind of tags i.e. physical or logical throughout the document and not mix them up!

Let’s Spice it up a Little with <FONT> Tag

The <FONT> tag is a physical one that describes the display attributes of the text inside. Paste this line in your editor and see what it looks like on the browser.

<FONT FACE="Comic Sans" COLOR="Red">
Is this comical and red and big?
</FONT>

It will look like below:

Is this comical and red and big?

Note: In HTML4, we can use font size attribute to specify the size within HTML. But the “size” attribute for the fonts is not supported in HTML 5. Hence, we have used inline style to make the font size larger to 30px.

Hey, the font is not Comic Sans MS. Let’s make this change and see now.

<FONT FACE="Comic Sans MS" COLOR="Red">
Is this comical and red and big?
</FONT>

It will look like below:

Is this comical and red and big?

This is fine!! Oh that means that if the font face is not specified correctly, the text will be displayed in the default font. So as a security measure, what can we do? Try this out!

<FONT FACE="Comic Sans, Verdana, Arial, Times New Roman" COLOR="Red">
Is this comical and red and big?
</FONT>

If the first specified font is not available on the client machine, the next one from the list is picked up. Now change it to:

<FONT FACE="Comic Sans, Verdana, Arial, Times New Roman" COLOR="#FFDD89">
Is this comical and red and big?
</FONT>

Oh!, that means that there can be standard colors as well as customized ones by using the #RRGGBB values! This RRGGBB attribute can take hexadecimal values between 000000 and FFFFFF – one byte each for each primary color.

Note: It is highly recommended to control the style of elements using CSS centrally though you can control it through HTML.

Basic Formatting Tags in HTML

Below are some of the HTML tags used in basic typography:

Opening Tag	Closing Tag	Description
<H1>	</H1>	Level 1 Heading
<H2>	</H2>	Level 2 Heading
<H3>	</H3>	Level 3 Heading
<H4>	</H4>	Level 4 Heading
<H5>	</H5>	Level 5 Heading
<H6>	</H6>	Level 6 Heading
<P>	</P>	Paragraph
<BLOCKQUOTE>	</BLOCKQUOTE>	Block Quote
<EM>	</EM>	Emphasize
<STRONG>	</STRONG>	Strong
<BR />		Line Break
<HR />		Horizontal Line
<I>	</I>	Italic
<SUP>	</SUP>	Superscript
<SUB>	</SUB>	Subscript
<B>	</B>	Bold
<ABBR>	</ABBR>	Abbreviation or Acronym
<CITE>	</CITE>	Reference
<DFN>	</DFN>	Defining first instance of a term
<ADDRESS>	</ADDRESS>	Address Details
<INS>	</INS>	Inserted Content
<DEL>	</DEL>	Deleted Content
<S>	</S>	Strikethrough

Example:

Finally let us conclude this chapter with a full length example:

The paragraph starts here. This is a strikethrough content to be deleted but kept for reference. Here is a newly inserted content and here is a deleted content.

This example is made with reference to WebNots and move the cursor here on HTML to see the abbreviation of HTML.

WebNots

---