GeneralFormattingRules

Capitalization
Useonlylowercase.
Allcodehastobelowercase:ThisappliestoHTMLelementnames,attributes,attributevalues(unless
text/CDATA),CSSselectors,properties,andpropertyvalues(withtheexceptionofstrings).
<!Notrecommended>
<AHREF="/">Home</A>
<!Recommended>
<imgsrc="google.png"alt="Google">
/*Notrecommended*/
color:#E5E5E5
/*Recommended*/
color:#e5e5e5

TrailingWhitespace
Removetrailingwhitespaces.
Trailingwhitespacesareunnecessaryandcancomplicatediffs.
<!Notrecommended>
<p>What?_
<!Recommended>
<p>Yesplease.

GeneralMetaRules
Encoding
UseUTF8(noBOM).
MakesureyoureditorusesUTF8ascharacterencoding,withoutabyteordermark.
SpecifytheencodinginHTMLtemplatesanddocumentsvia<metacharset="utf8">.Donotspecifythe
encodingofstylesheetsastheseassumeUTF8.
(MoreonencodingsandwhenandhowtospecifythemcanbefoundinHandlingcharacterencodingsin
HTMLandCSS.)

Comments
Explaincodeasneeded,wherepossible.
Usecommentstoexplaincode:Whatdoesitcover,whatpurposedoesitserve,whyisrespectivesolution
usedorpreferred?

(Thisitemisoptionalasitisnotdeemedarealisticexpectationtoalwaysdemandfullydocumentedcode.
MileagemayvaryheavilyforHTMLandCSScodeanddependsontheprojectscomplexity.)

ActionItems
MarktodosandactionitemswithTODO.
HighlighttodosbyusingthekeywordTODOonly,notothercommonformatslike@@.
Appendacontact(usernameormailinglist)inparenthesesaswiththeformatTODO(contact).
AppendactionitemsafteracolonasinTODO:actionitem.
{#TODO(john.doe):revisitcentering#}
<center>Test</center>
<!TODO:removeoptionaltags>
<ul>
<li>Apples</li>
<li>Oranges</li>
</ul>

HTMLStyleRules
DocumentType
UseHTML5.
HTML5(HTMLsyntax)ispreferredforallHTMLdocuments:<!DOCTYPEhtml>.
(ItsrecommendedtouseHTML,astext/html.DonotuseXHTML.XHTML,asapplication/xhtml+xml,lacks
bothbrowserandinfrastructuresupportandofferslessroomforoptimizationthanHTML.)
AlthoughfinewithHTML,donotclosevoidelements,i.e.write<br>,not<br/>.

HTMLValidity
UsevalidHTMLwherepossible.
UsevalidHTMLcodeunlessthatisnotpossibleduetootherwiseunattainableperformancegoalsregarding
filesize.
UsetoolssuchastheW3CHTMLvalidatortotest.
UsingvalidHTMLisameasurablebaselinequalityattributethatcontributestolearningabouttechnical
requirementsandconstraints,andthatensuresproperHTMLusage.
<!Notrecommended>
<title>Test</title>
<article>Thisisonlyatest.
<!Recommended>
<!DOCTYPEhtml>
<metacharset="utf8">
<title>Test</title>
<article>Thisisonlyatest.</article>

Semantics
UseHTMLaccordingtoitspurpose.
Useelements(sometimesincorrectlycalledtags)forwhattheyhavebeencreatedfor.Forexample,use
headingelementsforheadings,pelementsforparagraphs,aelementsforanchors,etc.
UsingHTMLaccordingtoitspurposeisimportantforaccessibility,reuse,andcodeefficiencyreasons.
<!Notrecommended>
<divonclick="goToRecommendations()">Allrecommendations</div>
<!Recommended>
<ahref="recommendations/">Allrecommendations</a>

MultimediaFallback
Providealternativecontentsformultimedia.
Formultimedia,suchasimages,videos,animatedobjectsviacanvas,makesuretoofferalternativeaccess.
Forimagesthatmeansuseofmeaningfulalternativetext(alt)andforvideoandaudiotranscriptsand
captions,ifavailable.
Providingalternativecontentsisimportantforaccessibilityreasons:Ablinduserhasfewcuestotellwhat
animageisaboutwithout@alt,andotherusersmayhavenowayofunderstandingwhatvideooraudio
contentsareabouteither.
(Forimageswhosealtattributeswouldintroduceredundancy,andforimageswhosepurposeispurely
decorativewhichyoucannotimmediatelyuseCSSfor,usenoalternativetext,asinalt="".)
<!Notrecommended>
<imgsrc="spreadsheet.png">
<!Recommended>
<imgsrc="spreadsheet.png"alt="Spreadsheetscreenshot.">

SeparationofConcerns
Separatestructurefrompresentationfrombehavior.
Strictlykeepstructure(markup),presentation(styling),andbehavior(scripting)apart,andtrytokeepthe
interactionbetweenthethreetoanabsoluteminimum.
Thatis,makesuredocumentsandtemplatescontainonlyHTMLandHTMLthatissolelyservingstructural
purposes.Moveeverythingpresentationalintostylesheets,andeverythingbehavioralintoscripts.
Inaddition,keepthecontactareaassmallaspossiblebylinkingasfewstylesheetsandscriptsas
possiblefromdocumentsandtemplates.
Separatingstructurefrompresentationfrombehaviorisimportantformaintenancereasons.Itisalways
moreexpensivetochangeHTMLdocumentsandtemplatesthanitistoupdatestylesheetsandscripts.
<!Notrecommended>
<!DOCTYPEhtml>
<title>HTMLsucks</title>
<linkrel="stylesheet"href="base.css"media="screen">
<linkrel="stylesheet"href="grid.css"media="screen">
<linkrel="stylesheet"href="print.css"media="print">
<h1style="fontsize:1em">HTMLsucks</h1>

<p>IvereadaboutthisonafewsitesbutnowImsure:
<u>HTMLisstupid!!1</u>
<center>Icantbelievetheresnowaytocontrolthestylingof
mywebsitewithoutdoingeverythingalloveragain!</center>
<!Recommended>
<!DOCTYPEhtml>
<title>MyfirstCSSonlyredesign</title>
<linkrel="stylesheet"href="default.css">
<h1>MyfirstCSSonlyredesign</h1>
<p>IvereadaboutthisonafewsitesbuttodayImactually
doingit:separatingconcernsandavoidinganythingintheHTMLof
mywebsitethatispresentational.
<p>Itsawesome!

EntityReferences
Donotuseentityreferences.
Thereisnoneedtouseentityreferenceslike&mdash,&rdquo,or&#x263a,assumingthesame
encoding(UTF8)isusedforfilesandeditorsaswellasamongteams.
TheonlyexceptionsapplytocharacterswithspecialmeaninginHTML(like<and&)aswellascontrolor
invisiblecharacters(likenobreakspaces).
<!Notrecommended>
ThecurrencysymbolfortheEurois&ldquo&eur&rdquo.
<!Recommended>
ThecurrencysymbolfortheEurois.

typeAttributes
Omittypeattributesforstylesheetsandscripts.
Donotusetypeattributesforstylesheets(unlessnotusingCSS)andscripts(unlessnotusingJavaScript).
SpecifyingtypeattributesinthesecontextsisnotnecessaryasHTML5impliestext/cssandtext/javascript
asdefaults.Thiscanbesafelydoneevenforolderbrowsers.
<!Notrecommended>
<linkrel="stylesheet"href="//www.google.com/css/maia.css"
type="text/css">
<!Recommended>
<linkrel="stylesheet"href="//www.google.com/css/maia.css">
<!Notrecommended>
<scriptsrc="//www.google.com/js/gweb/analytics/autotrack.js"
type="text/javascript"></script>
<!Recommended>
<scriptsrc="//www.google.com/js/gweb/analytics/autotrack.js"></script>

HTMLFormattingRules
GeneralFormatting
Useanewlineforeveryblock,list,ortableelement,andindenteverysuchchildelement.
Independentofthestylingofanelement(asCSSallowselementstoassumeadifferentroleperdisplay
property),puteveryblock,list,ortableelementonanewline.
Also,indentthemiftheyarechildelementsofablock,list,ortableelement.
(Ifyourunintoissuesaroundwhitespacebetweenlistitemsitsacceptabletoputalllielementsinoneline.
Alinterisencouragedtothrowawarninginsteadofanerror.)
<blockquote>
<p><em>Space</em>,thefinalfrontier.</p>
</blockquote>
<ul>
<li>Moe
<li>Larry
<li>Curly
</ul>
<table>
<thead>
<tr>
<thscope="col">Income
<thscope="col">Taxes
<tbody>
<tr>
<td>$5.00
<td>$4.50
</table>

HTMLQuotationMarks
Whenquotingattributesvalues,usedoublequotationmarks.
Usedouble("")ratherthansinglequotationmarks('')aroundattributevalues.
<!Notrecommended>
<aclass='maiabuttonmaiabuttonsecondary'>Signin</a>
<!Recommended>
<aclass="maiabuttonmaiabuttonsecondary">Signin</a>

CSSStyleRules
CSSValidity
UsevalidCSSwherepossible.
UnlessdealingwithCSSvalidatorbugsorrequiringproprietarysyntax,usevalidCSScode.
UsetoolssuchastheW3CCSSvalidatortotest.
UsingvalidCSSisameasurablebaselinequalityattributethatallowstospotCSScodethatmaynothave
anyeffectandcanberemoved,andthatensuresproperCSSusage.

IDandClassNaming
UsemeaningfulorgenericIDandclassnames.
Insteadofpresentationalorcrypticnames,alwaysuseIDandclassnamesthatreflectthepurposeofthe
elementinquestion,orthatareotherwisegeneric.
Namesthatarespecificandreflectthepurposeoftheelementshouldbepreferredasthesearemost
understandableandtheleastlikelytochange.
Genericnamesaresimplyafallbackforelementsthathavenoparticularornomeaningdifferentfromtheir
siblings.Theyaretypicallyneededashelpers.
Usingfunctionalorgenericnamesreducestheprobabilityofunnecessarydocumentortemplatechanges.
/*Notrecommended:meaningless*/
#yee1901{}

/*Notrecommended:presentational*/
.buttongreen{}
.clear{}
/*Recommended:specific*/
#gallery{}
#login{}
.video{}

/*Recommended:generic*/
.aux{}
.alt{}

IDandClassNameStyle
UseIDandclassnamesthatareasshortaspossiblebutaslongasnecessary.
TrytoconveywhatanIDorclassisaboutwhilebeingasbriefaspossible.
UsingIDandclassnamesthiswaycontributestoacceptablelevelsofunderstandabilityandcode
efficiency.

/*Notrecommended*/
#navigation{}
.atr{}
/*Recommended*/
#nav{}
.author{}

TypeSelectors
AvoidqualifyingIDandclassnameswithtypeselectors.
Unlessnecessary(forexamplewithhelperclasses),donotuseelementnamesinconjunctionwithIDsor
classes.
Avoidingunnecessaryancestorselectorsisusefulforperformancereasons.
/*Notrecommended*/
ul#example{}
div.error{}
/*Recommended*/
#example{}
.error{}

ShorthandProperties
Useshorthandpropertieswherepossible.
CSSoffersavarietyofshorthandproperties(likefont)thatshouldbeusedwheneverpossible,evenincases
whereonlyonevalueisexplicitlyset.
Usingshorthandpropertiesisusefulforcodeefficiencyandunderstandability.
/*Notrecommended*/
bordertopstyle:none
fontfamily:palatino,georgia,serif
fontsize:100%
lineheight:1.6
paddingbottom:2em
paddingleft:1em
paddingright:1em
paddingtop:0
/*Recommended*/
bordertop:0
font:100%/1.6palatino,georgia,serif
padding:01em2em

0andUnits
Omitunitspecificationafter0values.
Donotuseunitsafter0valuesunlesstheyarerequired.
margin:0
padding:0

Leading0s
Omitleading0sinvalues.
Donotuseput0sinfrontofvaluesorlengthsbetween1and1.
fontsize:.8em

HexadecimalNotation
Use3characterhexadecimalnotationwherepossible.
Forcolorvaluesthatpermitit,3characterhexadecimalnotationisshorterandmoresuccinct.
/*Notrecommended*/
color:#eebbcc
/*Recommended*/
color:#ebc

IDandClassNameDelimiters
SeparatewordsinIDandclassnamesbyahyphen.
Donotconcatenatewordsandabbreviationsinselectorsbyanycharacters(includingnoneatall)otherthan
hyphens,inordertoimproveunderstandingandscannability.
/*Notrecommended:doesnotseparatethewordsdemoandimage*/
.demoimage{}

/*Notrecommended:usesunderscoreinsteadofhyphen*/
.error_status{}
/*Recommended*/
#videoid{}
.adssample{}

Hacks
AvoiduseragentdetectionaswellasCSShackstryadifferentapproachfirst.
ItstemptingtoaddressstylingdifferencesoveruseragentdetectionorspecialCSSfilters,workarounds,
andhacks.Bothapproachesshouldbeconsideredlastresortinordertoachieveandmaintainanefficient
andmanageablecodebase.Putanotherway,givingdetectionandhacksafreepasswillhurtprojectsinthe
longrunasprojectstendtotakethewayofleastresistance.Thatis,allowingandmakingiteasytouse
detectionandhacksmeansusingdetectionandhacksmorefrequentlyandmorefrequentlyistoo
frequently.

CSSFormattingRules
BlockContentIndentation
Indentallblockcontent.
Indentallblockcontent,thatisruleswithinrulesaswellasdeclarations,sotoreflecthierarchyandimprove
understanding.
@mediascreen,projection{

html{
background:#fff
color:#444
}

DeclarationStops
Useasemicolonaftereverydeclaration.
Endeverydeclarationwithasemicolonforconsistencyandextensibilityreasons.
/*Notrecommended*/
.test{
display:block
height:100px
}
/*Recommended*/
.test{
display:block
height:100px
}

PropertyNameStops
Useaspaceafterapropertynamescolon.
Alwaysuseasinglespacebetweenpropertyandvalue(butnospacebetweenpropertyandcolon)for
consistencyreasons.
/*Notrecommended*/
h3{
fontweight:bold
}
/*Recommended*/
h3{

fontweight:bold
}

DeclarationBlockSeparation
Useaspacebetweenthelastselectorandthedeclarationblock.
Alwaysuseasinglespacebetweenthelastselectorandtheopeningbracethatbeginsthedeclaration
block.
Theopeningbraceshouldbeonthesamelineasthelastselectorinagivenrule.
/*Notrecommended:missingspace*/
#video{
margintop:1em
}

/*Notrecommended:unnecessarylinebreak*/
#video
{
margintop:1em
}
/*Recommended*/
#video{
margintop:1em
}

SelectorandDeclarationSeparation
Separateselectorsanddeclarationsbynewlines.
Alwaysstartanewlineforeachselectoranddeclaration.
/*Notrecommended*/
a:focus,a:active{
position:relativetop:1px
}
/*Recommended*/
h1,
h2,
h3{
fontweight:normal
lineheight:1.2
}

RuleSeparation
Separaterulesbynewlines.
Alwaysputablankline(twolinebreaks)betweenrules.
html{
background:#fff

body{
margin:auto
width:50%
}

CSSQuotationMarks
Usesinglequotationmarksforattributeselectorsandpropertyvalues.
Usesingle('')ratherthandouble("")quotationmarksforattributeselectorsorpropertyvalues.Donotuse
quotationmarksinURIvalues(url()).
Exception:Ifyoudoneedtousethe@charsetrule,usedoublequotationmarkssinglequotationmarks
arenotpermitted.
/*Notrecommended*/
@importurl("//www.google.com/css/maia.css")

html{
fontfamily:"opensans",arial,sansserif
}
/*Recommended*/
@importurl(//www.google.com/css/maia.css)

html{
fontfamily:'opensans',arial,sansserif
}

CSSMetaRules
SectionComments
Groupsectionsbyasectioncomment(optional).
Ifpossible,groupstylesheetsectionstogetherbyusingcomments.Separatesectionswithnewlines.
/*Header*/

#adwheader{}

/*Footer*/

#adwfooter{}

/*Gallery*/

.adwgallery{}