New course! Every coder should learn Generative AI!
Try a free lesson+ 14
How to break up an overly long line of HTML-code?
In the programming languages I know, a string literal in the code can be split up to make the line shorter. Example Python: print( 'This could be a very long line ' 'but let\'s make it relatively short.' ) Example Javascript: console.log( 'Whatever nonsense we'd like ' +'to split up' ) In HTML however, like when you put in some e-mail link, it's one long spaghetto, for example like this: src="https://panmacmillan.azureedge.net/pml/panmacmillancorporatesite/media/blogs/picador/little-prince-tv.png.png" So... can this string literal splitting, tidying up the code, also be done in HTML somehow?
34 Answers
+ 17
He is asking how to write html source code like you would text in the pre tag but for your html source, more specifically strings for tag attributes.
<html>
<body>
<h1> title</h1>
<p>para</p>
<a href='
https://
www.somewebsite_with_very_long_url.com/
whose_url_never_ends/
and_has_many_paths
'>
Click me!
</a>
</body>
</html>
+ 14
Html does not have string literals. Your only bet is to manually format text. or use javascript's string literals to render text. This defeats a html & css only site only principle. So ymmv.
https://css-tricks.com/template-literals/
https://css-tricks.com/html-templates-via-javascript-template-literals/
https://medium.com/@trukrs/tagged-template-literal-for-html-templates-4820cf5538f9
+ 9
HonFu will you please link an example of what you are asking so we can experiment with it to try to help. Please remember to stay calm and speak politely to fellow members trying to help. Thanks.
+ 8
Yea URL shortener seems to be the only solution if you're on client side. HTML isn't Turing complete :/
But if you're using ASP/PHP, then their String.Format() functions can help.
+ 7
I don't think there is some hidden tag or attributes that can do that trick in html,
but you can shorten all the urls you have in your website with url. shortener sites like bitly.com, ow.ly, tinyurl.com and so many others.
With this you can have a short and clean url in all your href="".
+ 6
Yash, Ankit Chopra, Miracle, your answers have no relation to my question.
I don't know how often I have edited it now in order to avoid causing misunderstandings.
If you refuse to read properly, it's all in vain.
+ 6
Hello Yash
<br> is just for the output, right?
But HonFu is not interesting in formatting the output.
He only want to know how to split the code which you write into the editor. Depending on the device, you may not like long lines of code.
Do you unterstand it now?
+ 6
HonFu I understand your question, but I would suggest that if you are worried about pristine looking code, then it would be best to use a URL shortener such as the ones below:
https://developers.googleblog.com/2018/03/transitioning-google-url-shortener.html
https://bitly.com/
That said, honestly, nobody pays attention to how the URLs look on production sites. I can see it not looking so cool on SoloLearn playground, but when you're on a live site, *literally nobody* cares about how the urls in the source code look, because it's just way to time consuming, and again, not worth it for the most part. Cheers!
+ 4
I don't think so, html seem to use the white space you added and since it not a full programming language no syntax are checked even when you omit the closing tag no worries, am not sure there is a way around that though it just have to be a spaghetti thing
+ 4
lobber148, yeah, I could (and probably would have to) do that. Seems there really isn't a way...
It's probably a luxury problem. I mean, it's just a link, let it be as long as it wants.
I like to look at tidy code though. 😅
+ 3
That's so ugly to read though! 😨
+ 3
I have tried to rewrite the title of my question, since this somehow seems to trip up people a bit.
So this is not about output at all but *only* about how the code looks.
Normally, there's some sort of convention, like '79 letters per line' in Python (I think they changed it lately), or depending on what some team wants, it could be 100 or 120 or whatever.
Anyway, syntax normally allows you to split up a long string literal in a line.
In C, printf("Hello World"); could for example be rewritten to:
printf("Hello"
"World");
The code would still run.
So in HTML you may have something like this:
src="https://freemusicarchive.org/file/music/no_curator/Starbox/Bit_Bops/Starbox_-_05_-_Digital_Dream_Azureflux_Remix.mp3"
And if you feel it's too long, there's nothing you can do - as it seems.
So this is what I'm asking, if you could somehow make several lines of a chunk like this.
src ="https://freemusicarchive.org"
+ "/file/music/no_curator/Starbox/"
Without having to leave HTML.
+ 3
I'd like to break up a long line of code (string) in the HTML directly.
If this was Python, I could write it like this - for example - and it would still be working:
src = (
"https://freemusicarchive.org/" "file/music/no_curator/Starbox/" "Bit_Bops/Starbox_-_05_-_Digital" "_Dream_Azureflux_Remix.mp3"
)
Like this, I can make my code more tidy, more readable.
Of course I could generate the HTML from JS or from some other tool, where I have such a syntax.
My question is, though, if there is a way to split up a string like this, *directly in the HTML-code*.
Like there's some syntax that does the trick which I just don't know.
(So far, the answer seems to be 'no'.)
+ 3
Ah, funny, so at the breaks you can cut them, interesting!
Unfortunately, it seems you can't sneak in whitespace. The pattern ...
over/
under
... works, but...
over/
under
... doesn’t.
+ 2
I think JavaScript only help..
Html has no farmat function. It can validate email but not can split.
Not sure, so Iam curious to no is there any way..
Edit:
HonFu may I know why can't you use JavaScript?..
Html is only for markup, so js must need in addition.
+ 2
Jayakrishna🇮🇳, I am talking about the string *literal* in the code, how to format it.
Not about formatting the string.
(Sure, for that I use split method.)
+ 2
I don't think I got your question,but from your examples I think it break line you're taking about
+ 2
Dhairavi Makwana, your answer has no relation whatsoever to my question.
+ 2
Yash, if you had invested the proper amount of energy to *read* the question, or the many clarifications I have added in the thread, or the clarifications other users have added - you would know this yourself.
If you just shoot from the hip with your answers without understanding first, you aren't helping anyone.
+ 2
HonFu If you use VS Code then install the WebAily extension
https://marketplace.visualstudio.com/items?itemName=LeszekKorzan.webaily
Often have questions like this?
Learn more efficiently, for free:
Hot today
Problem
0 Votes
USING HTML ONLY!!!
5 Votes
Effects on HTML and JavaScript
0 Votes
Help. Помогите пожалуйста
1 Votes
Programming sickness
3 Votes
Izzy the iguana
0 Votes