Web Design: HTML and CSS Best Practices I

27 August 2010

Semantic Layout

Today we start a series of HTML and CSS guidelines that we consider essential for every website developer and a good style in web development. You might already got acquainted with What Beautiful HTML Code Looks Like and here we’ll give you best tips to create beautiful HTML code.

Semantic layout is the skilful choice of the HTML elements for the document structure description according to the meaning and the purpose of those elements.

Easy way to check whether you follow semantic layout guidelines is to turn off external files (CSS, JavaScript) and even disable images – you’ll see just the content. Can you find headings, key points and see a bit of a structure? Yes? That means you are heading the right road!

Remember: semantic layout is not some sort of magic and it won’t let you to makeup pages 8 times faster and make IE6 bugs disappear. This approach will take you more time and thinking about the sweb page structure but it’s totally worth it.

Semantic Layout Elements Usage

Most popular semantic HTML elements:

  • Headings (h1 – h6)
  • Paragraphs (p)
  • Lists (ul, ol)
  • Logical emphasis (strong , em)
  • Labels (label)

Let’s take a look at a typical example:

<div id="”menu”"><a href="”#”">Dollar</a> <a href="”#”">Euro</a> <a href="”#”">Pound</a></div>

It does work but it should look like a list!

<ul id="”menu”">
	<li><a href="”#”"> Dollar </a></li>
	<li><a href="”#”"> Euro </a></li>
	<li><a href="”#”"> Pound </a></li>

Delimit Semantics and Document Design

It’s important to delimit content embedded in markup elements and its design that is described in CSS files.
Always keep in mind: HTML is responsible for semantic layout, CSS for the site design. Don’t mix them up!
Use elements only for their main purpose: don’t use Heding (h1, h2,…) just to get larger font.

Advantages of the Semantic Layout

– Increase of the accessibility. You website pages won’t lose their structure even if CSS is turn off.

– Semantic layout is critical for Search Engine Optimization as search engines will easily understand the significance of the content components and which text really matters for every page.

– Decrease of the website support and further re-design expenses and time.

– Uploading time enhancement as the web pages weight less.

Further reading: Web Design: HTML and CSS Best Practices Part 2 that includes coding, validation and tags.

Your email address will not be published. Required fields are marked *