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 Comment

13 Comments

  • 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!

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

  • 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

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

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

  • 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!

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

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

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