Web Design: HTML and CSS Best Practices I

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 get acquainted with What Beautiful HTML Code Looks Like and here we’ll give you the best tips to create beautiful HTML code.

The semantic layout is the skillful choice of the HTML elements for the document structure description according to the meaning and the purpose of those elements.

The simple 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 on the right road!

Remember: semantic layout is not some sort of magic and it won’t let makeup pages 8 times faster and make IE6 bugs disappear. This approach will take you more time and thinking about the web 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:

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

It does work but it should look like a list!

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

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 handles semantic layout, CSS for the site design. Don’t mix them up!
Use elements only for their primary purpose: don’t use Heading (h1, h2,…) just to get the larger font.

Advantages of the Semantic Layout

– Increase the accessibility. Your 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 weigh less.

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