Chattbubblor - förslag på smidigare kod

Publicerar det här i "Webbutveckling - övrigt" då jag är osäker på vilket språk som är mest lämpat för att lösa detta.

Jag gjorde ett par chattbubblor i HTML/CSS som ska användas till en hemsida som jag hjälper till att utveckla. Jag har ingen jättestor erfarenhet av HTML/CSS utan går ganska mycket på det som fungerar, utan att tänka på hur mycket kodrader jag slösar och hur jag "tightar" ihop allting.

Ni kan se koden här: http://www.tobiasgerhardsson.com/chatt/
CSS:en finns på: http://www.tobiasgerhardsson.com/chatt/style.css

I och med att koden helt och hållet är HTML-baserad så måste jag klistra in följande kod för att skapa en grön ruta:

<div id="rad">
	<div id="bubbla" class="joakim"><p>Vad var det där för Google Maps Alpha Version 0.0000000001?</p>	</div>
	<div id="avatar-joakim"><img src="http://media.torsdagsrullen.se/pics/joakim.png" />
	</div>
</div>

Om jag vill fortsätta med en ny ruta från samma person så måste jag skriva in med class="joakim-old" för att få bort pilen i pratbubblan och få bubblan att sitta ihop mer med föregående pratbubbla:

<div id="bubbla" class="joakim-old"><p>Man blir LITE sugen på att stjäla från kändisars hus? Möjligheterna!</p></div>
</div>

Det känns ganska omständigt att dels behöva kopiera så mycket kod för en så enkel sak. Jag vill helst slippa att behöva sätta in en <img> för varje ruta också. Det smidigaste hade varit om bilden var implementerad i rutans egenskaper på något sätt.

Jag är nybörjare, så jag ska vara rak med vad jag vill åstadkomma. Det optimala hade varit om koden gjordes så att jag bara behövde ange en tagg per person och per bubbla. Exempelvis <joakim>Rutans text</joakim> eller <petter>Andra personens text</petter>. Det hade också varit underbart om det på något sätt gick att få det till att den skapade en joakim-old om jag sätter två <joakim> efter varandra. Nu kanske det inte går att få det så enkelt, men jag antar att det borde gå att göra någonting liknande med JavaScript eller så.

I min dröm så hade koden gärna sett ut så här istället:

<petter>Man blir LITE sugen på att stjäla från kändisars hus? Möjligheterna!</petter>
<joakim>Vad var det där för Google Maps Alpha Version 0.0000000001?</joakim>
<petter>Bra TONTRÄFF i rulla?</petter>
<petter>Man blir LITE sugen på att stjäla från kändisars hus? Möjligheterna!</petter>
<joakim>Man vill TYP ‘börja om’ i livet och bli exchange student redan i blöjåldern?</joakim>
<joakim>Man blir LITE sugen på att stjäla från kändisars hus? Möjligheterna!</joakim>
<petter>Haha. ‘It’s gonna be a real party salad tonight’.</petter>

Jag skulle verkligen uppskatta lite hjälp på traven med vad jag kan titta på för att få det att åtminstone bli lite enklare att skriva ut.