A shortcut to text formatting in HTML

It’s no easy task to learn HTML, CSS, and enough of their different elements and attributes to create and maintain a satisfying personal website. Sometimes a miniscule text-formatting issue can cause more strife than complex coding problems — if only because the task seems like it should be infuriatingly simple. In trying to stylistically indent some lines of a poem on my own page, for example, I was hitting a brick wall as far as using either external or in-line CSS to add unorthodox spacing to the poem’s lines. If you’re facing the same or similar issue’s, there’s a specific HTML tag you should make yourself aware of.

The tag is the <pre> tag, whose abbreviation stands for the word “preformatted.” Using the <pre> tag correctly allows web writers and designers to input web-ready text that will appear on a browser the same way it does in your basic word-processor — spaces, indentation, capitalization, italics, etc. all included.

The benefits of the <pre> tag are obvious — inputing text that will render predictably on a web page exempts the page’s creator from having to apply to a phrase what could be a great number of CSS properties in order to achieve a fairly simple goal. With <pre>, you can format your text in a plain-text word-processor — or even in a coding program such as Dreamweaver — and stick it online with minimal alterations.

Use of the tag is easy. Simply add the opening tag <pre> before the text that you’ve already formatted and, as with almost any tag, make sure to include a </pre> at the end of your formatted selection. The results should be instant — and incredibly gratifying.

– Cathy


~ by cathybutchy on December 13, 2011.

%d bloggers like this: