html-style-guide

KO | EN

gitlite — search

#python #react #ai #llm #rust #deep-learning #nodejs #macos #awesome #cli #security #ios #mcp #open-source

html-style-guide

(★ 13)

No description available.

html-style-guide Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

```
```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
<html>
  <head></head>
  <body>
    <section></section>
  </body>
</html>
```

## Capitalization

Use only lowercase.

```html

<A HREF="/">Home</A>

<a href="/">Home</a>
```

## Document type

Use HTML5. And use HTML syntax, not XHTML. Hixie
[wrote some about it](http://hixie.ch/advocacy/xhtml).

```html

<br />

<br>

<!doctype html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
```

## 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

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Example</title>
</head>
  <body>
    <h1 style="font-size: 20px;">Lorem Ipsum</h1>
  </body>
  <script>
    document.querySelector("h1").style.color = "red";
  </script>
</html>

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Example</title>
  <link rel="stylesheet" href="main.css">
</head>
  <body>
    <h1>Lorem Ipsum</h1>
  </body>
  <script src="app.js"></script>
</html>
```

## Entity references

There is no need to use entity references like `&rdquo;` or `&mdash;` 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 &ldquo;&eur;&rdquo;.

The currency symbol for the Euro is “€”.

Mr.&nbsp;Someone
```

## Self-closing tags

Use the HTML5 way, not XHTML.

```html

<br />
<hr />

<br>
<hr>
```

## Attributes

Again, prefer the HTML5 way, not XHTML.

```html

<input type="checkbox" checked="checked">

<input type="checkbox" checked>
```

## Quotes

Always use double quotes.

```html

<input type=checkbox>
<input type='checkbox'>

<input type="checkbox">
```

## 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

<img class="block__element" id="unicorn" src="http://cl.ly/image/1a1U013E002Z" alt="Unicorn, rainbows, poop and stuff" width="500">

<img
  class="block__element"
  id="unicorn"
  src="http://cl.ly/image/1a1U013E002Z"
  alt="Unicorn, rainbows, poop and stuff"
  width="500"
>
```

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)

html-style-guide

html-style-guide Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

html-style-guide

html-style-guide Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README