a h of h a ?

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Pagina: 1 2 volgende »

Ozzie PHP

Ozzie PHP

03/10/2012 12:57:19
Quote Anchor link
Mensen, als ik een linkbare kop wil. Wat is dan eigenlijk juist? Een h1 met een link erin? Of een link met een h1 erin? Dus:

<h1><a href="/mijn_url">Linkbare kop</a></h1>

of

<a href="/mijn_url"><h1>Linkbare kop</h1></a>

Of maakt het niks uit?
 
PHP hulp

PHP hulp

21/11/2024 20:24:11
 
Sander Z

Sander Z

03/10/2012 13:03:02
Quote Anchor link
resultaat zal in beide gevallen hetzelfde zijn. Maar "de" methode in algemene situaties is <h1><a href....
Gewijzigd op 03/10/2012 13:08:33 door Sander Z
 
Ozzie PHP

Ozzie PHP

03/10/2012 13:08:01
Quote Anchor link
okeej, thanks!
 
Erik Rijk

Erik Rijk

03/10/2012 14:33:31
Quote Anchor link
<a class="h1_link" href="/mijn_url">Linkbare kop</a>

En je a.h1_link:link, a.h1_link:visited e.d. stylen via css?
 
Ozzie PHP

Ozzie PHP

03/10/2012 14:37:10
Quote Anchor link
Erik: nee, dat druist tegen de semantiek in en lijkt me niet goed voor SEO.
 
Kris Peeters

Kris Peeters

03/10/2012 16:35:38
Quote Anchor link
Wel, het werkt wel wat verschillend, voor de gebruiker.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
  <head>
    <style>
      a {
        background-color: #9999ff;
      }
      h1 {
        background-color: #ff9999;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <a href="#"><h1>Titel 1</h1></a>
    <h1><a href="#">Titel 2</a></h1>
  </body>
</html>


Bij de eerste link is de hele lijn klikbaar, bij de tweede enkel de tekst.
Gewijzigd op 03/10/2012 16:36:14 door Kris Peeters
 
Ozzie PHP

Ozzie PHP

03/10/2012 16:40:29
Quote Anchor link
Kris, correct. Dat is omdat een <h> element een block element is en een <a> een inline element. Maar mijn vraag is dus, zet je een header in een link <a><h></h></a> of zet je een link in een header <h><a></a></h> als je een aanklikbare header wil hebben?

Volgens Sander Z de laatste methode, maar waar hij dat op baseert weet ik niet.
 
Q S

Q S

03/10/2012 16:52:02
Quote Anchor link
Volgens de Validator is deze

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<h1><a href="/mijn_url">Linkbare kop</a></h1>


juist, dus ik zou die maar aanhouden als je geen fouten wil hebben
 
Ozzie PHP

Ozzie PHP

03/10/2012 16:54:00
Quote Anchor link
Ah oké, thanks!
 
Ward van der Put
Moderator

Ward van der Put

03/10/2012 17:01:13
Quote Anchor link
Misschien nog een noot... Een h1 gebruik je liefst maar één keer voor de belangrijkste kop van de huidige webpagina. Dan is een h1 + a onlogisch, want je bevindt je al op de webpagina waarvan de lading wordt gedekt door de hoogste kop in h1. Meestal beter: meerdere koppen (h2, h3 of h4) met links die verwijzen een webpagina met één h1 zonder link.
 
Reshad F

Reshad F

03/10/2012 17:28:39
Quote Anchor link
ik ben het met Ward eens. als je echt volgens de SEO richtlijnen wilt werken dan zul je per pagina maar 1 h1 hebben en een link lijkt me daar onlogisch in. overigens is het ook aan te raden om de woorden in je h1 goed uit te kiezen en een link daarin kan er soms grof gezegd heel "dirty" in zijn.
 
Eddy E

Eddy E

03/10/2012 18:31:41
Quote Anchor link
Maar is het niet logischer om <a><h></h></a> te doen?
Je wilt immers alles van de <h> kunnen aanklikken. Ook padding/plaatje etc, die niet in de tekst staat. Een achtergrondafbeelding in de <h> hoort wel bij de <h>... dus waarom mag ik daar niet op klikken?

Even buiten het feit dat een <a> niet bij een <h1> past.
 
Ozzie PHP

Ozzie PHP

03/10/2012 20:39:00
Quote Anchor link
Ah ja, correct Ward... scherp opgemerkt. Het ging niet specifiek om een h1. Een h2 of h3 is inderdaad veel logischer, maar voor het voorbeeld had ik even een h1 gebruikt.

(Ik zie overigens systemen als Joomla die een h1 kop van een artikel laten linken naar... zichzelf!!)
 
Eddy E

Eddy E

03/10/2012 21:02:05
Quote Anchor link
Is een beperking van Joomla toch? Een <h> heeft daar toch altijd een <a> omdat de parser dat wil oid? Heb ik eens gelezen.
Of is het om SEO voor de gek te houden?
 
Ozzie PHP

Ozzie PHP

03/10/2012 21:04:38
Quote Anchor link
Ik denk dat het voor SEO is... beetje vreemd vind ik het.
 
Joey Drieling

Joey Drieling

03/10/2012 23:38:45
Quote Anchor link
In HTML5 mogen er meerdere blok elementen binnen een a tag zie ook. http://www.webpirates.nl/rory-servaas/10-html5-deel-2-nieuwe-content-elementen

en onderaan op

http://www.w3.org/TR/2012/WD-html5-20120329/the-a-element.html#the-a-element
Gewijzigd op 03/10/2012 23:43:45 door Joey Drieling
 
Ozzie PHP

Ozzie PHP

04/10/2012 06:18:38
Quote Anchor link
Vreemd, in dat voorbeeld op w3.org zie ik meerdere h1's onder elkaar. Mag dat voortaan in html5?
 
Joey Drieling

Joey Drieling

04/10/2012 07:07:30
Quote Anchor link
Jha dat mag in een aside, section of footer. Die mogen een eigen h1 hebben.

Zie: http://www.w3.org/TR/2012/WD-html5-20120329/the-h1-h2-h3-h4-h5-and-h6-elements.html#the-h1-h2-h3-h4-h5-and-h6-elements

PS

Google vind meerdere h1 nog steeds niet fijn.
Gewijzigd op 04/10/2012 07:09:18 door Joey Drieling
 
Ozzie PHP

Ozzie PHP

04/10/2012 08:36:02
Quote Anchor link
okeej, thanks
 
Wouter J

Wouter J

20/10/2012 19:34:01
Quote Anchor link
Had dit topic gemist, wil toch wat opmerken:

Inline elementen mogen niet een block element omvatten
Stel <a> is een inline element en <b> is een block element dan mag <a><b></b></a> niet en <b><a></a></b> wel. Anders is het gewoon echt fout volgens de HTML regels.

Meerdere Heading level 1
Dit werd altijd als fout gezien, alleen in HTML5 hebben we de sectioning elements (<article>, <header>, <aside>) deze elementen geven een nieuwe sectie aan. Hierdoor veranderd de document outline en is meerdere Heading Level 1 toegestaan en aangeraden. Helaas is dit nu nog geen goed idee, meer informatie: http://html5doctor.com/outlines/
 
Ozzie PHP

Ozzie PHP

20/10/2012 19:36:44
Quote Anchor link
Thanks Wouter!! Mooie toelichting!
 

Pagina: 1 2 volgende »



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.