Markup Formatting

HTML & CSS
1

Firstly I know that formatting your markup isn’t required by any specification or to validate your markup (unless there is, I haven’t heard of such a thing though) - It’s more of a personal preference, or to simply make it easier for others to read.

However, I personally feel very strongly regarding the formatting (i.e. indentation, line breaks, readability, source code format, presentation) of HTML markup source code. And it seems others do, otherwise there wouldn’t exist HTML Tidy (unless it was created for another reason which I’m also unaware of). In fact, taking a look at a few select Websites by professional Web Designers / Developers shows that they have either used HTML Tidy or have formatted their markup in a similar way to HTML Tidy to make it look more professional and readable than other’s markup source code. I realize there isn’t a standard or a rule that states you must format your markup into a easily readable format, but I think what I’m trying to say is:

Why don’t more people format their markup to make it more easily readable and professional looking? (even if it isn’t professionaly marked up code)

Or do they format their markup but something happens on the end users end when viewing the source code?

I mean, well, I’ve made the attachment below showing a screenshot of how I’ve formatted my markup to appear, this is in Microsoft Windows Notepad below. The screenshot is 1440 x 1236 pixels in size.

That is actually the source code for the home page of my personal Website apcooper.co.uk. Now, first off I meant to screenshot the source code for the specially made [URL=“http://www.apcooper.co.uk/markup-formatting-example”]Markup Formatting Example Web page, rather than my home page however, I’ve changed my home page to be very basic and really, you going on my Website (on either page) doesn’t really give me much benefit right now. The Website isn’t setup as a public Website really (just so you mods know I’m not just posting for the sake of posting my own Website link in a thread). So anyway, you can go to either URL and view the source code and both of them are very similar.

The reason why I want you to go to either of these pages and view the source is so that you can compare it with the way the source code is formatted in the screenshot I’ve attached to this thread. So then I, and you, will know if the Web host or the Web browser has something to do with formatting the markup before it gets to the end user.

The reason I want to do this “test” is because there are some Websites out there that have absolutely horrible formatted markup and I just think - Why?!

Would it not be easier to format your markup for both yourself when editing in the future and for anyone who’s interested in your markup? I personally think it’s much more professional and it would earn the person respect from myself (not that my respect for anyone matters).

Or are you on the other side of this argument? Do you think it doesn’t matter how you format your markup, CSS and JavaScript? And for those that will say “it helps stop people copying our code when people try and read it when they can’t” because again, HTML Tidy helps us by simply putting the URL in (on the online tidy services) and it shows us all of the markup neat and tidy. So I (right now, at least until I’m enlightened on this topic) don’t see the point in purposely formatting your markup in a non-readable way and if you do write your markup by hand (in whatever text editor you use) why don’t you format your markup in a better fashion?

I’d just like to be able to view other Web pages’ source code and be able to read it easily (because I can understand it, it’s simply a case of formatting the markup to be readable) and also find out that it’s valid against what the Web Designer / Developer claims it to be. It would make me a very happy Web user and I’m sure it would make others happy and make the Web a better place.

Thoughts and feedback is appreciated.

Andrew Cooper

2

Why don’t more people format their markup to make it more easily readable and professional looking?
Probably because they’re lazy, or their code has been generated by Dreamweaver or they don’t realise the benefits of good indentation. When you have an enormous application where the HTML is generated by many different scripts, some of which you may have no control over, the indentations are also likely to mismatch.

There’s also the belief that saving a few bytes here and there by stripping out whitespace is a worthwhile bandwidth saving, where its benefit is more important than readability (example: Google’s main page).

Would it not be easier to format your markup for both yourself when editing in the future and for anyone who’s interested in your markup?
Yes. Readability of code is very important. Even though people have their own preferences as to how to do it, there should be a consensus to always make code readable.

Personally I think your indentations are too big, I prefer two spaces for everything - JavaScript, CSS, HTML, PHP. This is because once you are five levels deep or more, things start to look very far away from the left, and horizontal scrolling (horrible, horrible) becomes likely.

I wouldn’t lose too much sleep over it. Indent your code and if you come across code that isn’t, put it through something that will create the indentations for you. There are far more important things to worry about and spend your time on.

3

It is my opinion, and that would be a correct opinion, else I would hold a different opinion :p, that all code, whether html markup, css rulesets, or php/javascript functions, should be written for ease of reading by human beings. I recall reading that one should write code as if the maintainer were a violent psychotic who knows where you live. That maintainer may well be yourself six months or a year down the road, when you don’t remember what you did in the first place.

I don’t know of any large coding organization that doesn’t have its own manuals of style; MSFT, IBM, Nokia, Gnu, et al, all have specified styles for coding. They may differ from one another, but the goal is always ease of human readability. Many (most?) of these style manuals are available online. You just have to hunt them down.

For an individual to ignore the collective lore of coding style, and write in an unreadable manner, is at best simply silly; it is amateurish.

cheers,

gary

4

Do you think it would be fair to say they aren’t really professionals (at coding, whether it be Markup, styling code, JavaScript, PHP scripts, etc) if they don’t indent where it is necessary to do so? I would have to say that laziness has no place in the attitude of a professional and that most professionals who do use Dreamweaver would make sure their code is of excellent quality before publishing it to the Web.

I know what you mean, and Google is certainly an exception to the rule of formatting code, I feel that way anyway. However, generally speaking on a general Website that doesn’t receive as many hits as a search engine does, I don’t think this belief really makes much difference. I’ve done a test myself on this and still have samples results and really, it’s such a tiny different that the argument is laughable.

Definately. Whether the spaces or tab indentations are too small or too large for your liking, there should be some form of formatting so you can see that they’ve at least made an attempt to make their code more readable.

Yea, I knew someone was going to say that :stuck_out_tongue: I tab my indentations (which I do in MS Windows Notepad, so it’s 4 spaces) although I realize that the majority of the Web community encourage people to indent by 2 spaces, I haven’t found an option within MS NotePad that allows you to change this setting. Although I have a -coughcrackedcough- copy of Adobe Dreamweaver CS3 where you can edit the tab numbers and spaces, I don’t like using Dreamweaver. I prefer using MS Notepad over any other editor (including the -extension editors- to Notepad) because of it’s simplicity. Just open it up and code away, I don’t need to wait for a huge application to load up. I want to be in there straight away!

Would you say the de-facto standard is pretty much 2 spaces though? It would seem that way to me. I’m more than happy to change my coding habits to 2 spaces rather than 1 tab (4 spaces) if that’s the case.

Don’t lose too much sleep over it? I haven’t slept in 3 days! xD Kidding, but seriously - It really gets on my nerves seeing such horrible code that isn’t formatted, it looks so unprofessional. :-/ I don’t bother putting it through a HTML Tidy service, I just have a quick look over their code and then close it down, unless it’s really interesting. It’s just the fact that it looks so horrible!

Gary, have you got any URL’s or have any of these manuals for me to look at? Or could you tell me what search terms I should be using to hunt these manuals down? I think I read something similar for the BBC

Absolutely. That’s exactly what I think, it looks so amateurish and unprofessional. I instantly lose respect for the person who designed / developed a Website if their code a.) doesn’t validate against either XHTML 1.0 Strict or HTML 4.01 Strict and b.) isn’t formatted to be readable by humans. Even if their visual design is amazing, I still can’t stand it. I believe the markup and coding quality and presentation is just as important as the visual design of a Website.

Thanks for the feedback guys, anymore feedback / comments are welcome! :slight_smile:

P.S - Can a moderator approve my attachment for the original post, please? It’s just a screenshot of my markup in MS Windows Notepad but it’s important for others to see to compare with the markup they’ll receive in their source code viewer.

Andrew Cooper

5

Other text-editors like Crimson Editor (what I use), Notepad++, vim, UltraEdit, etc. are not exactly monolithic applications. Crimson Editor loads up about 1 second slower than Notepad, but it has syntax highlighting, tabs and the ability to decide how many spaces a tab is. It also auto-indents when I press enter. There are loads of other features, but these are very important. Using Notepad just because it’s minimalistic seems a bit silly - minimalism for the sake of minimalism, rather than a concrete reason.

I think you’re making a mountain out of a molehill here - extrapolating a disregard for proper indentations to a lack of professionalism is a bit much.

6

Few professional commercial sites are hand-coded. Even most personal sites are built on templates and simple CMS/blog tools.

This means most of the markup is generated by some application and not meant to be read by human beings. Formatting machine-generated code can, in some instances, be quite tricky. Especially if you want to preserve indention in a code snippet that may be used at many different structural levels. That would waste CPU cycles that some developers feel could be better used elsewhere.

But for hand-coded sites I agree with you. You should create human-readable markup, and even use comments where necessary.

7

I know about them and I’ve considered Notepad++ many times before. And it isn’t just because of minimalism for the sake of minimalism. I prefer a clean window that isn’t full of menu bars etcetera. Not that I can’t handle it, It just makes my life easier, my eyes are focused on the white window infront of me and I have a whole canvas to play around with. If MS Windows Notepad has the option to customize tabs and spacing it would be perfect for me. In fact I’m going to send some form of suggestion / request to Microsoft about it, as silly as it sounds! I may be lucky to get a reply xD

Until then I’ve been building my own custom MS Notepad application in VB.NET actually :slight_smile: It is exactly the same interface, just a few extra menu options at the top, if you get me. There won’t be any buttons, but there will be added items and functions to the menu bar that I can use. But it won’t be a load of features. So once I’ve completed that I think I’ll be happy! :smiley:

Maybe I am :-/ I just want to know that I’m doing the right thing, you know? And I’d rather start doing the right thing now rather than later. I don’t know much about it really so I’m asking what the professionals do, and whether they bother or not and for what reasons. And I think it’s just a personal / weird mind thing on the last part you mentioned. I know a lot of professionally designed and coded Websites are online without good indentation and formatting…But still, surely they could make a better effort.

But can’t the authors of these templates, CMS / Blogging platforms build them with code formatting and indentation in mind? I’m building a small CMS for a client in PHP & MySQL and so far everything, including the output of the PHP code with database results are appearing absolutely fine and how I want them to appear. I can have PHP database data come out as normal information in my HTML markup and it’ll be properly formatted so it will look like I’ve coded it by hand (which technically, I have). So I don’t see how hard it can be for others who are much more experienced and better than me for them to do the same thing.

Aye. I didn’t think of that one. Although, I don’t think it would be impossible to achieve!

Yay! :smiley: I was secretly waiting for you to come online and post in this thread! xD I’m glad you agree. I shall sit here, rocking back and forwards in my computer chair awaiting more replies to discuss how fantastic and professional formating markup is! :smiley: :stuck_out_tongue: Hehe

Andrew Cooper

8

I reckon that about 88% of the HTML pages are generated by PHP code and that 99.99% of statistics are incorrect.

I format my code in individual blocks which are saved in separate files. These files are then included when PHP takes over and I loose control :slight_smile:


<?php echo $doctype; ?>
<html>
<head>
  <?php echo $header; ?>
</head>
<body>

<?php /* 3-col START HERE */ ?>            	
<?php j_rnd(TRUE, 'xbox_fff') ?>
<div class="colmask holygrail">
  <div class="colmid">
    <div class="colleft">
      <div class="col1wrap">
        
          <!-- Column 1 start -->
          <div id='box_center' <?php /* col1 start */ ?> >
            <!-- google_ad_section_start -->
              <?php include '_box_center.php'; ?>
              <?php /* include '_col_mid_holygrail.php'; */ ?>
            <!-- google_ad_section_end -->
          </div>
          <!-- Column 1 end -->
          
      </div><?php /* col1wrap */ ?>
  
      <!-- Column 2 start -->
        <div id='box_left'>
          <?php echo $right;?>
          <?php /* include '_col_lft_holygrail.php'; */ ?>
        </div>
      <!-- Column 2 end -->
      
      <!-- Column 3 start -->
        <div id='box_right'>
          <?php echo $left; ?>
          <?php /* include '_col_rgt_holygrail.php'; */ ?>
        </div><?php /* box_right */ ?>
      <!-- Column 3 end -->
        
    </div><?php /* colleft */ ?>
  </div><?php /* colmid */ ?>

<div id="footer">
  <?php echo 0 ? '' : $footer;?>
  <?php /* include '_col_footer_holygrail.php'; */ ?>
</div>
</div><?php /* colmask holygrail */ ?>
<?php j_rnd(FALSE); ?>

</body>
</html>

.

9

You blamed Raffles for my statement, which he sort of challenged.

These poorly formatted and difficult to change templates and CMSes then take the blame. The usual cause is the failure to separate the programming logic from the document structure. That separation of layers is what we strive for with html/css/javascript orthogonality on the front end. That cms and template coders ignore this paradigm does not speak well of their professionalism, no matter how well they write php or whatever their language choice.

For snippets that are re-used, if they are program bits, their output should be well insulated from the html insertion point; it should not affect the html formatting. If, though, they are included snippets of html marked up content, they will mostly be used at equivalent points in each page. Even if there are nesting level differences, the snippets’ own formatting will be preserved, and serve its purpose.

Try “coding styles or coding standards”. You can prepend a company’s or organization’s name for a more specific search, e.g. “nokia coding styles or nokia coding standards”. Most are programming styles, but the idea applies just as well to structural markup languages (html), or to declarative presentation languages (css). There are many variations, and most are good. The key is to pick one, and use it religiously.

cheers,

gary

10

This in itself s a very amateur statement revealing a lack of understanding of development practices beyond a static means.

When your building up layers upon layers of modules or controllers in a dynamic sites it is virtually impossible to indent code perfectly. This is especially true with reusable templates where the indentation itself would vary depending on some outside unknown circumstance. Its just not practical or worth the clients dime to start tracking indentation with dynamic sites. Indentation can be accounted relative to the template but anything outside of that is impractical. In order to accomplish this at every template one would need to track the current depth in which the template is being executed and append the appropriate number of tabs based on that variable. Most sites pages don’t amount to a single static page but a build-up of multiple layers of reusable dynamic code which make this a much more difficult and impractical task then the former considering there is a countless amount of variables that come into effect that would need to be accounted for to make indentation “perfect”.

11

I was under the impression that some people don’t want their code to be easily read and copied, and so strip out white spaces and comments before uploading to the web for that reason as well as to reduce file size.

I would assume that the original documents are nicely formatted and commented and lend themselves to easy editing. And after each editing session the revised document is stripped before uploading.

I try for good formatting but sometimes while trying to get something up and working as fast as possible, cutting and pasting snippets of code, code formatting is not a priority. So far I am the only one who maintains any of my sites so I am the only one to suffer the consequences.

I too would be interested in looking at coding style manuals if anyone has a link.

12

They can, but it’s not that simple. We’ve recently implemented our new intranet using a CMS platform (Polopoly) where we have full control over the output. But I had to give up on my aim to produce nicely formatted output in all cases.

One problem is the JSP servlet engine itself, which doesn’t suppress line breaks after JSP tags (the way PHP does). So for each include file you’ll get a number of blank lines in the final output.

Then there’s the output templates. It’s not as simple as one template equals one web page. An output template could correspond to a single link. In some cases it might render as a list item, in another case it might render as an inline element in a paragraph.

There are other output templates, like lists of related links, etc., which aren’t always rendered at the same indention level.

Sure, you could eschew JSP and instead invent your own wheel. You could build a dynamic DOM tree and then serialise it when the whole document is complete. But that requires a lot of memory and a bit of computing power on the server. And why waste power on such things when it’s needed elsewhere? I’m probably the only one who ever looks at the generated source anyway! :slight_smile:

It’s easy to assign blame, but one should be careful about doing so until one has walked a mile in the other person’s shoes. I don’t know if you have, but as I mentioned above I’ve worked with a non-trivial CMS site and I’ve encountered some of the issues involved.

As you probably know, I’m a perfectionist nazi rather concerned about quality. But I’m also a pragmatist, and for me it seemed more important to focus on semantics and accessibility than on ironing out every little wrinkle in the markup output.

Easily said. Not always easily done.

Nope. Not in the real world, I’m afraid. To achieve something like that, you’d have to define multiple almost-identical templates whose only difference would be the amount of output indention. That would be insane!

13

Would you say the de-facto standard is pretty much 2 spaces though? It would seem that way to me. I’m more than happy to change my coding habits to 2 spaces rather than 1 tab (4 spaces) if that’s the case.

After getting used to 2-spaces for HTML and CSS, I found JSLint wants 4, which completely screws everything else up. Since I’m not willing to switch over to four spaces in my HTML/CSS, I just have to remember to do 4 spaces in JS to keep my sanity (since Lint only displays x-number errors before quitting in disgust).

14

I agree with you 100% on the importance of well-presented code. But there is one aspect of that that I have to disagree with, and that is indenting.

When you have items that extend to more than one line in your text editor, it can be a right pain to indent them properly, and if you ever need a smaller editor window it will probably throw it all out of kilter. Quite often I will have my text editor side-by-side with another window, and so any indenting in the text editor wastes valuable screen space.

15
Off Topic:

Tommy nearly tries for “Godwin’s Law” - <humour>quick close the thread</humour>. :lol:

Personally, I try to format the code in a readable manner (for myself) so I can edit it easily and keep track of changes. I suppose in most cases it’s a matter of pride in your work - or mindset - since usually most causal visitors don’t see your mark-up and only the weird Geek types bother peeking.

However, if you have a web-page showing examples of code - or sharing/syntax tutorials - then yes, I think it is highly important.

16

Ideally, you’d have your readable copy on your machine, and a highly optimised (and therefore ob-fu’d) version online for the fastest rendering etc.

Except when you’re giving links to the site out and asking for HTML/CSS help. I no longer bother trying to read those. I needs teh newlines.

17

Theoretically you’d hope that web professionals don’t use DW, but rather hobbyists do.

I’d rather see improper indenting, or lack of indenting, opposed to excessive whitespace :lol:

18

What a very strange subject (and boy Andrew, you sure know how to write a lot about a little!). I personally don’t see indenting or source code organisation as a sign of professionalism, everyone has their own method to managing source code and basing their skillset on whether they hit the tab key seems rather strict (and a bit neurotic). I’ve built websites where no indention occurs (however I do provide every item on a new line), while indenting does show the depth of structure, you could arguably omit all the indenting and as long as the “new line” occurs it’s still human readable. This presents a problem, what exactly is “human readable”, most people looking at the source code will be those who understand it (and they don’t tend to need visual aids), the people who tend to want the visual aids are those who cannot visualise the structure themselves (and they probably aren’t likely to know what half the code means - even if it does look pretty). I would argue minimalism within the source code is more important than the way it visually appears, agile code which is as tiny as possible will feel like the code does more for it’s money and to most professionals will “feel” nicer. After all, a well formatted 20 page lump of code won’t look nearly as sexy as a 12 page HTML file which uses less code (excluding any formatting added / cut out). As for me, I do indent my code using tabbed spacing. :slight_smile:

19

the people who tend to want the visual aids are those who cannot visualise the structure themselves (and they probably aren’t likely to know what half the code means - even if it does look pretty).

Both I and my Perl-programming-for-7-years husband, and his Perl-programming-for-over-10-years boss would disagree. Code has traditionally been indented for a reason, and we all know it’s not for the compiler or the interpreter. So much, in fact, that some silly goose went ahead and made a language what uses the spacing and indentation to actually delimit blocks!

*edit no I don’t mean whitespace… I was talking about Python

20

Yup. My bad. I meant to edit it after I seen it but I couldn’t. Sorry about that to both of you.

I agree with what you said too :slight_smile: and I’ll do just that and see what sort of materials come up. Thanks gary.

I’m not a professional, but I would one day like to be. Hence me asking the professionals here in the forumabout markup formatting :slight_smile: But from what I’ve seen of other professional’s Websites and some not so professional Websites and from the books I’ve read, so far, I’ve concluded that if markup is formatted in a human readable format it seems much more professional and of course it is easier to read.

If you could enlighten me on these development practices so I may understand why so many Websites source code is all squashed together with tags touching each other to the point where it’s hard to see where one tag starts and one ends, then that would be great for my education in Web development practices!

Why bother? If they do that thinking their code can’t be easily read (they’re correct, to a degree) and copied then they’re wrong and don’t know much (in my opinion). Someone who wants to read the source code or copy it can just type the URL into an online HTML Tidy and bobs your uncle. Job done. Bit more work than Select All > Copy > Paste, but it’s hardly a task that is going to stop someone from doing it if they really want to read the source code in an easy format.

Yea, I’m sure a lot of them do that, which is fine, if they are stripping everything out for performance gains, and it has a large impact then fair enough. But if it is just so that their source code is hard to read, then I think it’s silly.

Same here. I’m very concerned about the quality of my code, hence why I want it to be perfect and hence asking for others advice and feedback on this topic.

Ouch. So whilst you brought that up, which is something I was also going to mention - Is the standard for indentation in JavaScript 4 spaces?

This is what happens with me, which is why I always have my editors in full screen maximized view. I never usually have any windows at any other size except full screen. But I understand many other people have multiple windows in view at the same time.

I have an immense amount of pride in my work, but for me to be proud of my work it has to be of the best quality. So I’m asking for others help and advice on how to format my markup in an appropriate human readable form but that is also as close to any standard that may exist in markup formatting.

If you have a good / decent / fast Web hosting / server then do these “highly optimised” documents really make much difference? If it made a noticeable difference then sure, hell, I’d be uploading documents that don’t have any line breaks or spaces, nothing! But I’ve done such a test and the difference isn’t noticeable, so I stick to formatting my markup and code appropriately. I think Google is an exception to this though.

Any advice then on markup formatting? How many spaces / tabs? Where should there be line breaks?

Heh, Alex, I know :blush: I get told all the time I write more than I need to and I’m always making my life harder than it needs to be. But heh, I guess I like the challenge of a hard life than that of an easy one! I repeat myself a lot too :nono:

I’m a strict / militant kind of guy! :mad: But on a serious note, you could be right there about me sounding neurotic. I’ve been told by friends, teachers and family before that I may have OCD. It doesn’t concern me though, although it probably should. Heh, I’m a loony! :rofl:

I agree with what you’ve said about the agile stuff and what not, but as you said it is a strange subject. I really just want someone who I look up to as an authoritative figure to tell me how I should do line breaks in my HTML markup, what I should and shouldn’t indent, where I should and shouldn’t indent it and by how many tabs or spaces. As I said I’m not set on any particular style, the style I currently use though is as you see in the screenshot and on the source code of the sample page that I provided the URL for. The indents are by 1 tab (4 spaces in Windows).

I think I’ve learned a few good things from this thread, but I’d like to learn more, so please give some more feedback to me and help me out here. You guys are the professionals (you know which ones you are) so tell / teach me how to become a professional, please!

Andrew Cooper