Web Design: HTML and CSS Best Practices II

6 September 2010

Character Encoding and Special symbols

This post is the Part 2 of the arcticle Web Design: HTML and CSS Best Practices. You may read Web Design: HTML and CSS Best Practices Part 1 to found out more about semantic layout.

First thing to declare in tag head is the character encoding. We use the general standard UTF-8.
And don’t forget about the little detail: tag title has to be declared after the character encoding. Thus the browser won’t have to flip a coin to choose the encoding for the title and to surprise you.

All the special symbols should written with the & and ; that surround short definitions of the symbols. Other special symbols can be found in ASCII table of character codes.

Validation

Feeling desperate when the markup is crashing and W3C Validator doesn’t show you the green light? Forget about this experience – close all the tags and keep all the indents while writing properties of the element.

No good:

</pre>
<ul>
	<li>Your first statement</li>
	<li>Some new text here.</li>
	<li>You get the idea.

Much better:

</pre>
<ul>
	<li>Some text here.</li>
	<li>Some new text here.</li>
	<li>You get the idea.</li>
</ul>
<pre>

Study documentation provided by W3C Validation Service and it’ll save a lot of time.

Tags, Priority and Some Order

It’s a common practice to use tag h1 for the Title of the website in its header. As an addition many developers prefer to wrap it in a link to the website home page with a tags.

Majority of the browsers will display it all right but from the technical point of view it’s done wrong. As a matter of fact a tag is displayed as inline element whereas h1 tag is the block element. It’s a bad practice to use block elements inside the inline ones.

Bad practice

</pre>
<h1>Really Bad Idea</h1>
<pre>


Good practice

</pre>
<h1><a href="”/index.html”">Nice</a></h1>
<pre>

Shorthand Properties Benefits

There are some variants for properties description but some of them have certain benefits.
For example see this one:

margin:5px 0 4px 10px;

This code is much better than the following one:

margin-top:5px;
margin-right:0;
margin-bottom:4px;
margin-left:10px;

Shorthand usage let you decrease the number of code lines and enhance its readability.
Let’s take a look at the next example:

#test {
margin-top: 2px;
margin-right: 3px;
margin-bottom: 5px;
margin-left: 9px;
font-weight:bold;
font-size:12px;
line-height:14px;
font-family:Arial, Verdana, sans-serif;
border-width: 1px;
border-style: solid;
border-color: #000000;
background-color:#fff;
background-image:url(bg.gif);
background-repeat:no-repeat;
background-position:0 15px;
}

This code is too difficult to read and edit. Shorthand will cut out different garbage and make editing much easier.

#test {
margin: 2px 3px 5px 9px;
font: bold 12px/14px Arial, Verdana, sans-serif;
border: 1px solid #000;
background: #fff url(bg.gif) 0 15px no-repeat;
}

That’s all for today. See more tips and examples in the next posts.

Post is provided by the CMS Team specializing in rapid website creation with CMS WordPress. CMS developers develop websites for E-commerce, small business promotion, blogs, companies’ business cards, live journals.

For more information please visit CMS Development Team page and CMS Portfolio.

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