Google recently released their new HTML/CSS Style Guides for Webmasters; to help create better websites, as well as the nudge-nod-wink to enhanced SEO.
While some of the suggestions seem fairly obvious, some are a bit surprising. Let’s take a look at a few.
Google's Suggestions
General
Protocol
- Leave out protocols (http:, https:) from URLs pointing to various files unless they aren’t available for both protocols.
Indentation
- Google says to Indent by 2 Spaces in code; don’t use Tabs.
Capitalization
- Use only lowercase in code, including element names, attributes, attribute values, selectors, properties, and property values (except strings)
Encoding
- Use UTF-8
Action Items
- This is a new one on me – Mark “To Do” and action items with the keyword
TODO
in code, along with the contact name of person involved. Examples given are:
{# TODO(john.doe): revisit centering #}
<center>Test</center>
HTML Styles for Google
Document Type
- Google suggests using HTML5 instead of XHTML.
<!DOCTYPE html>
Validity
- Use Valid HTML where possible. Test with the W3C HTML Validator
Semantics
- Use Elements / Tags according to their original intent and purpose.
Separation
- Google wants you to separate structure from presentation from behavior.
Format Block Level Elements in Code
- Start each new block-level element on a new line in your code.
Quotation Marks
- Use double Quotation marks (“”) for attribute values.
CSS Styles for Google
Validity
- Use the W3C CSS Validator to validate your CSS whenever possible.
ID and Class Names
- Use meaningful class and ID names, based on the element’s purpose; make names short as possible but as long as necessary.
- Avoid qualifying ID and class names with type selectors. Instead of
ul#example {}
, use#example {}
.
Shorthand
- Google says, in short, use the shorthand when possible.
Zeroes
- Don’t specify units after a 0 value but instead like
margin: 0;
- Don’t lead with a 0 value, but instead like
font-size: .8em;
Hexadecimals
- Use 3 digit declaration when possible. For example, instead of
color: #eebbcc;
, usecolor: #ebc;
.
Declaration Order
- Alphabatezie declarations.
Stops
- Use a semicolon after every declaration, including the last one.
- Use a space after the property name’s colon.
Declarations
- Start a new line for each selector, declaration and rule.
Quotation Marks
- Use single quotation marks for selectors & property values (”).
- Do not use quotation marks in URI values (url()).
And that’s about it. Good luck with your implementation!
You May Also Like