{"id":18533460,"url":"https://github.com/xfiveco/html-coding-standards","last_synced_at":"2026-02-13T19:31:26.271Z","repository":{"id":14792574,"uuid":"17514618","full_name":"xfiveco/html-coding-standards","owner":"xfiveco","description":"HTML Coding Standards you must conform to when writing HTML in Xfive projects.","archived":false,"fork":false,"pushed_at":"2018-05-18T06:09:35.000Z","size":9,"stargazers_count":46,"open_issues_count":0,"forks_count":17,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-08-22T06:51:28.412Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xfiveco.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-03-07T13:21:42.000Z","updated_at":"2024-07-10T19:27:45.000Z","dependencies_parsed_at":"2022-07-22T06:48:02.322Z","dependency_job_id":null,"html_url":"https://github.com/xfiveco/html-coding-standards","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/xfiveco/html-coding-standards","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xfiveco%2Fhtml-coding-standards","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xfiveco%2Fhtml-coding-standards/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xfiveco%2Fhtml-coding-standards/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xfiveco%2Fhtml-coding-standards/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xfiveco","download_url":"https://codeload.github.com/xfiveco/html-coding-standards/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xfiveco%2Fhtml-coding-standards/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29415547,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-13T06:24:03.484Z","status":"ssl_error","status_checked_at":"2026-02-13T06:23:12.830Z","response_time":78,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-06T19:11:36.367Z","updated_at":"2026-02-13T19:31:26.255Z","avatar_url":"https://github.com/xfiveco.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"HTML Coding Standards\r\n=====================\r\n\r\nHTML Coding Standards you must conform to when writing HTML in Xfive projects.\r\n\r\n## Table of contents\r\n\r\n- [Write valid HTML](#write-valid-html)\r\n- [Indentation](#indentation)\r\n- [Line endings](#line-endings)\r\n- [Encoding and charset](#encoding-and-charset)\r\n- [Special characters](#special-characters)\r\n- [Images](#images)\r\n- [Images prefixes](#images-prefixes)\r\n- [HTML anchors](#html-anchors)\r\n- [Comments](#comments)\r\n- [Accessibility](#accessibility)\r\n- [Attaching CSS and JavaScript files](#attaching-css-and-javascript-files)\r\n- [License](#license)\r\n\r\n## Write valid HTML\r\n\r\nAll HTML code must be valid and well formed. You must validate it against the HTML specification pertaining to the project you are working on. Unless another specification is requested or needed, use HTML5 Document Type Definition:\r\n\r\n```html\r\n\u003c!DOCTYPE HTML\u003e\r\n```\r\n\r\n### Lowercase names\r\n\r\nElement and attribute names must be in all lower case:\r\n\r\n\r\n```html\r\n\u003c!-- Correct --\u003e\r\n\u003cinput name=\"name\" type=\"text\" /\u003e\r\n\r\n\u003c!-- Wrong --\u003e\r\n\u003cinput name=\"name\" TYPE=\"text\" /\u003e\r\n```\r\n\r\n### Closing tags\r\n\r\nNon-empty elements must have corresponding closing tags.\r\n\r\n```html\r\n\u003ch1\u003eMy title\u003c/h1\u003e\r\n\u003cp\u003eSome text\u003c/p\u003e\r\n```\r\n\r\nEmpty elements must be followed by a corresponding closing tag:\r\n\r\n```html\r\n\u003cspan\u003e\u003c/span\u003e\r\n```\r\n\r\nElements with a single tag, such as HR, BR, INPUT, IMG must end with `\u003e`:\r\n\r\n```html\r\n\u003cbr\u003e\r\n\u003chr\u003e\r\n\u003cimg src=\"john.jpg\" alt=\"John Doe\" width=\"200\" height=\"100\"\u003e\r\n```\r\n\r\n### Nested elements\r\n\r\nNested elements must be nested appropriately - for example:\r\n\r\n```html\r\n\u003c!-- Correct --\u003e\r\n\u003cdiv\u003e\r\n  \u003cp\u003eSome text\u003c/p\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\nThe `\u003cp\u003e` tag and its corresponding closing tag, `\u003c/p\u003e`, are both nested inside the `\u003cdiv\u003e` and `\u003c/div\u003e` tags.\r\n\r\nIf elements overlap they are not properly nested. This is illustrated in the following code:\r\n\r\n```html\r\n\u003c!-- Wrong --\u003e\r\n\u003cdiv\u003e\r\n  \u003cp\u003eSome text\u003c/div\u003e\r\n\u003c/p\u003e\r\n```\r\n\r\n### Attribute values\r\n\r\nAttribute values, even numeric attributes should be quoted—for example:\r\n\r\n```html\r\n\u003c!-- Correct --\u003e\r\n\u003cinput name=\"age\" type=\"text\" size=\"3\" /\u003e\r\n\r\n\u003c!-- Wrong --\u003e\r\n\u003cinput name=age type=text size=3 /\u003e\r\n```\r\n\r\n## Indentation\r\n\r\nUse soft tabs with 2 spaces for code indentation.\r\n\r\nUse indentation consistently to enhance the readability of the code.\r\n\r\nWhen elements carry over more than one line of code, indent the contents of elements between the start tag and the end tag. This will make it easy to see where the element begins and ends.\r\n\r\nExample:\r\n\r\n```html\r\n\u003cdiv class=\"container\"\u003e\r\n  \u003cheader class=\"header\"\u003e\r\n    \u003ch1\u003eSite Name\u003cspan\u003e\u003c/span\u003e\u003c/h1\u003e\r\n  \u003c/header\u003e\r\n  \u003c!-- / header --\u003e\r\n  \u003chr\u003e\r\n  \u003cnav class=\"navigation\"\u003e\r\n    \u003cul\u003e\r\n      \u003cli\u003e\u003ca href=\"#\"\u003eLink\u003c/a\u003e\u003c/li\u003e\r\n      \u003cli\u003e\u003ca href=\"#\"\u003eLink\u003c/a\u003e\u003c/li\u003e\r\n      \u003cli\u003e\u003ca href=\"#\"\u003eLink\u003c/a\u003e\u003c/li\u003e\r\n      \u003cli\u003e\u003ca href=\"#\"\u003eLink\u003c/a\u003e\u003c/li\u003e\r\n      \u003cli\u003e\u003ca href=\"#\"\u003eLink\u003c/a\u003e\u003c/li\u003e\r\n    \u003c/ul\u003e\r\n  \u003c/nav\u003e\r\n  \u003c!-- / navigation --\u003e\r\n\u003c/div\u003e\r\n\u003c!-- / container --\u003e\r\n```\r\n\r\n## Line endings\r\n\r\nFormat files with \\n as the line ending (Unix line endings). Do not use \\r\\n (Windows line endings) or \\r (Apple OS's). \r\n\r\n## Encoding and charset\r\n\r\nSet encoding of HTML document and its charset to UTF-8 Normalization Form C (NFC):\r\n\r\n```html\r\n\u003cmeta charset=\"utf-8\" /\u003e\r\n```\r\n\r\n## Special characters\r\n\r\nEncode special characters, for example:\r\n\r\n```html\r\n\u0026amp;\r\n\u0026copy;\r\n\u0026raquo;\r\n\u0026gt;\r\n```\r\n\r\n## HTML anchors\r\n\r\nWhen you need to link to the section inside a HTML document use ID attribute:\r\n\r\n```html\r\n\u003ca href=\"#section\"\u003elink\u003c/a\u003e\r\n\u003cdiv id=\"section\"\u003e\u003c/div\u003e\r\n```\r\n\r\nIf it isn't possible to use IDs (for example because of ASP.NET platform), use a named anchor:\r\n\r\n```html\r\n\u003ca href=\"#section\"\u003elink\u003c/a\u003e\r\n\u003ca name=\"section\"\u003e\u003c/a\u003e\r\n```\r\n\r\n## Comments\r\n\r\nInsert ending comment after closing tag of the HTML section in this format:\r\n\r\n```html\r\n\u003c!-- / name-of-class-or-id --\u003e\r\n```\r\n\r\nDo not use starting comment.\r\n\r\nExamples:\r\n\r\n```html\r\n\u003col class=\"accessibility-nav\"\u003e\r\n  \u003cli\u003e\u003ca href=\"#navigation\"\u003eSkip to navigation\u003c/a\u003e\u003c/li\u003e\r\n  \u003cli\u003e\u003ca href=\"#content\"\u003eSkip to content\u003c/a\u003e\u003c/li\u003e\r\n  \u003cli\u003e\u003ca href=\"#sidebar\"\u003eSkip to sidebar\u003c/a\u003e\u003c/li\u003e\r\n\u003c/ol\u003e\r\n\u003c!-- / accessibility-nav --\u003e\r\n \r\n\u003cp\u003e\r\n  \u003ca href=\"#\" title=\"Go to homepage\"\u003e\u003cem\u003eHome\u003c/em\u003e\u003c/a\u003e\r\n\u003c/p\u003e\r\n\u003c!-- / breadcrumb --\u003e\r\n```\r\n\r\n## Accessibility\r\n\r\nAdhere to basic accessibility principles when writing HTML.\r\n\r\n### General\r\n\r\n- Use h1 - h6 to identify headings - [Read more \u0026raquo;](http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/html.html#H4)\r\n- Use structural elements to group links - [Read more \u0026raquo;](http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/html.html#H50)\r\n- Provide definitions for abbreviations by using the abbr and acronym elements - [Read more \u0026raquo;](http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/html.html#H28)\r\n- Use language attributes on html element to identify the default language of a document - [Read more \u0026raquo;](http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/html.html#H57)\r\n\r\n\r\n### Tables\r\n\r\n- Use table markup to present tabular information - [Read more \u0026raquo;](http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/html.html#H51)\r\n- Use the scope attribute to associate header cells and data cells in data tables - [Read more \u0026raquo;](http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/html.html#H63)\r\n- Use the summary attribute of the table element to give an overview of data tables - [Read more \u0026raquo;](http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/html.html#H73)\r\n\r\n### Forms\r\n\r\n- Provide submit buttons - [Read more \u0026raquo;](http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/html.html#H32)\r\n- Use alt attributes on images used as submit buttons - [Read more \u0026raquo;](http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/html.html#H36)\r\n- Use label elements to associate text labels with form controls - [Read more \u0026raquo;](http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/html.html#H44)\r\n- Use the title attribute to identify form controls when the label element cannot be used - [Read more \u0026raquo;](http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/html.html#H65)\r\n- Indicate required form controls - [Read more \u0026raquo;](http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/html.html#H90)\r\n\r\n### Images\r\n\r\n- Use alt attributes on img elements - [Read more \u0026raquo;](http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/html.html#H37)\r\n- Use null alt text and no title attribute on img elements for images that Assistive Technology should ignore - [Read more \u0026raquo;](http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/html.html#H67)\r\n\r\n## License\r\n\r\n[![](http://i.creativecommons.org/l/by/4.0/88x31.png)](http://creativecommons.org/licenses/by/4.0/)\r\n\r\nThis work is licensed under a [Creative Commons Attribution 4.0 International License](http://creativecommons.org/licenses/by/4.0/).\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxfiveco%2Fhtml-coding-standards","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxfiveco%2Fhtml-coding-standards","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxfiveco%2Fhtml-coding-standards/lists"}