New HTML Style Guide #117
New HTML Style Guide #117
Conversation
|
|
||
| ## Spacing | ||
|
|
||
| In general, the jQuery style guide encourages liberal spacing for improved human readability. The minification process creates a file that is optimized for browsers to read and process. |
There was a problem hiding this comment.
This isn't relevant. We don't ship minified HTML.
|
Common knowledge but worth emphasizing, the order of the charset declaration and the |
| - Always use the minimal, versionless doctype. | ||
| - Always define which language the page is written in. | ||
| - Always include `html`, `head`, and `body` tags. | ||
| - Always define the character encoding. The encoding should be defined as early as possible. |
There was a problem hiding this comment.
The encoding should be defined as early as possible.
IMHO it would be worth it to emphasise that it should be in the first 1024 bytes of the document.
|
Thanks for the hard work on this, @Slayslot! |
|
It's a pleasure @arthurvr :D and how can I remove the CLA:Error? I did sign it. |
|
And a note on the second commit: Any bad examples that I didn't remove, I believe that either they are common problems that should be mentioned or that without those bad examples the section wouldn't be understood as well. For eg: The separation of concerns section wouldn't be understood as good as it is with the bad example. |
|
@Slayslot The CLA check fails because you don't have your full name in your git config (currently you only have your username). Please see contribute.jquery.org on how to update your git config. |
|
This PR is meant to fix #92. |
| @@ -4,74 +4,170 @@ | |||
|
|
|||
There was a problem hiding this comment.
While extending this page it might be better to add a TOC similar to the JavaScript style guide? (possible by adding "toc": true).
Would it be a good idea here too?
There was a problem hiding this comment.
Add a Table of Contents, Basically add this to the top of your page:
<script>{ "title": "HTML Style Guide", "toc": true }</script>
You can see an example here
|
@arthurvr Anything I can do to get this merged? |
| ``` | ||
| <!doctype html> | ||
| ``` | ||
| Use [grunt-html](https://www.npmjs.com/package/grunt-html) to detect errors and potential problems. Most jQuery projects have a Grunt task for linting all HTML files: `grunt htmllint`. |
There was a problem hiding this comment.
I don't think Chassis has this (although I could be missing it). Might be useful to add that validation, especially with the documentation/style guides in Chassis.
6d9f0a1 to
e0cc9c5
Compare
|
Sorry about the CLA: Error reoccurring. I forgot that the last time I pushed on the repository I was using Windows. When I pushed the commit from linux it used my default username. Anyhow, please let me know if there are any further changes required. |
|
Still willing to get this merged. Please let me know if there are any changes required here. @arthurvr @sfrisk @scottgonzalez . Thanks. |
|
|
||
| ## Indentation | ||
| ## HTML Semantics: |
|
Updated. Sorry for the bad commit name, couldn't think of anything better :| |
|
@scottgonzalez Would love it if you can review this. Apologies that this one PR has taken so long. |
|
|
||
| ```html | ||
| <!-- Bad Example --> | ||
| <label>First<input type="radio" name="input" value="first"></label> |
There was a problem hiding this comment.
Move the label text after the input so the two examples are consistent.
|
Just one minor issue remaining. |
|
I can fix that issue when I merge this. |
No description provided.