CODEWITHSUNDEEP
html
Noob_Number_1
Noob_Number_1

Reputation: 755

How to keep HTML lines under 80 characters?

I've been told to keep HTML lines under 80 characters. I'm using Atom, and there is displayed a line to remind it.

I've found a lot of discussions about it but no example at all. For example, I have this line:

<p>
Born and raised in Valencia (Spain), graduated and married in Seville (Spain) and now I'm working and growing my own very family in Vienna (Austria).
</p>

and if I split it I get this:

<p>
Born and raised in Valencia (Spain), graduated and married in Seville (Spa
in) and now I'm working and growing my own very family in Vienna (Austria)
.
</p>

But when I look it on the browser there's a space between some words:

Born and raised in Valencia (Spain), graduated and married in Seville (Spa_in) and now I'm working and growing my own very family in Vienna (Austria)_.

(I typed underscores to point the generated spaces)

How can I avoid this? And when it comes to code: How to split tags, attributes, links, etc.? For example:

<link rel="apple-touch-icon image_src" href="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png?v=c78bd457575a">

or this

<meta name="twitter:title" property="og:title" itemprop="title name" content="Ask a Question" />

Does anyone know any resource to consult?

By the way, for the moment I'm just coding in HTML and not using JS at all, and I need to keep it like this if it's possible.

Upvotes: 2

Views: 1680

Answers (2)

tbraun89
tbraun89

Reputation: 2234

Just do it this way; you said under 80 so you don't need always 80.

<p>
Born and raised in Valencia (Spain), graduated and married in Seville
(Spain) and now I'm working and growing my own very family in Vienna
(Austria).
</p>

Other example with multiline property (you have to use tabs not spaced for the URL to work), but I recommend not to use this (like Justinas already mentioned in the comments), because it can lead to problems, sometimes it's better to adopt the rules:

<img src="https://cdn.sstatic.net/Sites/stackoverflow/
	img/apple-touch-icon.png?v=c78bd457575a">

Upvotes: 2

Justinas
Justinas

Reputation: 43479

Split it close to 80 symbols.

<p>
    Born and raised in Valencia (Spain),
    graduated and married in Seville
    (Spain) and now I'm working and
    growing my own very family
    in Vienna (Austria).
</p>

For tag splitting - split on every attribute:

<link
    rel="apple-touch-icon image_src"
    href="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png?v=c78bd457575a"
>

Please note that it's sometimes better to exceed line limit to increase readability.

Upvotes: 4

Related Questions