# Web Development as Tag Soup

**URL:** <https://discourse.codinghorror.com/t/web-development-as-tag-soup/287>\
**Category:** blog\
**Created:** [July 20, 2008, 12:00am UTC](https://discourse.codinghorror.com/t/web-development-as-tag-soup/287 "2008-07-20T00:00:00Z")\
**Posts on this page:** 20\
**Page:** 3

<div class="post-metadata">

**Author:** ![Tom\_Davies](https://discourse-cdn.codinghorror.com/letter_avatar_proxy/v2/letter/t/f17d59/32.png) [@Tom\_Davies](https://discourse.codinghorror.com/u/Tom_Davies)\
**Post date:** [July 21, 2008, 12:00am UTC](https://discourse.codinghorror.com/t/web-development-as-tag-soup/287/41 "2008-07-21T00:00:00Z")

</div>

Two things which work better than the tag soup tools you mention:

GWT – create your UI programatically, rather as you would with a GUI toolkit, getting all the type safety, reuse and refactoring support you expect.

Tapestry – You still have HTML templates with expressions in an expression language embedded into them, but the emphasis on creating reusable, parameterised components, and the matching of view components in your HTML to model components in your server side actions makes your pages much cleaner ([http://tapestry.apache.org)](http://tapestry.apache.org))

---

<div class="post-metadata">

**Author:** ![Mike\_G](https://discourse-cdn.codinghorror.com/letter_avatar_proxy/v2/letter/m/34f0e0/32.png) [@Mike\_G](https://discourse.codinghorror.com/u/Mike_G)\
**Post date:** [July 21, 2008, 12:00am UTC](https://discourse.codinghorror.com/t/web-development-as-tag-soup/287/42 "2008-07-21T00:00:00Z")

</div>

Jeff,  
I feel you with the tag soup, especially in classic ASP. However, I just do not run into that in .NET 2.0 and later. I find that after combining user-controls, web custom controls, and judicious use of the render method that I’ve eliminated most server code from my HTML.

I’m so adamant about server code being mixed with my HTML that I’ve gone on a mission to make my teammates abandon the practice. Overall, our project may contain more user-controls but ever since we’ve found better ways to utilize web custom controls these multi-filed pieces have been removed.

The only time I’m finding myself using server-side code is when I’m working with JavaScript. Even now, though, I’m coming up with ways to build a set of best practices for our team to eliminate this server tagging.

I think you just need to revisit why you are needing these tags. If you’re building a list or table, would this not be better done using XSL and XSLT (hopefully on the client; offload that work to the browser!)?

---

<div class="post-metadata">

**Author:** ![Ben](https://discourse-cdn.codinghorror.com/letter_avatar_proxy/v2/letter/b/df788c/32.png) [@Ben](https://discourse.codinghorror.com/u/Ben)\
**Post date:** [July 21, 2008, 12:00am UTC](https://discourse.codinghorror.com/t/web-development-as-tag-soup/287/43 "2008-07-21T00:00:00Z")

</div>

It does seem that the two approaches are to either output html with functions, or to intersperse it. I generally use PHP or perl at work, which means for the most part I do the interspersing.

Moving everything into functions will make the view look cleaner, but I’ve found that you can still end up with a situation where making the markup valid requires knowledge of what is inside those functions, so that ends up making the problem more difficult in the end, or it can.

Reducing it to just loops and printing helps.

I do find the lisp approach interesting though:  
(dashes mean spaces)  
(yaclml:with-yaclml-output-to-string  
–(:html (:head (:title Hello, world))  
----(:body (:h1 Hello, world)

---

<div class="post-metadata">

**Author:** ![Ben](https://discourse-cdn.codinghorror.com/letter_avatar_proxy/v2/letter/b/df788c/32.png) [@Ben](https://discourse.codinghorror.com/u/Ben)\
**Post date:** [July 21, 2008, 12:00am UTC](https://discourse.codinghorror.com/t/web-development-as-tag-soup/287/44 "2008-07-21T00:00:00Z")

</div>

A small amount of tag soup is unavoidable (but done right, it _is_ delicious soup!)

My solution when it comes to things like a CMS is to write a simple (although fairly crude) scripting language within the HTML that is the page content - this way the PHP/HTML soup is minimal, elegant and stupid and the logic is folded into the data.

To some extent, I do this in other areas, such as a navigation menu with sub menus displayed as a list. I will create a simple (not XML!!!) way to store the menu items in a plain text file, and parse that with PHP. An entry might look like:

# text | tooltip | url | sub-menu filename | rule

Home | Return to home page | ./ | index.nav | group = any  
Admin | Administer the website | ./admin/ | admin.nav | group = admin

And in the end, as long as you are clever with your CSS, tag soup is really only a few small a/ul/li/p/div elements here and there - if you’re overwhelmed by messy code, it’s probably a sign that your HTML is to blame.

---

<div class="post-metadata">

**Author:** ![Leo\_Horie](https://discourse-cdn.codinghorror.com/letter_avatar_proxy/v2/letter/l/bbe5ce/32.png) [@Leo\_Horie](https://discourse.codinghorror.com/u/Leo_Horie)\
**Post date:** [July 21, 2008, 12:00am UTC](https://discourse.codinghorror.com/t/web-development-as-tag-soup/287/45 "2008-07-21T00:00:00Z")

</div>

Some thoughts on view language design (interesting mostly only if you’re designing frameworks): [http://lhorie.blogspot.com/2008/07/designing-maintainable-view-code.html](http://lhorie.blogspot.com/2008/07/designing-maintainable-view-code.html)

---

<div class="post-metadata">

**Author:** ![TiTi](https://discourse-cdn.codinghorror.com/letter_avatar_proxy/v2/letter/t/eb8c5e/32.png) [@TiTi](https://discourse.codinghorror.com/u/TiTi)\
**Post date:** [July 21, 2008, 12:00am UTC](https://discourse.codinghorror.com/t/web-development-as-tag-soup/287/46 "2008-07-21T00:00:00Z")

</div>

Hi guys, here is what your’re looking for : TinyButStrong PHP template engine system. The best template system i’ve ever know.  
Look at the article Doing PHP templates of the 3rd kind : [http://www.tinybutstrong.com/article\_3rd\_kind.html](http://www.tinybutstrong.com/article_3rd_kind.html)  
The syntax is clear and powerful, it really SEPARATE the program (php) from the view (html+tbs syntax).  
It’s under GPL, and way faster than smarty. Powerful modules, great help, … a must have.  
Take a look at the Examples and Why use it? and 5 Golden Rules ([http://www.tinybutstrong.com/support.php#goldenrules)](http://www.tinybutstrong.com/support.php#goldenrules)) and of course Manual.  
I’m actually writing a tuto about PHP 5 Objects with TBS, stay tuned !  
(structured website)

And I’ve recently receive my CodingHorror Tee-shirt, sweet !  
TiTi from FRANCE.

---

<div class="post-metadata">

**Author:** ![JaniH](https://discourse-cdn.codinghorror.com/letter_avatar_proxy/v2/letter/j/5daacb/32.png) [@JaniH](https://discourse.codinghorror.com/u/JaniH)\
**Post date:** [July 21, 2008, 12:00am UTC](https://discourse.codinghorror.com/t/web-development-as-tag-soup/287/47 "2008-07-21T00:00:00Z")

</div>

XML+XSLT /could/ be an answer to this tag soup stuff. Or some XML-based template engine.

Still, I think formatting your templates correctly will help a lot, even if you put in snippets of PHP/ASP/whatever.

That HAML stuff is scary. Is it supposed to be readable? =)

---

<div class="post-metadata">

**Author:** ![MikeS](https://discourse-cdn.codinghorror.com/letter_avatar_proxy/v2/letter/m/919ad9/32.png) [@MikeS](https://discourse.codinghorror.com/u/MikeS)\
**Post date:** [July 21, 2008, 12:00am UTC](https://discourse.codinghorror.com/t/web-development-as-tag-soup/287/48 "2008-07-21T00:00:00Z")

</div>

I second the comment on GWT…it truly is the best way I’ve seen to do a non-trivial web application developed by a team. You can brute force any framework/style on a trivial application and we’ve all written code that you’re the only one who’s ever going to see. GWT forces you to abandon all the bad behavior that we somehow accepted when we switched over to the web back in the old days. Traditional heavy GUI application development has all the right implementations, but the web forced us all to bail on them. Interestingly, I’ve seen very, very strong web developers struggle with GWT since it forces a rigor and style of thinking that they’ve never been accustomed to. If you’ve written apps in Swing, SWT or any of the traditional Microsoft UI tools, it’s the way to go.

---

<div class="post-metadata">

**Author:** ![JohnC](https://discourse-cdn.codinghorror.com/letter_avatar_proxy/v2/letter/j/9de0a6/32.png) [@JohnC](https://discourse.codinghorror.com/u/JohnC)\
**Post date:** [July 21, 2008, 12:00am UTC](https://discourse.codinghorror.com/t/web-development-as-tag-soup/287/49 "2008-07-21T00:00:00Z")

</div>

This is exactly why I’ve been so keen on placing as much of my code in the code behind files as possible while developing [ASP.NET](http://ASP.NET) applications. For example, even though you can insert tags that show what value a control should be bound to, or what method should be called when I click a button, I want those declarations done in C# (or [VB.NET](http://VB.NET)) to provide clearer separation, and in my opinion easier reading.

There still is a code behind file for the view in MVC isn’t there? It’s been a while since I’ve taken a look at it. Couldn’t that provide a way to ease some of this pain?

---

<div class="post-metadata">

**Author:** ![Ian\_Potter](https://discourse-cdn.codinghorror.com/letter_avatar_proxy/v2/letter/i/e9c0ed/32.png) [@Ian\_Potter](https://discourse.codinghorror.com/u/Ian_Potter)\
**Post date:** [July 21, 2008, 12:00am UTC](https://discourse.codinghorror.com/t/web-development-as-tag-soup/287/50 "2008-07-21T00:00:00Z")

</div>

One of the more elegant-looking solutions to this problem that I’ve found is PhpSprockets ([http://code.google.com/p/phpsprockets/).](http://code.google.com/p/phpsprockets/).) It generates valid X/HTML in PHP so it becomes much easier to write your entire page in PHP. I haven’t used it, though, so I can’t say how good it is in practice.

---

<div class="post-metadata">

**Author:** ![hombre](https://discourse-cdn.codinghorror.com/letter_avatar_proxy/v2/letter/h/ecb155/32.png) [@hombre](https://discourse.codinghorror.com/u/hombre)\
**Post date:** [July 21, 2008, 12:00am UTC](https://discourse.codinghorror.com/t/web-development-as-tag-soup/287/51 "2008-07-21T00:00:00Z")

</div>

I don’t think that flex and/or silverlight fix the problem of effectively marrying code to html, because they don’t output html. It’s not an apples to apples comparison, and not relevant.

The problem, you see, is html! I don’t need another syntax that will, if it’s to be as powerful (or broken) as html, will end up being almost, but not quite html.

It’s very hard to create html that uses javascript (ie ajax) and proper css that really does work cross browsers for a decent sized web application while keeping everything easy to maintain / change and standards compliant and localized/globalized.

---

<div class="post-metadata">

**Author:** ![PiotrN](https://discourse-cdn.codinghorror.com/letter_avatar_proxy/v2/letter/p/85f322/32.png) [@PiotrN](https://discourse.codinghorror.com/u/PiotrN)\
**Post date:** [July 21, 2008, 12:00am UTC](https://discourse.codinghorror.com/t/web-development-as-tag-soup/287/52 "2008-07-21T00:00:00Z")

</div>

There are also TAL markups ( [http://www.zope.org/Documentation/Books/ZopeBook/2\_6Edition/AppendixC.stx,](http://www.zope.org/Documentation/Books/ZopeBook/2_6Edition/AppendixC.stx,) [http://phptal.motion-twin.com/introduction.html)](http://phptal.motion-twin.com/introduction.html)) wich make the xhtml code to look like real xhtml.

---

<div class="post-metadata">

**Author:** ![Miika](https://discourse-cdn.codinghorror.com/letter_avatar_proxy/v2/letter/m/3be4f8/32.png) [@Miika](https://discourse.codinghorror.com/u/Miika)\
**Post date:** [July 21, 2008, 12:00am UTC](https://discourse.codinghorror.com/t/web-development-as-tag-soup/287/53 "2008-07-21T00:00:00Z")

</div>

I found Amrita ([http://amrita.sourceforge.jp/docs/QuickStart.html)](http://amrita.sourceforge.jp/docs/QuickStart.html)) to be quite interesting approach. Didn’t try it yet though.

---

<div class="post-metadata">

**Author:** ![Goran](https://discourse-cdn.codinghorror.com/letter_avatar_proxy/v2/letter/g/a6a055/32.png) [@Goran](https://discourse.codinghorror.com/u/Goran)\
**Post date:** [July 21, 2008, 12:00am UTC](https://discourse.codinghorror.com/t/web-development-as-tag-soup/287/54 "2008-07-21T00:00:00Z")

</div>

I use jquery’s taconite plugin to avoid getting code into the presentation layer.

---

<div class="post-metadata">

**Author:** ![Philippe](https://discourse-cdn.codinghorror.com/letter_avatar_proxy/v2/letter/p/f14d63/32.png) [@Philippe](https://discourse.codinghorror.com/u/Philippe)\
**Post date:** [July 21, 2008, 12:00am UTC](https://discourse.codinghorror.com/t/web-development-as-tag-soup/287/55 "2008-07-21T00:00:00Z")

</div>

Have a look at smalltalk seaside. I don’t know if it’s a better way, but it’s at least a different way.

---

<div class="post-metadata">

**Author:** ![JL14](https://discourse-cdn.codinghorror.com/letter_avatar_proxy/v2/letter/j/ecae2f/32.png) [@JL14](https://discourse.codinghorror.com/u/JL14)\
**Post date:** [July 21, 2008, 12:00am UTC](https://discourse.codinghorror.com/t/web-development-as-tag-soup/287/56 "2008-07-21T00:00:00Z")

</div>

Hmm… Java lets me easily define my own custom tags (parameterized and all) which cleanly separates the code out of the way. No need to mix tags and code (the older versions were doing this since they copied the MS ASP approach, thankfully that is no longer the case).

---

<div class="post-metadata">

**Author:** ![Matt](https://discourse-cdn.codinghorror.com/letter_avatar_proxy/v2/letter/m/a6a055/32.png) [@Matt](https://discourse.codinghorror.com/u/Matt)\
**Post date:** [July 21, 2008, 12:00am UTC](https://discourse.codinghorror.com/t/web-development-as-tag-soup/287/57 "2008-07-21T00:00:00Z")

</div>

Look, it’s programming 101. Break up the routine into smaller, saner chunks. Partials and user controls work fine.

---

<div class="post-metadata">

**Author:** ![Dave](https://discourse-cdn.codinghorror.com/letter_avatar_proxy/v2/letter/d/ee7513/32.png) [@Dave](https://discourse.codinghorror.com/u/Dave)\
**Post date:** [July 21, 2008, 12:00am UTC](https://discourse.codinghorror.com/t/web-development-as-tag-soup/287/58 "2008-07-21T00:00:00Z")

</div>

On the java side, have a look at Wicket ([wicket.apache.org](http://wicket.apache.org)).

Cleanly separated view template from code, small reusable visual/logical components, no tag soup at all.

---

<div class="post-metadata">

**Author:** ![Masklinn](https://discourse-cdn.codinghorror.com/letter_avatar_proxy/v2/letter/m/35a633/32.png) [@Masklinn](https://discourse.codinghorror.com/u/Masklinn)\
**Post date:** [July 21, 2008, 12:00am UTC](https://discourse.codinghorror.com/t/web-development-as-tag-soup/287/59 "2008-07-21T00:00:00Z")

</div>

Jeff, you may be interested by the TAL or Kid/Genshi approaches: instead of creating a new template language mixed in with the markup (or putting raw code directly as RHTML or JSPs do), they augment existing markup with custom attributes.

This has the following advantages:

- Usually, they mandate xml well-formedness, which means your output should always be well-formed
- Browsers ignore custom attributes (usually), which means you can preview the raw template code… most other template languages don’t allow that
- They have access to existing XMLy technologies (e.g. Genshi uses XInclude for fragment inclusion)

I do prefer Django’s approach though (a very restricted template language, forcing the logic either in custom template tags or in the controller/view code)

---

<div class="post-metadata">

**Author:** ![PhillipO](https://discourse-cdn.codinghorror.com/letter_avatar_proxy/v2/letter/p/8797f3/32.png) [@PhillipO](https://discourse.codinghorror.com/u/PhillipO)\
**Post date:** [July 21, 2008, 12:00am UTC](https://discourse.codinghorror.com/t/web-development-as-tag-soup/287/60 "2008-07-21T00:00:00Z")

</div>

We’ve extended our PHP5 framework to auto-generate XML output. It also expects processing instructions and apply the linked XSL docs accordingly.

We’ve found it greatly reduced the amount of code we had to write - its now down to some form-processing logic, a bit of SQL, and XSL.

Using XSL as the templating language has other benefits too - we can call back to the framework and grab rendered XML for other pages (shopping carts and tag-clouds, for example), we can use the XPath doc() function to request page fragments from other sites, and we can easily switch output from HTML to JSON by switching the stylesheet.

[Previous page](https://discourse.codinghorror.com/t/web-development-as-tag-soup/287.md?page=2)

[Next page](https://discourse.codinghorror.com/t/web-development-as-tag-soup/287.md?page=4)