[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"doc-seo-672869-105":3,"doc-detail-672869-en":80,"detail-sidebar-cat-0-en-105":96},{"code":4,"msg":5,"data":6},0,"ok",{"site_id":7,"language":8,"slug":9,"title":10,"keywords":11,"description":12,"schema_data":13,"social_meta":73,"head_meta":75,"extra_data":77,"updated_unix":79},105,"en","google-htmlcss-style-guide-formatting-and-style-rules","Google HTML/CSS Style Guide - Formatting and style rules","","Guide defining formatting and style rules for HTML and CSS working files, including Sass and GSS assets. Establishes core collaboration goals: improve consistency, code quality, and supporting infrastructure through a shared vocabulary and predictable formatting. Specifies practical standards such as HTTPS for embedded resources, two-space indentation, lowercase conventions for code (with string exceptions), removal of trailing whitespace, and UTF-8 encoding without BOM. Covers HTML structure, semantics, multimedia fallbacks, separation of concerns, comments, and TODO-based action items.",{"@graph":14,"@context":72},[15,34,55],{"@type":16,"itemListElement":17},"BreadcrumbList",[18,23,27,31],{"item":19,"name":20,"@type":21,"position":22},"https://docshare.wps.com","Home","ListItem",1,{"item":24,"name":25,"@type":21,"position":26},"https://docshare.wps.com/document/","Document",2,{"item":28,"name":29,"@type":21,"position":30},"https://docshare.wps.com/document/technology/","Technology",3,{"item":32,"name":10,"@type":21,"position":33},"https://docshare.wps.com/document/google-htmlcss-style-guide-formatting-and-style-rules/672869/",4,{"url":32,"name":10,"@type":35,"image":36,"author":41,"headline":10,"publisher":44,"fileFormat":47,"inLanguage":8,"description":12,"dateModified":48,"datePublished":49,"encodingFormat":47,"isAccessibleForFree":50,"interactionStatistic":51},"DigitalDocument",{"url":37,"@type":38,"width":39,"height":40},"https://docshare.wps.com/thumbnails/google-htmlcss-style-guide-formatting-and-style-rules/672869.png","ImageObject",300,407,{"name":42,"@type":43},"Mimi","Person",{"url":19,"name":45,"@type":46},"DocShare","Organization","application/pdf","2026-11-04","2026-11-02",true,{"@type":52,"interactionType":53,"userInteractionCount":33},"InteractionCounter",{"@type":54},"ViewAction",{"@type":56,"mainEntity":57},"FAQPage",[58,64,68],{"name":59,"@type":60,"acceptedAnswer":61},"What indentation style does the guide require for HTML and CSS?","Question",{"text":62,"@type":63},"Use two spaces for indentation and never use tabs or mixed indentation.","Answer",{"name":65,"@type":60,"acceptedAnswer":66},"How should capitalization be handled in code and strings?",{"text":67,"@type":63},"Use lowercase for HTML element names, attributes, CSS selectors/properties/values, and attribute values except that strings are exempt.",{"name":69,"@type":60,"acceptedAnswer":70},"What encoding and HTML meta charset settings are recommended?",{"text":71,"@type":63},"Use UTF-8 without a BOM, and declare UTF-8 in HTML with `\u003Cmeta charset=\"utf-8\">`; CSS files assume UTF-8 and do not need an encoding declaration.","https://schema.org",{"og:url":32,"og:type":74,"og:title":10,"og:site_name":45,"og:description":12},"article",{"robots":76,"canonical":32},"index,follow",{"doc_id":78,"site_id":7},672869,1793611799,{"code":4,"msg":81,"data":82},"success",{"doc_id":78,"user_id":83,"nickname":42,"user_avatar":84,"doc_module":4,"category_id":85,"category_name":29,"doc_title":10,"doc_description":12,"doc_content":86,"file_id":87,"file_url":88,"file_type":89,"file_size":90,"view_count":33,"is_deleted":4,"is_public":22,"is_downloadable":22,"audit_status":22,"page_count":85,"language":91,"language_code":8,"site_id":7,"html_lang":8,"table_of_contents":92,"faqs":93,"seo_title":94,"seo_description":12,"update_tm":79,"read_time":95},2336477974920,"https://ap-avatar.wpscdn.com/davatar_155a257f0dc6eb9ab79c44ca47cae57d",6,"Google HTML/CSS Style Guide  \nFormatting and style rules for HTML and CSS, including Sass and GSS working files.  \n\n| Purpose | Improve collaboration, code quality, consistency, and supporting infrastructure. | Applies to | Raw working files using HTML and CSS. |\n| --- | --- | --- | --- |\n| Core principle | Use a common vocabulary so readers can focus on what code communicates. | Local style | When editing existing code, follow the surrounding project style. |\n\nOverview  \nThis guide defines formatting and style rules for HTML and CSS. It aims to improve collaboration and code quality and to support infrastructure that works with consistently formatted source. The rules apply to raw, working files that use HTML and CSS, including Sass and GSS files.  \nTools are free to obfuscate, minify, or compile source as long as general code quality is maintained.  \nGeneral rules at a glance  \n\n| Rule | Standard | Why it matters |\n| --- | --- | --- |\n| Protocol | Use [HTTPS for embedded](HTTPS for embedded) resources where possible. | Avoid mixed or insecure resource loading. |\n| Indentation | Two spaces; no tabs or mixed indentation. | Makes hierarchy predictable and diffs cleaner. |\n| Capitalization | Use lowercase for code, except strings. | Creates a uniform visual vocabulary. |\n| Whitespace | Remove trailing whitespace. | Avoids unnecessary changes in diffs. |\n| Encoding | UTF-8 without BOM. | Keeps source encoding consistent. |\n\nThe first formatting decisions  \nUse two spaces for indentation and never tabs. Keep code lowercase unless string content requires otherwise. Remove trailing whitespace. Use UTF-8 without a byte order mark, and declare UTF-8 in HTML with \u003Cmeta charset=\"utf-8\"> .  \n\u003C ! - -Recommended--> \u003Cmeta charset=\"utf-8\"> \u003Cul> \u003Cli>Fantastic \u003Cli>Great \u003C /ul> .example { color: blue; }  \nFor embedded images, media, style sheets, and scripts, use [HTTPS when](HTTPS when) the resource is available over [HTTPS. Mark](HTTPS. Mark)[ ](HTTPS. Mark)[action items with](action items with TODO: followed by the action.)[ TODO:](action items with TODO: followed by the action.)[ followed by the action.](action items with TODO: followed by the action.)  \n1. General style rules  \nProtocol  \nAlways use [HTTPS](HTTPS) ([https:](https:)) for images and other media files, style sheets, and scripts unless the respective resource isnot available over [HTTPS](HTTPS).  \n\u003C!--Recommended--> \u003Cscript src=\"[https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js\">\u003C/script>](https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js\">\u003C/script>)/* Recommended */ @import ' [https://fonts.googleapis.com/css?family=Open](https://fonts.googleapis.com/css?family=Open)+Sans';  \nIndentation  \nIndent by two spaces at a time. Do not use tabs or mix tabs and spaces for indentation.  \nCapitalization  \nUse only lowercase for HTML element names, attributes, attribute values (except text/CDATA), CSS selectors, properties, and property values. Strings are exempt.  \n\u003C ! - -Recommended--> \u003Cimg src=\"google.png\" alt=\"Google\"> /* Recommended */ color: \\#e5e5e5;  \nTrailing whitespace  \nRemove trailing whitespace because it is unnecessary and can complicate diffs.  \nEncoding  \nUse UTF-8 without a BOM. Specify the encoding in HTML with \u003Cmeta charset=\"utf-8\"> . CSS files assume UTF-8 and do not need an encoding declaration.  \nComments  \nUse comments where they explain what code covers, its purpose, or why a particular solution is used or preferred.  \nAction items  \nMark todos and action items with TODO only. Append the action after a colon.  \n\u003C ! - - TODO: Remove optional tags . -->  \n2. HTML style rules  \nDocument type  \nUse \u003C !doctype html> at the beginning of every HTML document to ensure no-quirks mode.  \n\u003C ! doctype html> \u003Cmeta charset=\"utf-8\"> \u003Ctitle>Test\u003C /title>  \nHTML validity  \nUse valid HTML where possible. HTML validity provides a measurable baseline for proper HTML usage and helps identify technical requirements and constraints.  \nSemantics  \nUse HTML ","cbCaibCMQulzv7rD","https://ap.wps.com/l/cbCaibCMQulzv7rD","pdf",40397,"English","# Overview\n# General rules at a glance\n## Protocol\n## Indentation\n## Capitalization\n## Whitespace\n## Encoding\n# The first formatting decisions\n# General style rules\n## Protocol\n## Indentation\n## Capitalization\n## Trailing whitespace\n## Encoding\n## Comments\n## Action items","[{\"question\":\"What indentation style does the guide require for HTML and CSS?\",\"answer\":\"Use two spaces for indentation and never use tabs or mixed indentation.\"},{\"question\":\"How should capitalization be handled in code and strings?\",\"answer\":\"Use lowercase for HTML element names, attributes, CSS selectors/properties/values, and attribute values except that strings are exempt.\"},{\"question\":\"What encoding and HTML meta charset settings are recommended?\",\"answer\":\"Use UTF-8 without a BOM, and declare UTF-8 in HTML with `\\u003cmeta charset=\\\"utf-8\\\"\\u003e`; CSS files assume UTF-8 and do not need an encoding declaration.\"}]","Google HTML/CSS Style Guide - Formatting and style rules | PDF",15,{"code":4,"msg":81,"data":97},[98,102,106,110,115,118,123,128,133,136,140],{"id":22,"doc_module":4,"doc_module_name":25,"category_name":99,"show_sort_weight":100,"slug":101},"Story & Novel",90,"story-novel",{"id":26,"doc_module":4,"doc_module_name":25,"category_name":103,"show_sort_weight":104,"slug":105},"Literature",80,"literature",{"id":33,"doc_module":4,"doc_module_name":25,"category_name":107,"show_sort_weight":108,"slug":109},"Exam",70,"exam",{"id":111,"doc_module":4,"doc_module_name":25,"category_name":112,"show_sort_weight":113,"slug":114},5,"Comic",60,"comic",{"id":85,"doc_module":4,"doc_module_name":25,"category_name":29,"show_sort_weight":116,"slug":117},50,"technology",{"id":119,"doc_module":4,"doc_module_name":25,"category_name":120,"show_sort_weight":121,"slug":122},7,"Healthcare",40,"healthcare",{"id":124,"doc_module":4,"doc_module_name":25,"category_name":125,"show_sort_weight":126,"slug":127},8,"Research & Report",30,"research-report",{"id":129,"doc_module":4,"doc_module_name":25,"category_name":130,"show_sort_weight":131,"slug":132},9,"Religion & Spirituality",20,"religion-spirituality",{"id":131,"doc_module":4,"doc_module_name":25,"category_name":134,"show_sort_weight":131,"slug":135},"World Cup","world-cup",{"id":137,"doc_module":4,"doc_module_name":25,"category_name":138,"show_sort_weight":137,"slug":139},10,"Lifestyle","lifestyle",{"id":141,"doc_module":4,"doc_module_name":25,"category_name":142,"show_sort_weight":111,"slug":143},19,"General","general"]