Interne hyperlink met HTML5

Status
Niet open voor verdere reacties.
J

janyep

Gebruiker
Lid geworden
7 mei 2008
Berichten
261
Hallo,

Zo had ik het gedacht:

HTML: 
<div id="top"></div>

<a href="#top" title="deze link gaat naar boven">Naar boven</a>

Het viel mij op dat in http://www.woorank.com/en/www/net.tutsplus.com
de <div id="top"> rondom andere items wordt geplaatst / verderop pas wordt afgesloten.

HTML: 
<div id="top">
				<h1><a href="/">net.tutsplus.com | WooRank | Website Analysis &amp; Internet Marketing</a></h1>
				<ul class="nav">
	<li><a href="http://blog.woorank.com">Blog</a></li>
	<li><strong><a href="/en/p/pricing">Pricing</a></strong></li>
	<li><a href="/en/ranking">Ranking</a></li>
	<li><a href="/en/widget">Widgets</a></li>
	<li id="twitter"><a href="http://twitter.com/woorank" title="Follow WooRank on Twitter">Follow WooRank on Twitter</a></li>
				</ul>				
                                              <div id="main_form">
	<form action="/en/report/generate" method="post">
		<div>
			<input class="text" type="text" name="url" value="net.tutsplus.com" />
			<button type="submit">Generate report</button>
		</div>
	</form>
                                              </div>	
</div>

Is er iets mis met het 1 of het andere voorbeeld?
Ik gebruik veel interne links, en mijn eigen "zo had ik het gedacht" lijkt mij overzichtelijker + zou ik dus liever gebruiken.

Weet iemand raad?
Hartelijk dank, janyep
 
Nou, het is allebij in principe correcte HTML.

Een anchor die naar een plek in de pagina wijst (via #... dus) gaat naar het begin van het element toe. Of dit element nou andere elementen bevat of niet... dat maakt niet uit. Je kan ook een anchor op een h-tag zetten, of wat voor element dan ook; (bijna) ALLE html elementen mogen een ID hebben.

Maar het is een beetje 'zonde' om een hele <div> aan te maken voor alleen een anchor. Je kan het ID ook gewoon aan een andere tag geven die op dezelfde plek staat.
 
Wat jij wilt doen werkt niet met een div en heeft helemaal niets met specifiek HTML 5 te maken.

Je hebt ergens in je code een
HTML: 
<a name="{zelf_invullen}"></a>
staan. Dat is je bestemming.

Waar je op die pagina ook dit neerzet:
HTML: 
<a href="#{zelf_invullen}">Ga naar ...</a>
Zul je naar het punt van de bestemming gaan.

(Uiteraard {zelf_invullen} vervangen door hetzelfde woord in beide stukken code)
 
Wat jij wilt doen werkt niet met een div ...
Klik om te vergroten...
Ah, maar hoe verklaar je deze dan?
That Guy was right, I think. :)

- - - - - - - - - -
... en heeft helemaal niets met specifiek HTML 5 te maken.
Klik om te vergroten...
Ehm, in zoverre dat html5 juist graag géén name="..." eigenschap in een <a> wil zien!
3.4. Changed attributes
The following attributes are allowed but authors are discouraged from using them and instead strongly encouraged to use an alternative solution:
...
The name attribute on a. Authors can use the id attribute instead.​
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Hallo, That Guy
Je kan het ID ook gewoon aan een andere tag geven die op dezelfde plek staat.
Klik om te vergroten...
:thumb: hier kan ik echt iets mee: bedankt hoor

.ps
Wat denk je? Zou elk "anker-ID" dan nog beter hernoemd kunnen worden, met bijv.
'a_'
eraanvast, om herkenbaar te blijven voor de ontwerper zelf?
Je zou anders kunnen gaan zoeken in de style tot je een ons weegt?

----------------------------------------------
Hallo, Tha Devil
HTML: 
<a name="{zelf_invullen}"></a>
= Not supported in HTML5 (zover was ik al wel)
http://www.w3schools.com/html5/tag_a.asp
maar natuurlijk bedankt
... en andersom ... ook graag gedaan
Elke dag komen we weer wat nieuws tegen

----------------------------------------------
Hallo, csshunter
Toch gewoon nog http://developerscorner.nl/csshunter/tests/ ? Mooi, blijkbaar niets aan het handje!

Weet je, precies wat ik bedoelde:
HTML: 
<div id="medium"><!-- ! --></div>
<div id="bottom">
		<h2>Bottom</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed.</p>
		<ul><li><a href="#top">GoTo top</a></li>
			<li><a href="#medium">GoTo medium</a></li>
		</ul>
</div><!-- einde div=bottom -->
Mag ik vragen waarom je de tweede div pas afsluit na <h2> en <ul>? Gewoon toevallig
[ = ;) inconsequent! ] of met een bedoeling?
Mag ik van je horen? Dit is precies wat ik zocht!

Gr. janyep
 
Laatst bewerkt:
Hoi janyep,
Mag ik vragen waarom je de tweede div pas afsluit na <h2> en <ul>?
Gewoon toevallig [ = ;) inconsequent! ] of met een bedoeling?
Klik om te vergroten...
Met een bedoeling! :)
Namelijk: ter illustratie dat het in een bestaande <div> kan, onafhankelijk van waar die eindigt (zoals That Guy aangaf).

Maar als er geen <div id="..."> nodig is om er bepaalde css-eigenschappen aan vast te knopen, of om er via het DOM-model met javascript op tekeer te gaan, dan is een extra <div> niet nodig en kan de tag van de regel zelf gebruikt worden.
In mijn geval, als de <div> niet gebruikt zou worden om extra verticale afstand te scheppen, was het consequent geweest om te coderen:
HTML: 
<body id="top">
    <h1>Anchor - div's with ID's</h1>
    <p>Lorem ... </p>

    <h2 id="medium">Medium</h2>
    <p>Lorem ... </p>

    <h2 id="bottom">Bottom</h2>
    <p>Lorem ... </p>
</body>
De inconsequentie om niks in de <h1> te zetten, maar in de <body> is veiligheidshalve: zodat je in elk geval helemaal bovenaan komt (ook al zit er op een of andere manier een background-image o.i.d. bovenaan, waar de <h1> pas halverwege in valt).

Hoewel niet (altijd) puur nodig, gebruik ik zelf vaak de
HTML: 
<div class="anker" id="..."><!-- niks ---></div>
methode.
  • Zo zijn ze meteen allemaal herkenbaar, zonder dat je een extra kenmerk aan de ID moet toevoegen.
  • Dit geeft ook de mogelijkheid om die anker-<div>-ven een kleine hoogte te geven, zodat er iets witruimte komt vóór de eigenlijke regel die bovenaan moet komen te staan. Anders komt die regel zo benauwd pal tegen de bovenkant van het venster te schurken (een eventuele margin-top van die regel wordt niet gebruikt bij het anker; een padding-top wel, maar dan moet je weer gaan zitten scharrelen in de css, en dat kan niet in alle gevallen).
  • Tenslotte kan je na x jaar zo'n losse <div> makkelijk weggooien, als je de verwijzing naar dat anker niet meer nodig hebt.
  • Als je het anker vastknoopt aan een bestaande div, loop je (of: een opvolger) het risico dat je de ID van de <div> weggooit als het anker niet meer nodig is, terwijl aan die ID ook tegelijkertijd nog heel andere dingen (css, javascript) vast kunnen zitten die je zeker niet zou willen verwijderen.
  • Kom er dan bij een uitgebreide site maar eens achter hoe die ID ook alweer heette, die per abuis verwijderd is. :rolleyes:
De www.w3schools.com/html5/tag_a.asp bewering "name: Not supported in HTML5" blijkt dus niet helemaal waar als je de actuele laatste versie van de html5-specificatie er op na slaat (zie m'n eerdere link): de name is nog wel toegestaan bij een link (= browser-fabrikanten moeten er rekening mee houden), maar wordt zeer sterk afgeraden (=webbouwers moeten 'm niet gebruiken).
Ik maak er van: <a name="..."> is not done in HTML5. :d
En in HTML4.01 mag een ID ook, dus het pleit is voor mij beslecht: ID is overwinnaar.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Hallo csshunter
het is helemaal prima: geweldig uitgelegd

en tegelijkertijd is de .ps aan That Guy ook beantwoord:
Code: 
[I].ps
Wat denk je? Zou elk "anker-ID" dan nog beter hernoemd kunnen worden, met bijv.
'a_'
eraanvast, om herkenbaar te blijven voor de ontwerper zelf?[/I]

[COLOR="mediumturquoise"]<div class="anker" id="..."><!-- niks ---></div>[/COLOR]

[I][COLOR="blue"]Zo zijn ze meteen allemaal herkenbaar, zonder dat je een extra kenmerk aan de ID moet toevoegen.[/COLOR][/I]

Hartelijk dank voor de hulp,
vr. groeten van janyep
 
csshunter zei:
Ah, maar hoe verklaar je deze dan?
That Guy was right, I think. :)

Ehm, in zoverre dat html5 juist graag géén name="..." eigenschap in een <a> wil zien!
3.4. Changed attributes
The following attributes are allowed but authors are discouraged from using them and instead strongly encouraged to use an alternative solution:
...
The name attribute on a. Authors can use the id attribute instead.​
Met vriendelijke groet,
CSShunter
Klik om te vergroten...
I stand corrected :o

Dan heeft het inderdaad wel met specifiek HTML5 te maken lijkt mij aangezien HTML4 en XHTML (voor zover ik weet ;)) geen anchors binnen pagina's koppelt aan id=""
 
Hoi Tha Devil,
... aangezien HTML4 en XHTML (voor zover ik weet ;)) geen anchors binnen pagina's koppelt aan id=""
Klik om te vergroten...
  • Toch, toch. Zie mijn testcase van hierboven in nummertje #4, dat is XHTML voor zover ik weet. ;)
  • En voor de volledigheid ook even een HTML4.01 variant gemaakt met ID-div's. Toettut ook! :)

  • Nou zou het natuurlijk ook nog zo kunnen zijn, dat het volgens de XHTML en HTML4 specs niet mag, maar de browsers het toch doen.
  • Even opgezocht in de W3C-bieb:
    12.1.3 Specifying anchors and links
    "When the name or id attributes of the A element are set, the element defines an anchor that may be the destination of other links."
    www.w3.org/TR/html401/struct/links.html#h-12.1.3
Het zou kunnen dat de oude IE5 of IE5.5 alleen maar met de naam-property in een <a> overweg konden, dat weet ik niet meer. In elk geval leert een blik in m'n virtuele Win98SE: IE6 kan ook de ankers aan ID's knopen, zowel bij HTML als bij XHTML.

Wat ik onderweg nog wel tegenkwam, is dat een name="..." niet uniek hoeft te zijn. Het is voor javascript dan ook: getElementsByName('mooienaam'), als je daarin iets wilt pulleken.
Met vanuit de Bereastreet de verzuchting dat als je dezelfde waarde geeft aan een element met een name (bv. name="devil") als aan een ander element met een id (dus id="devil", wat toch echt een verschil is), IE aan het hutseklutsen slaat, en denkt dat het om hetzelfde element gaat: Beware of id and name attribute mixups when using getElementById in Internet Explorer.
Het zijn ook altijd dezelfden! :d
Maar helemaal snappen doe ik het niet. Want:
Dus name moet toch uniek zijn? :shocked:
Terwijl toch ook weer in de beschrijving van de html-DOM staat:
O, zeg ik maar ...

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan