Hoi lerrie,
Ik geloof niet dat er echte wetten of regels voor schone onderwater-code zijn, behalve het "springt u maar in" principe.
Als je de
Html-Tidy extensie in Firefox hebt zitten, kan je de paginacode automatisch laten opschonen.
Maar Tidy pakt het wel heel erg rigoreus aan!
Iets als dit ...:
HTML:
...
<ul id="nav">
<li>
<h2><a href="index.html" title="home">Home</a>
</h2>
</li>
<li>
<a href="inruwa.html" title="Inruwa bv">Inruwa Bv</a>
</li>
<li>
<a href="inkten.html" title="Inkten">Inkten</a>
<ul>
<li><a href="janeckeschneemann.html" title="Jänecke Schneemann">Jänecke+ Schneemann</a></li>
<li><a href="classiccolours.html" title="Classic Colours">Classic Colours</a></li>
</ul>
</li>
<li>
<a href="rubberdoeken.html" title="Rubberdoeken">Rubberdoeken</a>
</li>
<li>
<a href="#" title="hulpmiddelen">Hulpmiddelen</a>
<ul>
<li><a href="schwegmann.html" title="Schwegmann">Schwegmann</a></li>
<li><a href="overige.html" title="Overige">Overige</a></li>
</ul>
</li>
<li>
<a href="contact.html" title="Contact">Contact</a>
</li>
<li><a href="bestellen.html" title="Bestellen">Bestellen</a></li>
</ul>
...
... wordt omgezet in dit:
HTML:
<ul id="nav">
<li>
<h2>
<a href="index.html" title="home">Home</a>
</h2>
</li>
<li>
<a href="inruwa.html" title="Inruwa bv">Inruwa Bv</a>
</li>
<li>
<a href="inkten.html" title="Inkten">Inkten</a>
<ul>
<li>
<a href="janeckeschneemann.html" title="Jänecke Schneemann">Jänecke+
Schneemann</a>
</li>
<li>
<a href="classiccolours.html" title="Classic Colours">Classic Colours</a>
</li>
</ul>
</li>
<li>
<a href="rubberdoeken.html" title="Rubberdoeken">Rubberdoeken</a>
</li>
<li>
<a href="#" title="hulpmiddelen">Hulpmiddelen</a>
<ul>
<li>
<a href="schwegmann.html" title="Schwegmann">Schwegmann</a>
</li>
<li>
<a href="overige.html" title="Overige">Overige</a>
</li>
</ul>
</li>
<li>
<a href="contact.html" title="Contact">Contact</a>
</li>
<li>
<a href="bestellen.html" title="Bestellen">Bestellen</a>
</li>
</ul>
...
:d
Zelf vind ik dit mooi genoeg:
HTML:
<ul id="nav">
<li><h2><a href="index.html" title="home">Home</a></h2></li>
<li><a href="inruwa.html" title="Inruwa bv">Inruwa Bv</a></li>
<li><a href="inkten.html" title="Inkten">Inkten</a>
<ul>
<li><a href="janeckeschneemann.html" title="Jänecke Schneemann">Jänecke+Schneemann</a></li>
<li><a href="classiccolours.html" title="Classic Colours">Classic Colours</a></li>
</ul>
</li>
<li><a href="rubberdoeken.html" title="Rubberdoeken">Rubberdoeken</a></li>
<li><a href="#" title="hulpmiddelen">Hulpmiddelen</a>
<ul>
<li><a href="schwegmann.html" title="Schwegmann">Schwegmann</a></li>
<li><a href="overige.html" title="Overige">Overige</a></li>
</ul>
</li>
<li><a href="contact.html" title="Contact">Contact</a></li>
<li><a href="bestellen.html" title="Bestellen">Bestellen</a></li>
</ul>
Maar editors maken er soms een rommeltje van, vooral als je in de ontwerp-weergave gaat knippen en plakken.
Als verwoed Notepad++er klop ik alle code er met de hand in, en verzorg ik het inspringen meteen al vanaf het begin van de bouw. Misschien iets extra werk, maar dan is het meteen goed; en het is nu een gewoonte geworden.
Dan doe ik het zo, dat ik het zelf het makkelijkst kan herkennen: ook met commentaartjes en/of witregels tussen belangrijke brokken.
Vooral de <div>'s en de <div>'s binnen <div>'s spring ik erg zorgvuldig in.
- Bij heel veel geneste <div>'s poot ik achter de sluit-</div> steeds de id van welke div er nu weer gesloten wordt:
HTML:
...
...
<p>De voorlaatste regel!</p>
<p>De laatste regel!</p>
</div><!-- einde #content -->
</div><!-- einde #contentwrapper -->
<div class="cleartUmaar"><!-- ! --></div>
</div><!-- einde #main-->
...
Dat vergemakkelijkt het verhuizen van brokken code als dat later nodig mocht blijken.
En daarmee vermijd ik dat ik er door de html-validator op attent gemaakt moet worden dat er ergens een </div> of twee ontbreken.
Als de laatste </div> nog inspringt, heb ik er eentje gemist!
Met vriendelijke groet,
CSShunter