0

Ugly and Neat Markup

Notice how in the 'ugly' side, the doctype is all the way indented and some of the meta lines extend past the left indent.

How can I get my markup looking neat when viewing source in a browser? Is there a certain way to encode the code while using an editor? I use Notepad++ by the way.

J82
  • 2,327
  • 5
  • 26
  • 32

6 Answers6

2

Large blocks of unindented code like you see in the left hand side are probably being written out server side, and so although the tag that creates them is nicely indented in your HTML the erver script output will not honour that.

shanethehat
  • 15,460
  • 11
  • 57
  • 87
  • Ah, that makes sense. I just realized the parts that are unindented were written out server side by WordPress through the wp_head hook. – J82 Jul 21 '11 at 00:46
1

It's not about encoding, it's about writing neat source code, haha. If you are outputting from php or something you can use keep track of how far to indent each thing or you an use some sort of template output function that keeps track of how many tags are open for you and indents the correct amount each time. But, there is no point on having neat HTML, the only important thing is that it's valid. Developer Tools will make it neat for you when you're trying to debug, and actually removing all that whitespace used to make it neat can reduce your page size quite a bit.

Paul
  • 139,544
  • 27
  • 275
  • 264
  • 1
    Can you elaborate on neat php? Are there some utilities that will help prettify things for you? – mrtsherman Jul 21 '11 at 00:42
  • I'm not sure what I was using at the time, it was part of a template system for some freelance job I did once. Basically the templates were made properly indented, and to output HTML to part of the template I did something like `$tpl->output('
    Test');` Then the template system would parse it and put each opening tag on a newline indented one more space, and the closing tags would match. It would also produce a warning if when the page finished the tags weren't balanced.
     – Paul Jul 21 '11 at 00:48
1

The ugly ones probably look pretty in the underlying php or other source. Once generated into HTML it looks ugly, and very few programmers will try to make that pretty too - it's not worth it.

Ariel
  • 25,995
  • 5
  • 59
  • 69
  • The ugly one on the left is actually mine. Yes, it does look pretty beforehand but when I upload it, it turns out looking like that. – J82 Jul 21 '11 at 00:42
  • Totally normal. If you want, you can add some extra whitespace in the generated HTML to make it pretty. – Ariel Jul 21 '11 at 00:45
1

It's funny that what you list as "ugly" seems properly indented to me... at least from what I can tell from the screenshot.

In any case, it doesn't matter. Most of the time these days, sites are made with something dynamic, and a lot of the HTML formatting isn't explicitly output.

If you were to view the source on many of my sites, it is all rammed together on one line, as that is how I echo it out. I don't see the point in wasting bytes on line feeds. Especially these days with all of the browser tools available that reformat the source while debugging.

Brad
  • 159,648
  • 54
  • 349
  • 530
0

You really want your HTML code to look like this: view-source:http://lightningsoul.com/

As it uses the minimum amount of data to present itself to the browser. Remember that indents and white-spaces consume data as well as any other character.

Lightningsoul
  • 552
  • 5
  • 16
0

I use Eclipse to do my coding and I can use Source->Format to clean up my code and format it nicely.

For Notepad++, I believe you can use HTML tidy as per: Formatting code in Notepad++

TextFX -> HTML Tidy -> Tidy: Reindent XML

Community
  • 1
  • 1
F21
  • 32,163
  • 26
  • 99
  • 170