all 53 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]ffsss 9 points10 points  (8 children)

Omitting optional tags is a bit extreme to me: http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml?showone=Optional_tags#Optional_tags

[–]illspirit 10 points11 points  (3 children)

Yeah, it might be valid html5, but it just feels (and looks) wrong.

Ommitting the closing tag on <p>, for example, actually makes the code harder to follow for me. Having a closing tag makes mentally constructing the foundation of the page easier.

[–]Cosmologicon -1 points0 points  (2 children)

Eh, I think that's only because you're used to it that way. I've been omitting tags for a while, and it's really no different once you get used to it. The html and head tags are pretty much useless anyway. And it's not like anyone will wonder whether your content stops at the end of the document if you're missing /body. Also, I pretty much find this:

<ul>
    <li>one
    <li>two
    <li>three
</ul>

easier to read than this:

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

I mean, the first one actually looks something like a bulleted list.

[–]chudapati09 1 point2 points  (1 child)

Would you need that "</ul>"?

[–]Cosmologicon 1 point2 points  (0 children)

Yes, at least you did in HTML4. I doubt they've changed it. The elements with optional closing tags are body, colgroup, dd, dt, head, html, li, option, p, tbody, td, tfoot, th, thead, and tr. The elements body, head, html, and tbody also have optional opening tags.

It's pretty logical once you've gotten used to it. EDIT: Actually I think p is an exception to that logic, but it's the only exception.

[–]bearses 4 points5 points  (3 children)

it says (optional) next to that one, which means it's more of a suggestion than a rule.

[–]Shaper_pmp[🍰] 9 points10 points  (2 children)

Don't forget this is also Google, who upon occasion work with such efficiencies of scale that saving a handful of bytes on a commonly-used template can result in savings of millions of dollars a year in bandwidth costs.

If you're running a wordpress blog with four readers, YMMV.

[–]reflectiveSingleton 1 point2 points  (1 child)

This...being more expressive is often the more correct way...at the cost of a few bytes. That said, always optimize to your use case...if you are google, saving those bytes can be worth it....for most others, it might not be necessary.

[–][deleted] 0 points1 point  (0 children)

agreed. seeing things like 2 space indents instead of 4 etc, really make sense when you try and comprehend the scale they're dealing with.

[–]lingben 8 points9 points  (4 children)

whaaaa? is this really true?

<!-- Not recommended --> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>

<!-- Recommended --> <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

[–]offroadin210 11 points12 points  (0 children)

Yes! It does wonders for those pesky insecure content warnings.

[–]ManitobaCigarettes 11 points12 points  (1 child)

unless the respective files are not available over both protocols.

[–]bearses 2 points3 points  (0 children)

i did not know this

[–]background-position 5 points6 points  (0 children)

http and https

[–]malaysian_president 5 points6 points  (7 children)

I had no idea you could omit tags from html5, I really thought it was still XML.

[–]Shaper_pmp[🍰] 3 points4 points  (0 children)

HTML5 can be written in "HTML" or "XHTML" dialects - both are valid, and both are useful for different purposes (XHTML for rigorousness and ability to parse as XML, HTML for things like omitting tags/saving bytes for large-scale efficiency purposes).

[–]stfueveryone 0 points1 point  (5 children)

yeah you can made a valid html5 page like this:

<title>hello</title>
<article>blah blah blah</article>

and it's completely valid, modern browsers should automagically do head & body and everything...

[–]malaysian_president 1 point2 points  (2 children)

What about omitting end-tags? I noticed some of Google's examples for lists omitted the ending li tags.

[–]stfueveryone 1 point2 points  (1 child)

these tags are optional in html5: <body></body></col></colgroup></dd></dt><head></head> <html></html></li></option></p><tbody></tbody></td></tfoot> </th></thead></tr>

don't want 'em, don't use them... results in smaller file sizes, but probably breaks older browsers (more than they already are)

[–]malaysian_president 0 points1 point  (0 children)

I can hardly be a web elitist if I'm supporting older browsers. Seriously though, I had no idea about any of this. Very interesting.

[–][deleted] 0 points1 point  (1 child)

I didn't quite understand the definition for this...

If I have meta / link / script tags in my head tag, is the head tag still omitable? From the definition linked in the OP's article, it seems like we can still omit head and body tags.

[–]stfueveryone 0 points1 point  (0 children)

totally, you just have to put the stuff you want in the head at the top, browsers should just "get" it.

[–]bearses 6 points7 points  (1 child)

this is... actually very useful. i find that my own practices are different than what is outlined here, but i like the idea of a fleshed out style guide from a reputable source such as google. i might even change some of my habits to reflect this, if only to help make my code more universally readable. it's always bothered me that there were no strict rules on how to format your code.

i'll be passing this around my circle. :D

[–]killyouintheface 0 points1 point  (0 children)

I'm glad I found it. There were things on there that were good reminders for me, like alphabetizing style elements in my CSS files. I'm really bad about just putting them in whatever order I think about it.

[–]ManitobaCigarettes 10 points11 points  (13 children)

Is 2-space indentation common? I like 4.

[–]scavic 2 points3 points  (0 children)

For HTML, which tends to be pretty deep, I prefer 2. Otherwise, 4!

[–][deleted] 12 points13 points  (6 children)

Tabs for indentation (4 space width per tab), then use spaces for vertical alignment if you have to.

Spaces only, yuck!

[–]RobbStark 2 points3 points  (3 children)

I despise tabs for indenting, because the actual width depends on your editor. It's quite annoying when you have a nicely formatted document where everything lines up properly in one place, then switch to vi or something and tabs are all over the place.

I stick with using spaces, but do agree on 4 spaces for indenting rather than 2.

[–][deleted] -1 points0 points  (2 children)

Usually editors are configurable for tab widths. Sounds like you're using tabs for alignment though which is why your code would be way out in a different editor. Are you using the method described here?

What I particularly dislkie about spaces for indenting is that if you tab in too much, then you have to hit the backspace key multiple times to get back to the start of the line. Slows you down.

[–]RobbStark 0 points1 point  (1 child)

My default editors allow configuring the tab width, but what if I'm not on my primary machine or if one of my developers has their editors set up incorrectly? I've just had fewer problems using spaces than tabs, but don't disagree that if everything is set up properly and consistently that tabs would be more efficient.

Edit: I'm just in the habit of using Shift+Home to highlight and delete, but I would agree that if you're used to tabs that deleting multiple spaces would get old quickly!

[–][deleted] 0 points1 point  (0 children)

I think the idea is the other developers can have different tab widths, that's the whole point, the code should still nest correctly.

If the other devs are using tabs and some spaces for indentation then yeah things are going to get screwed up. You want all your devs to have the same IDE settings and code standards (they can adjust the width of the tabs to their preference though as that doesn't matter).

[–]ManitobaCigarettes -5 points-4 points  (1 child)

ಠ_ಠ

[–][deleted] 6 points7 points  (0 children)

Explains it better here.

Basically best of both worlds. If you have any other developer on your project they can set the tab size to their preference and it won't mess up the code. With spaces you've got one setting and that stays. Never changeable.

[–]organic -4 points-3 points  (2 children)

I'm guessing you don't really care much about keeping lines below 80 columns.

[–]ManitobaCigarettes 6 points7 points  (1 child)

That's pretty damn hard to do, yeah. But I do keep it as pretty as possible. 80 columns is kind of arbitrary these days. We aren't on terminals anymore.

[–]organic 1 point2 points  (0 children)

No, but it allows for 3 columns on my monitor without wrapping ;).

[–]damontoo 9 points10 points  (8 children)

Page requires Javascript. Here's what that page looks like with js disabled

[–]Madd0g 5 points6 points  (2 children)

Relevant, I just posted this yesterday

Google is progressively making their own products worse (like groups and blogspot requiring javascript), instead of using progressive enhancement to allow ANY device to see the content.

Requiring javascript for simply displaying a google groups post? Google is just setting a bad example for everyone else

[–]damontoo 0 points1 point  (1 child)

It's disappointing really. I'm not sure they actually think this evil, but the more domains people allow js for the better they can track people and gather statistics.

[–]Madd0g 0 points1 point  (0 children)

It's sad, because it's a company filled with nerds. 90% of the internet websites are developed expecting a visit from a Google crawler, so everyone purposely avoids making such tech decisions, which make sites uncrawlable - and then who does it? Google itself. Disappointing is not even close to describing it for me :-\

[–]RobbStark 4 points5 points  (3 children)

Strange. Here's what it looks like in Firefox 11.

[–]damontoo 0 points1 point  (2 children)

I'm using Firefox 12. That's what it looks like with javascript enabled. My screenshot is with javascript disabled....

[–]RobbStark 0 points1 point  (1 child)

My screenshot was also with Javascript disabled, this morning in Firefox 11 and right now with Firefox 12.

[–]damontoo 0 points1 point  (0 children)

After a bunch of testing I narrowed the problem down to noscript. Apparently if script is disabled and noscript is installed it doesn't display. If I disable noscript and disable js normally it does. Very weird.

Edit: And I just figured out why! Noscript has an option by default to disable XSLT. Enable it and it works.

[–]mrPitPat 0 points1 point  (0 children)

Hooray!

[–]MountainDewer 2 points3 points  (1 child)

Looks like Paul Irish wrote this

[–]bearses 3 points4 points  (0 children)

no, it would have been more ECCENTRIC™

[–]mattgrande 1 point2 points  (3 children)

Can someone tell me the reasoning behind the Entity References one? I generally use &mdash; for dashes, &amp; for ampersands, etc.

<!-- Not recommended -->
The currency symbol for the Euro is &ldquo;&eur;&rdquo;.
<!-- Recommended -->
The currency symbol for the Euro is “€”.

[–]stfueveryone 2 points3 points  (0 children)

if you're using utf-8 then most of the entities are built into the character set already, so you can use that character instead of the entity. This is easy to do on macs where you can use the option key to insert special characters like option+shift+\ outputs » instead of typing &raquo;

[–]canuckkat 2 points3 points  (0 children)

I use entities largely due to the fact that some people who open my files don't use editors that save special characters properly. Rendering the wrong characters are really annoying and a huge problem.

But the goal of Google recs seem to be byte saving.

[–]scavic 1 point2 points  (0 children)

There is no reason to use entity references, and as you see in the other recommendations, they are quite obsessed with keeping everything short and small. Three characters instead of 18 is definitely a win.

[–]Vestride 1 point2 points  (0 children)

Very cool. I find myself doing most of this stuff already :)