https://github.com/caiogondim/html-style-guide
https://github.com/caiogondim/html-style-guide
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/caiogondim/html-style-guide
- Owner: caiogondim
- Created: 2013-08-20T01:55:58.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2014-04-05T14:33:55.000Z (about 11 years ago)
- Last Synced: 2025-01-24T18:08:42.876Z (4 months ago)
- Size: 321 KB
- Stars: 13
- Watchers: 4
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# HTML style guide
> A style guide is about consistency. Consistency with this style guide is
> important. Consistency within a project is more important. Consistency within
> one module or function is most important.
>
> But most importantly: know when to be inconsistent -- sometimes the style guide
> just doesn't apply. When in doubt, use your best judgment. Look at other
> examples and decide what looks best. And don't hesitate to ask!
>
> PEP 8, Python
## Protocol
Ommit the protocol (http:, https:) from URLs pointing to images, style sheets,
scripts, unless they are not available in both protocols. That way, mixed
content issues is prevented, because the URL is now relative.
```html
```
```css
/* Good */
.example {
background: url(//caiogondim.com/img/logo.png);
}
/* Bad */
.example {
background: url(http://caiogondim.com/img/logo.png);
}
```
## Indentation
Always use 2 spaces for indentation.
```html
```
## Capitalization
Use only lowercase.
```html
Home
```
## Document type
Use HTML5. And use HTML syntax, not XHTML. Hixie
[wrote some about it](http://hixie.ch/advocacy/xhtml).
```html
```
## Separation of Concerns
In your templates and documents, use only (or strive for it) HTML. Put
everything presentational into style sheets. And all the behavior in scripts
files.
Keep the contact area as small as possible by linking only the needed style
sheets and scripts for the current document.
```html
Example
Lorem Ipsum
document.querySelector("h1").style.color = "red";
Example
Lorem Ipsum
```
## Entity references
There is no need to use entity references like `”` or `—` if you're
using UTF-8 encoding. The only exceptions are to characters with special meaning
to HTML, as `<`, `>` and `&`, or “invisible” characters, as no-break spaces.
```html
The currency symbol for the Euro is “&eur;”.
The currency symbol for the Euro is “€”.
Mr. Someone
```
## Self-closing tags
Use the HTML5 way, not XHTML.
```html
```
## Attributes
Again, prefer the HTML5 way, not XHTML.
```html
```
## Quotes
Always use double quotes.
```html
```
## Maximum line length
Try as hard as you can to keep line lenght slower than 80 columns. It improves
readability and makes possible to use a 2 columns split view in your editor
(your editor supports it, right?) without horizontal scroll.
```html
```
Also, it's a good pratice to put every attribute in it's line, since Git doesn't
show in a diff **what** in a line was modified, only that it's was modified.
## Reference
This documented is highly inspired in these others style guides:
- [Google HTML/CSS Guide](https://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml)