Home » Html » Is there a recommended maximum line length for HTML or JavaScript?

Is there a recommended maximum line length for HTML or JavaScript?

Posted by: admin January 2, 2018 Leave a comment

Questions:

Most style guidelines for most programming languages recommend a maximum line length, typically 80 characters. This seems impractically short for HTML and JavaScript (when it is embedded in HTML). Is there a consensus on a practical line length limit for HTML/JavaScript? Or is it generally left up to the developer’s common sense?

Answers:

Since you mention JavaScript, this is what Douglas Crockford has to say on the topic:

Avoid lines longer than 80 characters. When a statement will not fit on a single line, it may be necessary to break it. Place the break after an operator, ideally after a comma. A break after an operator decreases the likelihood that a copy-paste error will be masked by semicolon insertion. The next line should be indented 8 spaces.

From: Code Conventions for the JavaScript Programming Language

Questions:
Answers:

Google says 500-ish for JS: https://developers.google.com/closure/compiler/faq#linefeeds

The Closure Compiler intentionally adds line breaks every 500
characters or so. Firewalls and proxies sometimes corrupt or ignore
large JavaScript files with very long lines. Adding line breaks every
500 characters prevents this problem.

uglify --max-line-len 500 or grunt-contrib-uglify options: { maxLineLen: 500 }

I’m not sure if the limit applies to HTML or CSS, but I haven’t seen that option for any CSS compressor I’ve used.

SMTP rules would apply to HTML email:
https://www.ietf.org/rfc/rfc0821.txt

The maximum total length of a command line including the command word
and the CRLF is 512 characters.

Questions:
Answers:

This limit seems to be a legacy from ancient IBM punch cards. Why is 80 characters the ‘standard’ limit for code width?

I really find it hard to work with only 80 characters for HTML. It gets unreadable really fast. So I decided for myself to take the line length on GitHub as measurement.

There seem to be different character limits depending on OS and/or browser. But 120 should be a quite safe value.

On Ubuntu:

  • Firefox: 126
  • Opera 12.16: 126
  • Chromium: 113

On OSX 10.9:

  • Google Chrome: 125
  • Firefox: 122
  • Safari: 121

Source: What is Github's character limit, or line length for viewing files on github?

Questions:
Answers:

The 80 character line limit spawns from the days of screens without a lot of real estate. Now it’s just like that for readability, and so it’s possible to have two (or more) different code files opened side-by-side, without having to scroll to see each of them.

Those reasons still apply to HTML and JavaScript, although, it’s obviously not necessary to comply with them. So it’s up to you.

I agree that with HTML it can be difficult to keep within that limit, although with JavaScript it shouldn’t be a problem.

Questions:
Answers:

The maximum limit on line length is whatever you feel comfortable reading and editing. personally, any code of mine that won’t fit on the screen without wrapping will be rewritten.

Questions:
Answers:

How about putting all of the HTML on one line? How will browsers cope with that? I’ve read somewhere that some browser (can’t remember which one) breaks with long lines.

Stripping new lines from the file is an optimisation technique. You don’t need to give clients the same easy-to-read version that you use when you develop it. You can give them a stripped version. Why? Bandwidth is not free.