HTML, CSS, DIV, and Tab

Background

Months ago I was looking through someone’s code and saw something that I knew could make my HTML a lot cleaner.

 

HTML

Original Code

Image

Code


<p style="padding-left: 40px;">Jack and Jill went up the hill</p>
<p style="padding-left: 40px;">To fetch a pail of water</p>
<p style="padding-left: 40px;">Jack fell down and broke his crown</p>
<p style="padding-left: 40px;">And Jill came tumbling after</p>

Revised Code

Image

Code


<div class='tab'>

Jack and Jill went up the hill
To fetch a pail of water
Jack fell down and broke his crown
And Jill came tumbling after

</div>

Summary

Quick Summary.

Using WordPress editor, when you use the tab key you will get HTML code with quite a bit of paragraph padded left.

Using the tab key numerous times, you will get the desired effect.

But, that desired effect creates a block of HTML code that is a bit more work to keep up with.

You are a bit better served if you plan ahead and use CSS.

Specifically, using the div tag and specifying tab as its class.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s