derkarl.org

Indenting in HTML

published 2014-01-03 20:34:16 UTC by charles

I’ve noticed lot of visitors that wind up here are actually looking for how to indent paragraphs in HTML.

The Problem

You’re looking for a way to indent the first line of paragraphs such that they look like a real printed document.

Old Stupid Solution

You can Prefix the paragraph with a bunch of  s. This will work, but it has the silly side effect of allowing the viewer to select those spaces:

    In this paragraph, I prefix this line with 4  s. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque dignissim imperdiet nisi. Nam vel est. Maecenas rutrum placerat leo. Donec sem ante, dictum at, mattis quis, fermentum ac, velit.

Modern Sensible Solution

The modern correct solution is to use Cascading Style Sheets to specify that you want all <p>aragraphs to have an indentation.

Put this line into your stylesheet:

p
{
    text-indent: 1cm;
}

The result looks like this:

Now all

s are indented the one centimeter… assuming that the reader’s computer’s monitor DPI is correctly configured. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque dignissim imperdiet nisi. Nam vel est. Maecenas rutrum placerat leo. Donec sem ante, dictum at, mattis quis, fermentum ac, velit.

A Complete Example

<html>
    <head>
        <style type="text/css">
            p
            {
                text-indent: 1cm;
            }
        </style>
    </head>
    <body>
        <p>
            Hey look, this paragraph is indented!
        </p>
    </body>
</html>

Conclusion

If you don’t know about Stylesheets, you should learn about them right away if you intend to do anything at all in HTML. Not only do they let you do lots of nice things to a document to make it pretty, but they make filesizes smaller such that your page loads faster. Not only that, but as modern web browsers are designed for them, less CPU power is required to render them.

The documentation for text-indent is on w3.org for example.

Furthermore, I must mention that writing web browsers is really hard. So, even if a web page looks fine to you, it may not look fine to everyone else. The best way to ensure that everyone will be able to view your page as intended now and in the future is to verify that it validates as HTML with the W3C’s Markup Validation Service.

leave comment

Comments

no comments