CODEWITHSUNDEEP
html
jeffkmeng
jeffkmeng

Reputation: 879

How to indent html code examples

I have a website or a html page and I want to indent my code for my visitors to see. For example:

<html>
<head>
</head>
<body>
<pre>
&lt;html>
&lt;body>
&lt;p>
hi
&lt;/p>
&lt;/body>
</pre>
</body>
</html>

In html, is there a way to indent a block code without using a lot of &nbsp ; , like the <blockquote> tag. this way, I can use something like this:

<html>
<head> &lt/head> <body>
<p> Hi
</p>
</body>
</html> Using:

<blockquote>
&lt;html>
<blockquote>
&lt;head>
&lt/head>
&lt;body>
<blockquote>
&lt;p>
<blockquote>
Hi
</blockquote>
&lt;/p>
</blockquote>
&lt;/body>
</blockquote>
&lt;/html>

I was wondering if there was a better way to indent blocks of code. If not, I was wondering if there was a way to use css to change it so there is no line on the side and it looks just link a normal indent to the user.

Upvotes: 4

Views: 3926

Answers (2)

p1xel
p1xel

Reputation: 304

You can use the pre tags to make preformatted text which can be indented via normal spaces/tabs.

<pre>
    &lt;html>
        &lt;head>&lt;/head>&lt;body>
            &lt;p>
                Hi
            &lt;/p>
        &lt;/body>
    &lt;/html>
</pre>

JSFiddle

Upvotes: 2

Alfred
Alfred

Reputation: 21396

You may do it with CSS. The text-indent property specifies the indentation of the first line in a text-block. Try;

blockquote  {
    text-indent: 50px;//define indent in pixels
}

Here is a demo http://www.w3schools.com/cssref/tryit.asp?filename=trycss_text-indent

Upvotes: 0

Related Questions