HTML Text Formatting Tutorial

Content Markup

HTML is nothing but a markup language using tags. 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

Paste this – “This is <EM>emphasized text</EM> and this is <I>italicized text</I>” – in your text editor and see what it looks like in 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

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

Related:  How to Add and Customize Text Element in Weebly?

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 Exercises

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.

HTML Formatting Tags

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 in 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?

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.

Related:  How to Create Feedburner Feed on Own Custom Subdomain URL?

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 TagClosing TagDescription
<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.

Chapter 1: What is HTML?
Chapter 2: Creating a Simple Webpage
Chapter 3: Using Formatting Tags
Chapter 4: Creating Listed Content
Chapter 5: Creating and Customizing Tables
Chapter 6: Linking Text
Chapter 7: Email Links

Chapter 8: Image Maps
Chapter 9: Link Attributes
Chapter 10: Using Images in HTML
Chapter 11 : Creating HTML Forms
Chapter 12: Elements of HTML Form
Chapter 13: HTML Frames
Chapter 14: Embedding Media in HTML5

Related:  How to Add Accordion Slider in Free Weebly Site?

Download all chapters in a PDF ebook format.

Recommended Articles:

Leave a Comment