Indentation In Html

Whenever I start a new project one of the first things I do is put in a base index.php page. Yes, it's a .php file, but I won't be looking at the PHP just yet.

Normally, it looks a little something like this:


I've already got a few basics set out that I tend to stick to. For instance, so far each of my projects has been XHTML Strict, which is why it's always up there. Similarly, I use the same character set, and (at least initially) have two CSS files called reset.css and base.css stored in a subdirectory called style.

This all looks lovely and so on, but then I start to add some PHP in as time goes on, and in order to keep the indentation looking right I have to put weird number of tabs in to my echos etc. Then I get a stage where I want to call the same function in different sheets, each one needing a different number of tabs to make it so that when you view the source it's easy to read.

So, I've been thinking, what if I didn't indent? That'd make the above page look like this:


Is that so hard to read? In a decent HTML viewer (still working on getting Firefox to open up any View Source requests in Notepad++, if you know how to do let me know) it's all correctly coloured, has groupings around the open and close tags, etc.

This makes a clear distinction between HTML (i.e. no indentation) and PHP (where I indent my code as normal). That makes creating the site a lot easier, surely, as anything that's indented is code, anything that isn't is HTML. Normally I'm a big advocate of indentation, but when two different things are running parallel in one document having two different levels of indentation just doesn't look easy to read to me and never has. Any thoughts on how you'd do this?

Just as an example document, how would you indent the following PHP file?


I would post how I'd normally do it, but I'd like to see what the general consensus on indents is while I think about it a little.

 

 

 

Comment/Reply (w/o sign-up)

Generally as programmer would want to indent the code, to ease coding, reading and later one debugging. Indentation on HTML would not hurt the resulting display as whitespace are ignore by the browser. e.g.
<p> 1space<p>
<p> 2spaces<p>
would look the same. In fact, to actually place [spaces], you need to specified &nbps;
Further more, indentation normally happen outside of those HTML tags. If you happen have long text and would like to split then indent them, it's ok too as only the 1 whitespace after your last word of the line is recognized, the rest of those tabs and newline are ignored too.

These applies too to php code. There's really zero worries on php code, as it's parsed on the server side, having tons of whitespace will not effect anything other than hard drive's throughput (it's not like you're writing megabytes of codes, a decent image is anytime bigger that your code), and well, that's of a much much greater magnitudes compare to your internet bandwidth.

After looking at your sample, there's one thing i would like to highlight. If you're really going into writing a professional website, you should consider using template engine, such as smarty, or write up your own simple one. I did that most of the time, just having some code to load an html page and replace all the {VAR} tags i implanted in with what's it's suppose to be. Of cause smarty or other template engine can give you more functionality, if you need them.

These will ease your debugging and designing stage later on. For debugging, mixing HTML and php code can really mess up your coding, especially having to keep track of those tags. And after sometime, you might start to really mix them up. Just take you sample code as an example.

Instead you could also this


It might seems all that convenient, but you'll really feel the pain when you page start to grow. About designing, with both split up, you could pass the HTML to a designer and have it touch up without having to worry that he will disrupt your important php codes. If you're designing yourself, this could also ease your job, especially if you're using those WYSIWYG editor. Those editor don't really work well with mixed html and php.

So, thrust me, code and artwork(HTML) should be done separately.

 

 

 

Comment/Reply (w/o sign-up)

I'd always felt the same way about keeping HTML and PHP separate, but never really looked in to ways of doing it to such a full extent. I'll have a look at template engines (although knowing me I'll insist on writing my own ), and - just for reference - I never use WYSIWYG editors. Everything I do I create from scratch, which means I know what's going on to a decent extent.

I realise whitespace is ignored by pretty much everything when it comes to web development, which is always useful. I'll admit to not being aware that you could get things to display in the way you showed above, so that's something new I've learned.

Right, time to go look at these here template-engine-thingamajigs.

Comment/Reply (w/o sign-up)

I'm like that also. But now starting understand the meaning or "re-inventing the wheel".

Anyway, I forgot to add that you can actually get tools to compact your html to save download time for your viewer. Just search around in google. I would only do that after completion, as it makes debugging much much harder

Comment/Reply (w/o sign-up)

The wheel's not compliant to modern standards, it needs to be stripped back down to basics and rebuilt to your exacting needs.

I'm not all that fussed about compacting HTML, but that's just me. My site's not currently meant to be...well, at all big. Anyway, after much googling and the like I found near-perfection in a simple little idea here. Taking his ideas apart and putting them back together again so I understood exactly what was going on was really useful and got me brushing up on my object-oriented code again. Sure, I changed it a fair bit, but that basic framework let me do pretty much exactly what I wanted and separating my function from my display. It's not as nifty as Smarty, and you do give any template designers free reign to do what they want with PHP, but as both roles are taken up by me at the moment I'm not too worried about that.

Comment/Reply (w/o sign-up)