Hoi Webdesigner4,
Hier nog wat extra info.
Id en name
Een id="..." en een name="..." zijn niet dezelfde dingen. Ze kunnen
soms dezelfde functie hebben, maar dat hoeft niet.
Voor een link <a> naar een bladwijzer kan je één van de twee gebruiken (of allebei, als ze maar dezelfde waarde hebben).
Stel je hebt op een pagina een inhoudsopgave met bladwijzer-links:
HTML:
<p>
<a href="#hoofdstuk-1">Hoofdstuk 1</a><br />
<a href="#hoofdstuk-2">Hoofdstuk 2</a><br />
<a href="#hoofdstuk-3">Hoofdstuk 3</a>
</p>
Dan kan je bij de hoofdstukken zelf neerzetten:
HTML:
<h2 name="hoofdstuk-1">Hoofdstuk 1</h2>
<p>In dit eerste hoofdstuk ... bla-die-bla ...</p>
...
<h2 name="hoofdstuk-2">Hoofdstuk 2</h2>
<p>In dit tweede hoofdstuk ... bliep-bliep-bliep ...</p>
...
<h2 name="hoofdstuk-3">Hoofdstuk 3</h2>
<p>In dit derde hoofdstuk ... blaf-blaf-blaf ...</p>
...
De links van de inhoudsopgave laten de pagina dan doorscrollen tot de
name-bladwijzer van het hoofdstuk dat je wilt hebben.
Er gebeurt exact hetzelfde als bij de hoofdstukken staat:
HTML:
<h2 id="hoofdstuk-1">Hoofdstuk 1</h2>
<p>In dit eerste hoofdstuk ... bla-die-bla ...</p>
...
<h2 id="hoofdstuk-2">Hoofdstuk 2</h2>
<p>In dit tweede hoofdstuk ... bliep-bliep-bliep ...</p>
...
<h2 id="hoofdstuk-3">Hoofdstuk 3</h2>
<p>In dit derde hoofdstuk ... blaf-blaf-blaf ...</p>
...
En met dezelfde waarde van de
id en de
name mag het ook:
HTML:
<h2 id="hoofdstuk-1" name="hoofdstuk-1">Hoofdstuk 1</h2>
<p>In dit eerste hoofdstuk ... bla-die-bla ...</p>
...
<h2 id="hoofdstuk-2" name="hoofdstuk-2">Hoofdstuk 2</h2>
<p>In dit tweede hoofdstuk ... bliep-bliep-bliep ...</p>
...
<h2 id="hoofdstuk-2" name="hoofdstuk-3">Hoofdstuk 3</h2>
<p>In dit derde hoofdstuk ... blaf-blaf-blaf ...</p>
...
Verder is een
id altijd
uniek: er mag maar één
id met een bepaalde waarde op een pagina staan.
- Daarom wordt tegenwoordig het gebruik van een id aangeraden als je naar een punt met een bladwijzer toe wilt.
- Een id is ook veel handiger als je javascript gebruikt: dan kan je met document.getElementById('...') elk element dat je nodig hebt bij zijn kuif pikken.
- Zie verder bv.: html-difference-between-id-and-name
=======
Is de
name dan nog ergens goed voor?
Ja, want de
name kan je bv. in formulieren gebruiken om groepen dingen bij elkaar te houden, want bij een <form> mogen meer elementen dan 1 dezelfde
name hebben. Bijvoorbeeld bij lijstjes met keuzerondjes:
HTML:
<form ...>
...
<p>Wat wilt u weten, html of css of javascript?
<input type="radio" name="soort" value="html"><br />
<input type="radio" name="soort" value="css">
<input type="radio" name="soort" value="javascript">
</p>
<p>Welke moeilijkheidsgraad?
<input type="radio" name="nivo" value="beginnend"><br />
<input type="radio" name="nivo" value="gevorderd">
</p>
<input type="submit" value="Bestel onze handleiding">
</form>
De ontvanger van het formulier krijgt dan bv. te zien:
soort=html,
nivo=beginnend.
=======
Nog wat over de "alt":
- De inhoud van het alt="..." attribuut wordt ook gebruikt door schermvoorlezers voor blinden en slechtzienden. Dan kan het belangrijk zijn om ipv alt="Foto van Willem" te zetten: alt="Foto: Willem in zijn regenpak." of alt="Foto: Willem in een luchtballon.".
- Als je een afbeelding hebt die alleen maar versiering op de pagina is (die geen betekenis heeft voor mensen die de pagina niet kunnen zien), dan moet je een "lege alt" bij een <img> opgeven, dwz alt="" (alleen twee aanhalingstekens vlak achter elkaar, geen spatie ertussen). Doe je dat niet, dan is het geen valid html, en begint de html-validator te mopperen.
- Internet Explorer is eigenwijs! Die laat de alt-tekst zien in een tooltip (zo'n klein geel rechthoekje) als je over het plaatje heen muist: ook als de afbeelding er wel gewoon is. Andere browsers doen dat niet, en zo hoort het.
- Voor het laten zien van een tooltip is het title="..." attribuut bedoeld.
Als er zowel een alt="..." als een title="..." bij een afbeelding staan, dan geeft Internet Explorer voor de tooltip voorrang aan de title="...", ook als het een lege title="" is.
- De inhoud van een title="..." mag verschillen van die van de alt="...".
Dit levert het volgende op:
Wil je voor alle browsers
wel een tooltip bij het plaatje laten zien, dan doe je:
HTML:
<img src="images/willem-luchtballon.jpg" width="150" height="250" title="Omhoog!" alt="Foto: Willem in een luchtballon." />
Wil je voor alle browsers
geen tooltip bij het plaatje laten zien, dan doe je:
HTML:
<img src="images/willem-luchtballon.jpg" width="150" height="250" title="" alt="Foto: Willem in een luchtballon." />
Wil je voor alle browsers
geen tooltip bij het plaatje laten zien en ook geen alt-tekst hebben, dan doe je:
HTML:
<img src="images/mooi-versierseltje.png" width="10" height="10" title="" />
Met vriendelijke groet,
CSShunter
