Blockquote Code Or Pre Tag For Blogger Source Codes

When you write tutorials on how to customize or add a widget or how to customize your blogger template, you need to add source codes with CSS, HTML or Javascript in your posts. When you add the piece of code to your blogger post editor, it will consider it as normal text and will change the < into &lt;  so that the code is not executed by the browser. Although we do not want it to execute the code but we do want it to render the text as it is, so that our visitor could easily understand the code. Another reason we want to add an html tag to the source codes is because we want to apply some css style to it so that it does not look like boring computer code.
Most of the blogger users use blockquote tag for showing their codes on their posts. Although it is widely used by blogger users but it's a wrong way of showing your codes. Blockquote html tag is not meant for showing html codes but for quoting something from other websites. Let's first learn what actually is a blockquote html code.

Blockquote Tag

It is used for marking a piece of text that is copied from another website and used as information piece to better explain your article.You could add few lines or many paragraphs under blockquote tag. Blockquote by default are rendered with right and left indentations. For this reason many blogger users started using it for displaying codes as it looked quite different.

Blockquote Tag For Codes

So, if we should not use blockquote for codes, then what html attribute to use for displaying codes. The answer is Code and Pre tags. But before learning how to use them, let us first learn their basic properties.

Code HTML Tag

A code tag is used to display a piece of computer code as a phrase. The content under code tag is displayed by default in monospace font. However, with the help of css you can override default font family.
For example -
Blogger <code>Source</code> Code
will render
Blogger Source Code

Pre Tag

You may have multiple line spaces and breaks when you read something in wordpad but web browser ignores those lines and spaces. For showing pre formatted text in your post you have to use html pre tags. Spaces and line breaks remain as it is for showing neat tables, forms or source codes. When you put multiple spaces between characters or words, it won't be rendered without spaces.
For example -
I      l  ov   e    Blog   gi  ng.
will be rendered as
I      l  ov   e    Blog   gi  ng.
if it is inside the pre tag.

Combining these two html tags will help us display our codes without line/spaces breaks and in the recommended html tag for showing computer source codes. So, to display your source codes,
<code>
<pre>
<html>
<body>
<div class='roll'>
</div>
<div class='met'>
</div>
</body>
</html>
</pre>
</code>

Code

<html>

<body>

<div class='roll'>

</div>

<div class='met'>

</div>

</body>

</html>


Almost all the top sites on web designing and web tutorials use this format for showing html codes on their website. So start using code and pre tags and if you have any question, feel free to comment.

"1 comment"+ Add Yours

  1. I checked it out Salman, but blogger didn't allow be to embed a piece of HTML content as it is. part-time volunteer at web access applciation OSIpage, http://www.osipage.com

    ReplyDelete