Are there any style guides for HTML?

Question

I have found that my HTML is, to be honest, very clunky. Small, simple pages are OK. But there comes a point when between indenting and the kinds of tags I have, it's impossible to keep lines short. Is there a W3C (or otherwise "official" or well accepted) formatting guide for clean, maintainable HTML? If not, what suggestions can the community provide?

Answer 1

My advice is to not even worry about it. HTML and XML, unlike most languages, are almost trivial to re-indent to any style the programmer wants. In HTML I use width-2 tabs, and regularly have sections that run off the edge of the editor window. There's not really any way to avoid that unless you just skip indenting sections of the document.

Answer 2

I just indent properly and don't worry about line length.

If you are using a templating system then you don't have any content in the view anyway, so the lines will only have variables and tags.

Basically keep as much out of the HTML as possible and it's less of a problem.

Answer 3

I typically put every "block" type element on a new line, and indent every time with it. Even when there is a short amount of code, it helps to where elements are changing. The only items I keep on the same line are bold and italic tags and the occasional div and span tag when I'm formatting a small chunk of code, so you'd see something like:

<p>
   This is my <b>fancy</b> code block of text here. This will
   typically wrap forever and <div class="SarcasticStyle">EVER</div> until
   I run out of things to say.
   <br/>
   Yeah, I think that's it.
</p>

Answer 4

I used to be very strict about whitespace in my HTML (2 spaces for each level of indention, no tabs, group sections with a space in between, etc). After getting into more server side programming though, I found that it was harder and harder to keep the formatting looking just right. Dreamweaver is notorious for this; I can't seem to get the app from using tab characters, which ends up making the source look different in other text editors.

I've stopped worrying so much and simply try to improve bits of markup that I am currently working on. Indenting seems like a much bigger deal in programming languages than HTML.

Answer 5

i have to disagree with the answer you have chosen. you should be worrying about what your html looks like. with all the fancy ide's out there it seems developers just aren't as cautious about html as they should be. the resulting html that is output to the browser has a significant impact both on accessibility and search engine optimization for your website. how many people building websites out there even know what a <label> tag does? it ties a label to a form element which is extremely important for visually impaired people who "view" the web via a screen reader.

if your html is nested so deeply that you are more than about ten indentation levels in you really need to think about refactoring your design--just as you would if your program code got that way.

back to the real question, getting your html to look nice is easy if you remember one rule; break out tags into multiple lines. take an <a> tag for example. while it is true that you can't do much about the url itself, outside of using a shortening service like tr.im, break the tag into multiple lines like this:

<a href="http://rads.stackoverflow.com/amzn/click/1430209879"More Joel on Software: Further Thoughts on Diverse and
          Occasionally Related Matters That Will Prove of Interest to
          Software Developers, Designers, and ... Luck, Work with Them
          in Some Capacity (Pro) (Paperback)">Another Joel on Software book</a>

you can also look into methods that will do html formatting automatically. stand alone applications like tidy ui and htmltrim can do this, or you can get the htmltidy library which can be integrated with your application.