Examples and Tips for Great HTML/CSS Formatting

An overlooked aspect of websites is the formatting of HTML and CSS documents. This affects validation, SEO, and visual ease of use. Visual ease of use is the last thing most authors tend to keep in mind, but it’s still very important. If you’re building a template for a client, or to sell on ThemeForest, it is important that it’s visually formatted properly. Here are some examples of well formatted HTML and CSS.

HTML

Use the Strict DOCTYPE (DTD) whenever possible. If you’re beginning a new project, don’t use Transitional. You won’t be using tables for layout; so Transitional isn’t necessary, and the Strict DTD is up to standards.

HTML Template DTD

You’ll notice that I’ve moved the meta http-equiv charset above the title. The title should go above everything else and W3C even puts this meta tag below the title in their example template. This meta tag however, should be above the title so that the browser knows what charset it’s working with before reading any other content to be displayed (such as the title).

HTML Template charset

Encoded Characters

Make sure you use HTML encoded characters, including URL’s.

HTML Character Encoding

Alt Attributes

Make sure you’re using the “alt” tag in your images. The “alt” tag stands for alternative text and is displayed if your image is unavailable; it’s used by search engines for image descriptions and accessibility.

HTML Image Alt Tag

Properly Nest Tags

Make sure your tags are properly nested. Inline elements, for things like links, should go within block elements – such as headings.

HTML Nesting Tags

Tags should also be closed in the order they are opened as well as contained properly.

HTML Nesting Tags

External Assets

Make sure that your CSS and JavaScript is external. Try to keep your HTML files simple and free of any unnecessary code. For JavaScript, it isn’t as big of a deal – especially for a small block of code – but if it’s becoming complicated, just put it in an external .js file. Also make sure that your JavaScript files are linked after your CSS files. You want your styles loading before your JavaScript runs. * Manager’s Note: If possible, consider placing your Javascript file just before the closing body tag.

External CSS and JavaScript

Indentation

Indent your markup so that it’s easy to navigate and read. When other people look over your files, it can be much more work to navigate through markup that has no indentation. Your goal should be to make it as easy as possible for whoever may be editing or reading your markup. This is a major pet peeve of mine as I typically find myself spending far too much time fixing poorly formatted markup from someone else’s project.

Indented HTML Markup

Commenting

Use HTML comments to indicate important notes, sections, or the end of an element. At first, the extra comments appear to clutter the basic markup, but once you load in all of the content, these comments can be a major time saver and help others who may edit the files later.

HTML Comments

Markup Order

Place your markup in a logical order in relation to the design. If your sidebar is on the right and your main content is on the left in your layout, put the markup in that order.

Logical markup location

Validate Your Files

Validate your files! Okay, this isn’t a formatting tip but this seems to be forgotten far too often. A store doesn’t sell products without quality assurance; so why would you sell your work (the files you created) without double checking to make sure you’ve done it correctly?

HTML Validation

CSS

Just as you would with HTML, use CSS comments to indicate important notes and sections. You might also want to separate your CSS pertaining to layout from your typography. For simple sites, this may not be necessary, but when you begin getting into more complicated sites, it can be a huge time saver.

CSS Comments

There are several ways to format CSS; much of it comes down to preference. When I work with CSS files, I use the majority of the width of my screen – so I prefer single-line formatting. Many others prefer multi-line or a cross between the two. Many applications have built in features or plugins that allow you to change the formatting of existing CSS documents with relative ease. Here are some examples of the formatting types which also include proper indentation.

Single-Line

This is single line formatting (what I prefer). When you use shorthand CSS this method of formatting works out quite nicely I think.

Single line CSS

Multi-Line

This is multi-line formatting.

Multi-line CSS

Mixed

This is a cross between multi-line and single line formatting. The short rules are on a single line while the long rules are on multiple lines.

Mixed line CSS

Short-Hand CSS

Use shorthand CSS to keep your CSS slim and clean. The first example is normal CSS and as you can tell, it takes up a lot of space. The second example is the shorthand version of the first CSS example. Then there are three more examples showing different options. The first, on line 77, means a margin of 10px on all sides. The second, on line 78, means a margin of 10px on the top and bottom but 15px on the left and right. The last one, on line 79, means a margin of 10px on top, 15px on the left and the right, then 12px on the bottom. This rule can be applied to many more CSS rules as well. If you’re not familiar with it, set aside some time and learn, because it will greatly reduce your CSS bloat and work time. I also want to point out that if you have a value of “0px”, you don’t need to include “px”, just use “0″.

CSS Shorthand

Conclusion

The key to beautifully formatted markup is organization. Just like you would organize the files in an office, for school or for something else, you should organize the markup so that you can find and edit sections quickly.

Use visual formatting as well as logical separation, placement, and naming. This way, the work you do will be high quality and ready for anyone else. Your clients and buyers will thank you – and you’ll be thankful yourself. Also, remember to validate your files!



58

Comments
  • AnotherDeveloper says:

    I stumbled upon this page via FreshNews.org. After reading the hints and comments, I felt necessary to add my two cents.

    Doctype: I would agree with this if everyone used the latest browsers. Since this is not the case, I would not recommend it. IE is the worst browser out there, and even it can’t handle strict in V6 without auto-adjusting itself.

    The h1 and p tags used in example defeat the purpose of CSS. Never use HTML for styling under any circumstance.

    Style sheets and scripts must ALWAYS be external. Even a one line function takes rendering time away. So the remark about “it’s not a big deal” is false.

    CSS should never use multi-line formatting. While it’s easier to read, it adds time to pre-render. Even a 0.01 second increase is good.
    (note: small JavaScript functions should also be written as small as possible.)

    The alt attribute comment is redundant. To pass validation, this is now required for image tags, especially using the strict doc type.

    DO NOT USE id specific CSS (#) as this increases rendering time. CSS is built on the foundation as adding a layer on top of HTML. By using id specific classes, time is added to “join” the two together.
    You may work around this by using two options:
    -Inline style: if only ONE CSS attribute is changed, use this AND the base class.
    -Create a specific base class
    I’m often stunned by those who use id specific base classes only to find a near identical one a few lines below it.

    When using UL/OL tags, write them as one line. Yes, it’s more difficult to read, but it renders much faster. In fact, use one lines as much as possible.

    Don’t dismiss tables simply because CSS is there. In some cases, tables are faster than CSS styling. ALWAYS use a width and height attribute with tables.

    NEVER add comments in an HTML page. Create a text document titled “Comments.txt” and put them there. Your web pages are bundled anyway, so a text file isn’t going to hurt anything. Poster said server comments are okay, and I agree.

    Markup Order: several posters already took care of this.

    Personal note: Long ago, a programming instructor once told me if you think of writing code as costing $10 per character, you’ll find you can save quite a bit of money when writing a project.

    That stands especially for web designers. White space and character returns are COSTLY to a web engine, regardless what version. Remember, many engines retain overhead to remain backward compatible.

    While this can’t be completely done while retaining readability, use this tactic whenever possible, even at the cost of readability in some cases.

    For example: ALL lists should be written as:
    ul-li-blah-/li-li-blah-/li-li-blah-/li-/ul

    This applies for small div segments, small tables (this will impress you), etc.

    In this world of Flash, CSS, and embedded objects, every 0.01 second is worth it.

    I can’t really agree this was a “nice” article, but it’s a good start. Rework it, for the sake of web programmers (both experienced and new) everywhere.
    :)

  • xmdsys says:

    @ Thibaut Allender

    xHTML vs HTML: Using xHTML vs using HTML can be disputed and all in all, in the end, it comes down to what you want to use (unless you’re working for someone like Amazon or Google). I’m not going to cover why I use xHTML vs HTML but I will say this, xHTML will be rendered just like HTML in all modern browsers so I really think people should stop running around and telling everyone they are wrong for using xHTML.

    HTML Comments: Yes, comments in HTML will make your files slightly bigger but if you’re actually concerned about file size you can just minify your HTML files and remove the comments. Heck, you could do that automatically using PHP. If you know how to use server side comments, then great, use them. What I want to point out is that when you build templates for sale on websites like ThemeForest or that you know someone else will be taking over please USE comments. Finding the appropriate closing div can be a pain and a waste of time.

    Markup Order: This one can also be disputed. The benefits you get for placing your markup in order of importance is marginal and nearly none for beginners. Lots of people have different opinions about this.

    @AnotherDeveloper

    Doctype: IE6 handles the strict doctype just fine, I use it all the time with great results. Also, IE6 is ancient and people need to stop bending over backwards to keep it in our modern technology. IE6 should not be supported whenever possible in people’s projects, although I am very well aware that isn’t always the case.

    I’m not sure where you got the h1 and p tags idea but that wasn’t mentioned in the article.

    Stylesheets and Scripts: This is absolutely not true. If you have a simple one line script, there is no reason to put that in an external file that the browser is going to have to load. It’s going to take longer for the browser to make that extra http request than it would to render that line of script. The same for CSS. A few short lines in your document is fine, anything more than that should be external.

    CSS: This is also false. When you’re a beginner, this method of formatting can be easier and there’s nothing wrong with it. I personally use single line all the time but that’s my preference. When all is said and done, if you’re worried about performance or file size, you’ll minify the CSS document and your formatting is moot.

    Inline styling should also never be used unless absolutely necessary. HTML and styling should be separate. There is also nothing wrong with using id’s in CSS. They’re faster than class’s and are part of what CSS is for. Redundant CSS rules are a different story.

    In modern web design, tables should not be used for layout, that’s my opinion and the opinion of many, many others. Yes, they have their place but I could get into an entirely new article just covering when and how to use them. That wasn’t the point here.

    Alt attribute: Sometimes being redundant helps to get the point across. I encounter far too many templates that fail to use the alt attribute on their images.

    HTML Comments: As posted above: “HTML Comments: Yes, comments in HTML will make your files slightly bigger but if you’re actually concerned about file size you can just minify your HTML files and remove the comments. Heck, you could do that automatically using PHP. If you know how to use server side comments, then great, use them. What I want to point out is that when you build templates for sale on websites like ThemeForest or that you know someone else will be taking over please USE comments. Finding the appropriate closing div can be a pain and a waste of time.”

    Your personal note: Fortunately code isn’t that costly, and with ever advancing technology it’s becoming less important. Yes, whenever possible reduce your document size but the large majority of the time sacrificing readability isn’t a good idea. If you’re concerned about file size, gzip and compress all your static files, remove comments, etc. Then all the trouble you went to to save characters, returns and whitespace is now useless.

    - -

    Thanks everyone for all the comments! They’re greatly appreciated. :-D

  • Maicon says:

    thank you for share.

  • @ Snookerman – IE’s lack of XHTML support is outside the scope of this document. HTML vs XHTML is a debated topic as well. I use XHTML because I prefer the stricter formatting guidelines and it’s newer (among other things). The fact of the matter is that it’s not really going to matter for beginners and once they actually understand the differences between HTML and XHTML they can make the choice on which to use themselves.

    http://www.webstandards.org/learn/articles/askw3c/oct2003/

    I only use XHTML when I really need to i.e. when XML documents are in use (amongst other reasons). Otherwise, I use HTML Strict.

    Contrary to popular belief, XHTML is NOT a new version of HTML. The newest version of HTML is HTML 4.01.

    Place your markup in a logical order in relation to the design. If your sidebar is on the right and your main content is on the left in your layout, put the markup in that order.

    Like several others have pointed out, this is bad for SEO. Beginners should learn basic SEO right from the start. Simple SEO techniques on their own will not make much difference but add them all up and you’re likely to see a noticeable difference. The simple SEO technique of putting the most important content first before less important content, combined with other SEO practices will make a difference. Every little bit counts.

    As for minifying your HTML and CSS, well what I do is that I comment my development files, but when I’m about to deliver them for use in a production environment, I make a copy of the original files. I compact the copies as much as I can. I then deliver the originals and the copies to the client with a note to say that the copies are meant for use in a production environment. I also keep a backup of the originals (with comments and formatting intact) just in case the client needs extra work done or whatever. If the client decides to hire someone else, at least they can view the original files with the commenting etc intact to make their work easier. This way, the production files are optimised as much as possible, and if either myself or someone else needs to work on the files, by using the original development files we’ll have the comments and formatting intact to make things easier.

  • Nancy says:

    Very nice post! very helpful!

  • Raspo says:

    Great article!

    Anyway, Indentation is very big problem in php-based site…i don’t know how to solve it

  • Webhostright says:

    Thank you, its very useful information, even though many people suggest single-line formatting for css, i think il still prefer multi-line and alphabetized, at least for the time being.

  • ryanm says:

    A very nice share indeed. HTML and XHTML is still being debated your topic is very much helpful. Thanks