Web Development

Formatting HTML content

Formatting  HTML content is the 5th section of Beginner’s Guide to HTML.

Okay! Up until now we know how to create a basic web page. But without including formatted text on your content, it will be bit boring to read.

Text Formatting Tags

There are times you need to include different format of text blocks in your paragraphs. Following paragraph demonstrate few scenarios of text formatting which can be commonly seen.

To highlight a specific word on your paragraph which needs much attention we can bold it. This means exaggeration of words in a text with the same font but make it darker than the surrounding text. We use italics to show alternate voice or mood and those text chunks displays as somewhat handwriting. Didn’t you get what I said?  Today is 6th Aug 2014, CO2 level still the same. “We can use all in one”.

So in the above paragraph, we used several formatted text chunks. See how it was written in HTML.

[code language=”html”]

To highlight a specific word on your paragraph which needs much attention we can bold it. This means exaggeration of words in a text with the same font but make it darker than the surrounding text. We use italics to show alternate voice or mood and those text chunks displays as somewhat handwriting. Didn’t you get what I said?  Today is 6th Aug 2014, CO2 level still the same. “We can use all in one”.

[/code]

Keep mind the following facts when you format your text chunks.

  • Sometimes you might see tag doing the same function and tag doing the same function.
  • Using the tag you can do the same as decreasing font size.
  • tag do the same function as tag. Underlining the text.

So let’s try to identify each and every text formatting tags we used in the example.

Bold Important
Italics (shows alternate voice or mood) Emphasized
Smaller
Subscripted Superscripted
Inserted text (underlined) Deleted text (strike-through)
Marked (highlighted)

Computer Output Tags

There are times you need to show computer language codes on your document content. So HTML facilities for this feature too. But don’t try to rely on them if you need to represent professional looking language codes.

[code language=”html”]
If(checkValue){
return true;
}else{
return false;
}
[/code]

Following is how it looks like.

If(checkValue){
return true;
}else{
return false;
}

Keep mind the following facts when you format your text chunks.

  •  tag or preformatted tag is widely used to represent programming codes as it preserves line breaks and white spaces. So the reader can clearly see the code and can easily understand.

You can also use following computer output tags, but be careful some browsers may not render it correctly.

computer code
keyboard text
sample computer code
a variable

Other Useful Formatting Tags

You may find following tags sounds very interesting to tryout.

              Defines an abbreviation or acronym

[code language="html"] Can I get this ASAP;
[/code]
Can I get this ASAP

In the attribute section can you remember we introduced the title attribute? Move your mouse over to the word ASAP and it will display the abbreviation as a tooltip.


       Defines contact information for the author/owner of a document

[code language="html"]
Let’s Design n Develop
Email : admin@dnd.com
Address: No 111, India
Phone: +91 0113 34 56 78
[/code]
Let’s Design n Develop
Email : admin@dnd.com
Address: No 111, India
Phone: +91 0113 34 56 78

Anyway you can do the same using italic tag or emphasize tag.

       Defines the text direction
Do you know that Hebrew is written from right to left? With that concept we can present our text in right to left and write it easily in normal way left to right if the browser supports bi-directional override (bdo).

[code language="html"]
Hebrew is written from right to left.

[/code]
.tfel ot thgir morf nettirw si werbeH


       Defines a section that is quoted from another source.

Browsers usually blowup block quoted elements. So the reader can easily identify from other text content, it is a large part of quoted text taken from somewhere else.

Here is what Wikipedia saying about block quotes :

A block quotation is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation. Block quotations are used for the long quotation.

[code language="html"] Here is what Wikipedia saying about block quotes :

A block quotation is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation. Block quotations are used for the long quotation.

[/code]

       Defines an inline short quotation
Browsers do something little lesser blowup than block quotes as it is a short quotation.

Brad Pitt the famous actor once said
By nature, I keep moving. My theory is, be the shark. You've just got to keep moving. You can't stop.
[code language="html"] Brad Pitt the famous actor once said
By nature, I keep moving. My theory is, be the shark. You've just got to keep moving. You can't stop.
[/code]

So those are the few formatting tags we used commonly in creating web content. Try to workout the given samples and then we can move onto creating comments.

 

HTML Comments

After creating, structuring, organizing and formatting your HTML code it is necessary to keep them in a maintainable way. Because when you work as a team developing the web content, you may not be the only one looking at your HTML code. So for the easiness for your team members, try to mention what you tried to do from your code always. That’s where the comments come into action.  Comments are not displayed on your browser. But when someone opens the HTML file thorough a text editor he can easily see your comments and then by understand what’s happening in the code by reading it. So he not need to go through the entire document wasting time.

 All you write inside the become a comment on your document. It can be either text or elements.

[code language="html"]
[/code]

See the difference of characters in starting of the comment and ending of the comment.  I mean the exclamation point.

[code language="html"]

This is not a comment


[/code]

As comments not display in the browser, you can use it;

  • To place notifications and reminders for yourself.
  • To tryout different coding options without deleting the code. We called this as debugging HTML. (Commenting HTML lines of code one at a time and search for the error)
  • To mention what’s happening in the code.

So try to use comments always on your code. Because when you looked at a year or later you might confuse at your own code what’s happening in there.


So in this section we learned about having different formatting text chunks. And most importantly we now know how to keep our codes in a maintainable way. In the next section we’ll introduce how to be link with each other.

WHAT’S NEXT?

Let’s learn HTML Hyperlinks.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Reply

12 Comments on "Formatting HTML content"

Notify of
avatar
Sort by:   newest | oldest | most voted
Esperanza
Guest

Greetings! I’ve been reading your web site
for a long time now and finally got the courage to go
ahead and give youu a shout out from Dallas Texas!

Just wanted to say keep up the great work!

Elias
Guest

I really love your blog.. Excellent colors & theme.

Leonora Gatlin
Guest

Greetings! Very helpful ɑdvice within this post!
It is the little changes that produсe the largest changes.
Thanks a lot for sharing!

Torri
Guest

I think this is among the most significant info for me.
Annd i am glad reading your article. Butt should remark on some
general things, The web site style is perfect, the articles
is really excellent : D. Good job, cheers

Kimberly Huggard
Guest

I’m excited to discover this web site. I need to to
thank you for ones time for this particularly fantastic
read!! I definitely enjoyed every little bit of it and i also have you saved to fav to check
out new things on your blog.

Geoffrey
Guest

Hi to all, since I am truly keen of readijg this blog’s post to be updated on a regular
basis. It consists of fastidios material.

Irwin
Guest

These are in fact fantastic ideas in about blogging.

You have touched some fastidious points here. Any wway keep up
wrinting.

Dann
Guest

I believe this iss terrific info for me and I am pleased reviewing your write-up.

But truly intend to mention on soje general things. Thee
internet site design is wonderful, the post iis actuually excellent.:-D Goood task, cheers!

bernard
Guest

I got this web site from my pal who shared with me on the topic of this website and at the
moment this time I am visiting this site and reading very informative posts here.

Maryanne
Guest

Greetings! Very helpful advice within this article!
It’s the little changes that make the most significant
changes. Many thanks for sharing!

Leonor
Guest

For hottest news you have to visit world wide web and on web I found this website as a best web page for latest updates.

Kathie
Guest

Hi there mates, nice article and nice arguments commented here, I am truly enjoying by these.

wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW