html

HOW TO: Do basic formatting for your website content

16 April, 2010

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.

0 Comment(s)

What is HTML and CSS?

18 March, 2010

Ismail Koci

Category: Web Design

Building a website takes a lot of work. There is much going on behind the scenes, some of which may sound like an alien language to people not completely versed in web technology. The acronyms HTML and CSS could be some of those things, so I've broken them down into simplified definitions minus all the tech speak.

What does that stand for? Hypertext Markup Language. So what does that mean? Basically, HTML is a code language which allows a document to be read by your web browser.

0 Comment(s)

Zen Coding - Super quick HTML!

24 November, 2009

Ismail Koci

Category: Web Design

Wow, cool! A new tool is on the horizon for us designers / front end developers. An exciting tool! It's called Zen Coding, and basically what it does is dramatically speeds up the construction of HTML code by using CSS-like selector syntax.

2 Comment(s)

CSS Descendant Selectors

5 May, 2009

Ismail Koci

Category: Web Design

A major, but often overlooked component of efficient CSS coding is the use of "descendant selectors". Let me show you what I mean with a quick example:

Here is some simple HTML containing paragraphs in 3 different locations.

html sample

Let's suppose these paragraphs will have very similar styles, with some minor differences. I've quite often come across style sheets that will use 3 different declarations for each paragraph, with repeated information.

0 Comment(s)