HTML structureren (Systematisch laten inspringen)

[lerrie]

Vaak ziet de html code van mijn websites er niet uit. Bestaat er een algemene structuur van hoe de html eruit moet zien? Is er een voorbeeld of website die mij laat zien hoe ik mijn html systematisch kan laten inspringen of er in ieder geval voor zorgt dat als ik op bekijk bron code druk mijn html er netjes verzorgd uit ziet?

 

[Frats]

Hoe bouw je hem op? Want spaties in je broncode komen gewoon door in je code, als je in je editor gewoon mooie code maakt dan zie je die ook in de source code terug.

 

[csshunter]

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 ...:

...
   <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:

<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:

<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:
  

  ...
  			...
  			<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

 

[lerrie]

Bedankt CSSHunter, ben eruit, ga jouw aanpak proberen!

Wederom bedankt voor de uitleg.