HOW TO: Do basic formatting for your website content

16 April, 2010

• design
• formatting
• html

Ismail Koci

Category: Web Design

Formatting your website's content well is important for keeping your website looking good and performing well with SEO. Below, I've outlined some simple coding tips that you can use if your content editor isn't doing what you want it to do.

Headings

Using headings properly is important. Headings are organised by the numbers 1 - 6 with 1 being the top of the pile, and the rest used as sub headings.

Heading 1's should only be used once on a page and should reflect what the entire page is about.

<h1>Heading 1</h1>

Heading 2's can be thought of as the main sub headings for the page. They can be used as many times as necessary with the 'h2' tag

<h2>Heading 2</h2>

Heading 3's can be thought of as sub headings of heading 2's. To create one we use the 'h3' tag.

<h3>Heading 3</h3>

Heading 4's, 5's, and 6's all follow the same method.

Lists

Using bulleted or numbered lists can be useful for reducing content and making a page more visually appealing

To create a bullet point list (or unordered list - ul):

<ul>
  <li>Bullet 1</li>
  <li>Bullet 2</li>
  <li>Bullet 3</li>
</ul>

To create a numbered list (or ordered list - ol):

<ol>
  <li>Numbered 1</li>
  <li>Numbered 2</li>
  <li>Numbered 3</li>
</ol>

Paragraphs

Good use of paragraphs really helps to break up content into manageable pieces. Creating them using code is dead simple with the 'p' tag:

<p>See, I told you it was simple!</p>

To bold text withing a paragraph we use the 'strong' tag:

<p><strong>This text will be bold.</strong>  This text will not.</p>

To italicise text withing a paragraph we use the 'em' tag:

<p><em>This text will be italic.</em>  This text will not.</p>

Conclusion

These tips, while very basic, can help you getting content looking better. However, it's always a good idea to use the default layout that your design company has provided you with where possible.