Web Design Resources, CSS Tricks, Articles, Tutorials and more

Entries (RSS)
Comments (RSS)

Coding Clean and Semantic Templates

In: CSS| Web Design

24 Jan 2010

If you are the guy who uses

tag for everything, this post is for you. It focuses on how you can write clean HTML code by using semantic markups and minimize the use of

tag. Have you ever edited someone’s templates, don’t those messy tags drive you crazy? Not only writing clean templates can benefit yourself, but your team as well. It will save you time when you have to debug and edit (particularly the large projects).

1. Remove The Unnecessary

Tags

I’ve seen a lot of people wrap a

tag around the

or

tag that you don’t need? You can achieve the same result by applying the CSS rules to the selector.

Example 1:

The example below shows how you can drop the

tag and declare the styling to the form selector.

coding1

Example 2:

Sometimes we wrap the content with an extra

tag strictly for spacing purposes. The example on the left uses a

to create margin space in between the boxes. But if each box has a heading (ie.

), we can simply apply the margin space to the h4 selector and drop the extra
tag.

2. Use Semantic Markups

You should always use semantic markups to code HTML documents (ie.

for headings,
for paragraph text, and
for list items). So, even when the CSS is not presented nor supported, your document still makes sense.

Example:

The image below compares the rendering differences between
markups and semantic markups with no css supported.

3. Minimize The Use of
Tags

Have you seen the messy templates where
tags are everywhere and they drive you crazy? Have you ever missed a closing

tag or have an extra opening
tag messing up the entire layout? I’m sure most developers have experienced it before. So, you should always minimize the use of
tag if possible. It will make debugging and editing easier.

Example 1:

Instead of using
tag for breadcrumb navigation, it makes more sense to use
tag.

Example 2:

The following example shows how I can use CSS to cut down two
tags by replacing with one tag. They both produce the same layout.

4. Format (Indent) Your Code

You should always format your source code (ie. indent your nested elements) so it is easier to read and debug. If you have Adobe Dreamweaver, you can easily format the code by using the Commands > Apply Source Formatting (from the application menu).

5. Comment The Closing

Tags

When coding for platform templates (ie. WordPress themes), the template is most likely splitted into several files: index.php, header.php, sidebar.php, and footer.php. Hence, you should always make a comment for the closing

tags so you won’t get lost. For example, when I see

, I know it is the closing tag for
.

Example:

I usually insert a HTML comment tag right after the closing

tag. I use the forward slash to indicate it is the closing tag.

Share and Enjoy:

Tags: Templates

1 Response to Coding Clean and Semantic Templates

Alex

April 5th, 2010 at 11:06 am

……

Бизнесмен из Вас отличный…

Comment Form

Your Name (required)

Your Email (required)

Your URL

Search

User Online

5 Users Online

Users: 5 Guests

Recent Posts

How to Find Your Targeted Market on Twitter

Getting More Followers On Twitter

How to Make Backlinks

How to Create Back Links in an Efficient Way

Logos in Various Forms and Styles

10 Popular Social Media Networks for SEO

Success of E-commerce Website Design

Building a Blog site in few Simple Steps

Semantic HTML and Search Engine Optimization

Some Really Useful Applications for WordPress

Importance of a Good Web Design for Websites

Banner Design Success Techniques

Can I Use a Free SSL Certificate for my HTTPs Pages?

Designing Cutting Edge Web Sites

20 Email Productivity Tips To Become an Email Master

Archives

February 2010 (31)

January 2010 (36)

December 2009 (35)

Categories

CSS (13)

Free Fonts (3)

Free Icons (10)

Joomla (3)

Photoshop (8)

PHP (5)

Plugins (7)

SEO (35)

Showcase (5)

Web Design (39)

Wordpress (9)