5 Necessary HTML Tags for Blogs to Highlight Post or Page Content

This video tutorial explains about how to highlight our post and page content in content box. In order to give more attraction towards your post you have to use some tags inside your post. In this post I am going to share 5 frequently used html tags that can help you to style your post area and highlight your important point which is available inside your post and page.

In your wordpress admin while you are adding a new post or page. We have to modes to edit content one is visual mode another one is html mode. Normally we are using visual mode to edit our content the following 5 html tags are added in your html mode.

I have listed 5 html tags as follows

  1. Blockquote
  2. Blockquote right
  3. Blockquote left
  4. Pre
  5. Code

Blockquote html Tag

All bloggers are using blockquote inside the post. To use this tag you can use visual mode and also html mode. Select which part you want to highlight then click “ icon in visual mode. In html mode after selecting the content click b-quote icon in html mode.

Example
Thesis  theme customization by Fourblogger also we do Blogspot to wordpress Migration with 303 redirection.

Fourblogger, Jan 2010

Syntax
<blockquote> your text here  </blockquote>

Blockqoute Right html Tag

To use blockquote right you should goto html mode. By using this html tag you can highlight your content in the right side post or page. It looks like the below image. You can also specify the width and height with help of custom.css.

Example
Thesis  theme customization by Fourblogger also we do Blogspot to wordpress Migration with 303 redirection.

Syntax
<blockquote class=”right”> your text here</blockquote>

Blockquote Left html Tag

This html tag is similar to blockquoue right. By using this tag you can highlight your content left side of the post or page. Use html mode to use this tag. These two tags we can use inside a paragraph also.

Example
Thesis  theme customization by Fourblogger also we do Blogspot to wordpress Migration with 303 redirection.

Syntax
<blockquote class=”left”> your text here</blockquote>


Pre html Tag

Pre html tag is mainly used to highlight coding when you place some php code inside the post. We shoudn’t use blockquote for this because when you copy and paste codes from wordpad or notepad some symbol may changed inside the blockquote or post. So we must use pre html tag to place php, javascript and html codes inside the post. To use pre goto html mode and use the following syntax.

Example
Thesis  theme customization by Fourblogger also we do Blogspot to wordpress Migration with 303 redirection.

Syntax
<pre> your text here</pre>

Code html Tag

We can use code html tag to highlight each word in the paragraph. This tag highlight the word with background shadow. To use this tag you should use html mode. Just select which part you want to highlight and click the code icon available in the top of the post editor in html mode.

Example
Thesis  theme customization by Fourblogger also we do Blogspot to wordpress Migration with 303 redirection.

Syntax
<code> your txet here </code>

These are the 5 necessary html tags that needed for a blogger to highlight their thoughts.  The below image has all the five tags.

html tags inside post

post content with HTML tags

In the next post I will show you how to style these tag area, font and background by using custom.css in thesis theme. Use these html tags and experience the difference. For more checkout our all Thesis theme tutorials..

{ 9 comments… add one }

Leave a Comment

  • Tutorijali HDonWEB January 8, 2010, 2:18 AM

    Nice post :-)

    Reply
    • Pascal January 8, 2010, 6:42 AM

      Thanks tutorijali.

      Reply
  • shivaraj January 8, 2010, 7:45 PM

    awesome Blog, Especially the thesis section If i buy thesis theme i will make design like this only .
    :)

    Reply
    • Pascal January 8, 2010, 11:09 PM

      Thanks friend. Anyway we have not designed this blog as per our wish. Just using to create tutorials. When we complete design it will be great looking one. If you have any idea of buying thesis theme, just contact us. I am ready to do the basic customizations for you myself for free, if you can buy it through our affiliate link. :)

      Reply
  • abhi January 8, 2010, 9:43 PM

    It is good to see but code is better than pre.

    Reply
    • Pascal January 8, 2010, 10:52 PM

      Glad you liked this.

      Reply
  • chandan January 10, 2010, 10:14 AM

    Thank you for this kind of valuable information.

    Reply
    • Pascal January 10, 2010, 3:31 PM

      You can get more thesis theme customization tutorials here.

      Reply
  • Mike Helton August 20, 2010, 5:34 PM

    This is exactly what I was looking for.

    I knew there was a way to do this in my post area but I didn’t know how until now.

    Thanks,
    Mike

    Reply