Web Design: HTML and CSS Best Practices II

Character Encoding and Special symbols

This post is Part 2 of the article 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.

The first thing to declare in the 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 be written with the & and; that surround short definitions of the symbols. We can find other special symbols in the 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 can 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 tag.

Most of the browsers will display it all right but from the technical point of view, it’s done wrong. A tag is displayed as an inline element whereas the h1 tag is the block element. It’s a dangerous practice to use block elements inside the inline ones.

Dangerous 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 lets you decrease the number of code lines and enhance its readability.
Let’s 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 the CMS Development Team page and CMS Portfolio.