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.
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).
Encoded Characters
Make sure you use HTML encoded characters, including URL’s.
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.
Properly Nest Tags
Make sure your tags are properly nested. Inline elements, for things like links, should go within block elements – such as headings.
Tags should also be closed in the order they are opened as well as contained properly.
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.
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.
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.
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.
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?
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.
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.
Multi-Line
This is multi-line formatting.
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.
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″.
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!
- Subscribe to the Theme Forest RSS Feed.
58
Comments
Jarel Remick
I'm a freelance designer, web developer and nerd that lives on the computer and writes for Theme Forest and Net.tutsplus.com in my spare time. When I do get away from the computer, I'm spending time with my girlfriend, hiking, biking and enjoying sunny Las Vegas.
- An HTML-Friendly Template System using PHP's Output Buffering
- How to Achieve Cross-Browser @font-face Support
- Deleting Multiple Records with PHP
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.
@ 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.
thank you for share.
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.
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.
Very nice post! very helpful!
Great article!
Anyway, Indentation is very big problem in php-based site…i don’t know how to solve it
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.
A very nice share indeed. HTML and XHTML is still being debated your topic is very much helpful. Thanks