+ 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?

3rd May 2020, 10:18 PM
HonFu
HonFu - avatar
34 ответов
+ 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>
4th May 2020, 10:14 AM
Lord Krishna
Lord Krishna - avatar
+ 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
4th May 2020, 3:17 AM
Lord Krishna
Lord Krishna - avatar
+ 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.
5th May 2020, 6:14 PM
bobbie
bobbie - avatar
+ 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.
5th May 2020, 2:56 AM
Nikhil
Nikhil - avatar
+ 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="".
4th May 2020, 11:25 PM
ugochukwu Joseph
ugochukwu Joseph - avatar
+ 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.
5th May 2020, 10:07 AM
HonFu
HonFu - avatar
+ 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?
5th May 2020, 6:00 PM
Denise Roßberg
Denise Roßberg - avatar
+ 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!
6th May 2020, 6:48 AM
Tony
Tony - avatar
+ 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
3rd May 2020, 11:34 PM
✳AsterisK✳
✳AsterisK✳ - avatar
+ 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. 😅
5th May 2020, 9:11 PM
HonFu
HonFu - avatar
+ 3
That's so ugly to read though! 😨
3rd May 2020, 11:39 PM
HonFu
HonFu - avatar
+ 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.
4th May 2020, 7:27 AM
HonFu
HonFu - avatar
+ 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'.)
4th May 2020, 9:38 AM
HonFu
HonFu - avatar
+ 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.
11th May 2020, 12:19 PM
HonFu
HonFu - avatar
+ 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.
3rd May 2020, 10:46 PM
Jayakrishna 🇮🇳
+ 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.)
3rd May 2020, 11:29 PM
HonFu
HonFu - avatar
+ 2
I don't think I got your question,but from your examples I think it break line you're taking about
4th May 2020, 12:28 AM
Emmanuel
Emmanuel - avatar
+ 2
Dhairavi Makwana, your answer has no relation whatsoever to my question.
5th May 2020, 4:25 PM
HonFu
HonFu - avatar
+ 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.
5th May 2020, 4:53 PM
HonFu
HonFu - avatar
+ 2
HonFu If you use VS Code then install the WebAily extension https://marketplace.visualstudio.com/items?itemName=LeszekKorzan.webaily
11th May 2020, 11:56 AM
Ore
Ore - avatar