> Je kunt dan wel het alt-attribuut invullen, maar als deze naar de homepagina wijst via de hyperlink, zou je eigenlijk "home" als alt-attribuut moeten invullen. In dat geval heb je dus een visueel logo, maar is er geen titel die leesbaar is voor zoekmachines noch voor screen readers.

Wat doe je dan met de hyperlink in je H1? Gebruik je daar de tekst “Home”?

@Mathias Bynens

Daar zet je dan de titel van de website, zoals hier 'Netlash Webdesign'.

@Mathias: de hyperlink binnen de h1 of de paragraaf blijft de titel van de website bevatten. In het geval van de huidige website, blijft dat dus Netlash.

Waarom zou je voor de alt-tekst dan plots iets anders doen?

@Mathias: dat is gebleken uit gesprekken rond toegankelijkheid met AnySurfer in het verleden.

Oh, omdat je de img dan niet in een h1 plaatst? Hmm… Ik snap niet goed waarom je blijkbaar moet kiezen tussen *of* een h1 *of* een afbeelding. Het lijkt me geen eerlijke vergelijking.

Voor mij zijn er twee opties:

<h1><a href=/>Foo</a></h1>

…met dan de nodige CSS, ofwel:

<h1><a href=/><img src="foo" alt="Foo" /></a></h1>

Beide hebben hetzelfde resultaat, en zijn even toegankelijk (als je het goed doet).

@Mathias: dit is inderdaad de vergelijking die ik maak want ze zijn beiden mogelijk, maar semantisch gezien vind ik de eerste optie die je aanhaalt netter. Het is en blijft een titel. In het tweede geval kun je zo ook blog titels door images gaan vervangen en dat zou niet oké zijn.

Wij hanteren ook dezelfde methode als jullie, dus zonder afbeelding. Een discussie die aanleunt bij deze topic is welke heading je best gebruikt voor het logo…

Want wat als je nu een website vergelijkt met een boek of film - waarbij de titel toch belangrijker is dan de auteur - krijg je:

Auteur = Logo

Titel = Activiteit / Slogan / …

dus in jullie geval:

<h2><a href=/ title="Naar beginpagina">Netlash</a></h2>

<h1>Webdesign baby!</h1>

Onafgezien van SEO lijkt mij dit toch ook semantisch correct?

Het logo op een webpagina heeft 2 functies:

- logo zijn (herkenbaarheid)

- deel uitmaken van de navigatie (link naar de homepage)

Het logo behoort niet tot de tekst op een webpagina, net zomin als het logo van een uitgeverij als titel van een boek wordt beschouwd.

Een (tekst-)header gebruiken om een logo te markeren is dus, vanuit semantisch standpunt, onbegrijpelijk. Een logo kun je beter met een DIV markeren. Het valt ook in HTML5 buiten SECTION of ARTICLE, maar mogelijk binnen NAV.

Op die manier heb je bovendien noch SEO noch accessibility-problemen.

"Met HTML5 ....Door het gebruik van de nieuwe section en article elementen, kunnen er op één pagina meerdere h1's gebruikt worden"

Moet dat niet zijn: "Door het gebruik van het nieuwe hgroup element"?

Want met hgroup is het pas mogelijk om meerdere H1 -H6 telkens weer opnieuw te gebruiken.

@janmouse: zoals ik in het artikel aanhaalde is de titel van de website op de homepagina de belangrijkste en krijgt hij dus de h1 heading. Op de binnenpagina is die van minder belang want daar is de paginatitel belangrijker (blog, contact,...) en krijgt de titel van de website een paragraaf.

@peter: de titel van de website is niet de naam van het bedrijf dat de website heeft gemaakt, maar is de naam van het bedrijf waarvoor de website is gemaakt. Je vergelijking met een boek klopt dus niet, want dit zou dus wel degelijk de titel van het boek moeten zijn.

Wanneer je alle css uitschakelt op de homepagina van een website, is de titel die je moet zien, de titel van de website. Tekstueel is die dus wel van belang en dient deze niet als decoratie. Zo wordt een website ook bekeken door zoekmachines en screen readers en is een heading dus een logische semantische keuze.

Stel dat je een stuk tekst door een afbeelding vervangt, zou je wel degelijk SEO en accessibility problemen hebben. Dezelfde redenering geldt dus voor een titel (titel van de website, titel van een blogpost, eender wat).

@Thomas. Conclusie, als ik juist ben, idealiter zou zijn dat background images aanklikbaar zijn. In css het logo plaatsen als backgound image (mijn inziens bestaan de meeste logo's uit afbeeldingen) en een text-indent van bvb -9999px toepassen op 'Home' (subpages) of 'Firmanaam' (Homepage).

@mark: met hgroup is het mogelijk verschillende headings te gebruiken binnen hetzelfde element. Je kunt zo bijvoorbeeld een div met id logo hebben met een h1 voor de titel van de website en een h2 met een baseline samen in een hgroup. Dat elke section of article zijn eigen h1 kan hebben op dezelfde pagina is een andere zaak. Voor meer uitleg verwijs ik graag naar dit stukje uitleg: http://diveintohtml5.org/semantics.html#article-element

@Mathieu: de background-image is zogezegd aanklikbaar door de hyperlink die erop ligt. De titel van de website blijft hier altijd "Netlash Webdesign", alleen wordt die op de home in een h1 geplaatst en op de binnenpagina's in een paragraaf. De eigenlijke tekst zie je niet, want die wordt inderdaad via text-indent onzichtbaar gemaakt.

@Mark Creeten: de hgroup zorgt ervoor dat je meerdere h-elementen binnen hetzelfde element kan gebruiken en ervoor te zorgen dat enkel het hoogste h-element in de outline weergegeven wordt. Zie http://dev.w3.org/html5/markup/hgroup.html

Dit staat dus los van meerdere h1's gebruiken binnen dezelfde pagina.

Discussie boven de hoofden? Voorwaarts compatibel hoort branding in <header> en een H1 komt overeen met de paginatitel in de titelbalk van je browser; in <section> voortaan. Het geeft geen zin om ALT en TITLE attributen door elkaar te halen in functie van de interpretatie van de verschillende browsers: jij denkt Mozilla of webkit maar 80% krijgt een weergave in IE... Als je echt van ijver getuigt dan drop je TITLE op de anchor en ALT op het logo/CI. En dan nog heeft het geen enkel SE-nut.

Stick to your guns: een logo is een fysiek plaatje dat ook bij print stylesheets wordt weergegeven en laat content en zijn stiff semantics de pagina beheersen. Nuff said!

Om op SEO-vlak duidelijk te zijn, moet je gewoon alle CSS eens van je site scrapen en kijken hoe het er uit ziet met de standaard browser layout.

Als ik dat doe, dan vind ik dat op de homepagina de titel / naam van de website het belangrijkste is en dus in een h1-tag moet staan. Op andere pagina's is het de paginatitel die in de h1-tag moet staan, zoals het artikel al zei.

Over het verschilpunt inline img of background-image, sta ik aan de kant van de background-image. Dit omdat het logo voor mij bij branding hoort, en alle andere aspecten van branding komen bij een website ook in de stylesheet terecht: fonts, kleuren, ...

De kern van CSS is nog steeds dat je HTML-documenten in hun geheel een andere layout kan geven zonder ook maar iets aan de HTML te veranderen. Als je het logo via een background-image doet, dan kan dat inderdaad. Inline niet.

Op SEO-gebied denk ik ook dat een #logo (op de homepagina een h1 en op andere pagina's een div of paragraph) met daarin een anchor met de sitenaam als tekst in (die je dan verbergt via text-indent) het beste is.

Ik denk trouwens niet dat het logo binnen het HTML5 nav-element hoort.

@Thomas Deceuninck

"De titel van de website blijft hier altijd "Netlash Webdesign", alleen wordt die op de home in een h1 geplaatst en op de binnenpagina's in een paragraaf."

Lijkt me dat overal op de Netlash website "Netlash Webdesign" in een h1 geplaatst is en nogmaals de titel van het artikel ook. Dit op het merendeel van de website. De "Netlash Webdesign" in een paragraaf komt Firebug hier niet tegen.

Enige verklaring daarvoor?

@gmr: een h1 is niet noodzakelijk 100% gelijk aan de title die je browservenster weergeeft. Ik had het in dit artikel niet over title attributen, enkel de alt voor de afbeelding. Die droppen is helemaal te gek want dat is geen valid HTML. Ook had ik het niet over verschillende browsers, deze interpreteren een alt of title attribuut uiteraard op dezelfde manier.

Wij voorzien tevens op de meeste websites een print logo dat standaard hidden staat via css, maar getoond wordt op de print versie.

Een titel van een pagina behoort net zo goed tot de semantiek.

ik gebruik ook h1 met image replacement.

maar ik gebruik op alle pagina's de h1. want ik denk dat de titel van je site (de naam) ALTIJD het belangrijkste is. zelfs bij een blog. daar is de titel ook wel belangrijk, maar er is een correlatie tussen de site en de blogpost denk ik..

@Jan De Wilde: onze website heeft daarvoor een update nodig. Ondertussen vind je dit wel terug in al onze andere, recentere websites.

h1 = titel van je pagina, dus "kan" (hoeft niet) evt. op je homepage inderdaad je logo zijn. Kan ook bv. dat je titel op je homepage is "wij verkopen de beste spaghetti in de streek". Lijkt me overigens nog beter op vele vlakken..

En je logo gewoon in een divke somewhere

Ik doe het logo nu ook meestal via css image-replacement, maar semantisch is dat niet denk ik. Echt kwaad kan het ook wel weer niet.

Als je h1 gebruikt voor je logo ben je verplicht om alle andere titels als h2 of lager te bestempelen anders klopt de semantiek van je pagina niet meer.

Als het op best practice aankomt opteer ik voor een aparte div met logo (wel alt definiëren) en de paginatitel in een h1, liefst conform de titel in de browser.

Ik had er nog nooit aan gedacht om mijn logo als h1 tag te gebruiken.

Mag dat van Google? Want die alt tag is dan toch eigenlijk voor de meeste surfers verscholen en daar kan je ipv home even goed Netlash Webdesign of iets totaal anders inzetten (waar je graag wilt op scoren)...

@Bert Desmet: Je kan toch maar 1 h1 tag op je pagina hebben. Er is toch altijd maar 1 hoofdtitel van de pagina. De volgende zijn allemaal ondertitels en dus h2.

@Kurt: Je kunt niet zomaar invullen wat je wil bij een alt attribuut. Het is de bedoeling dat hetgeen je invult, zegt wat de afbeelding visueel weergeeft. Is dat een afbeelding van een appel, dan zal het alt attribuut appel moeten zijn. Hier ligt het echter anders, vandaar dat een fysieke img in je HTML minder correct is. Om dan toegankelijk te zijn, moet het alt attribuut van je afbeelding home worden omdat deze afbeelding linkt naar de home. Dit komt dan natuurlijk niet overeen met wat die afbeelding visueel toont, want dat is het logo.

@Tim & Kurt: Er is altijd één titel de belangrijkste op je pagina, dat klopt. Maar dat betekent niet dat er maar één h1 kan zijn zoals ik in het artikel heb uitgelegd. Elke article of section kan een eigen h1 hebben. Ik heb in één van mijn vorige reacties een link meegegeven naar DiveIntoHTML5 die dat verduidelijkt.

Ik blijf dit altijd een lastige vinden. Ik denk niet dat je het echt fout kunt doen. Zoals je dit ook niet echt goed kunt doen. Denk dat beide prima werken en dat er geen wereld van verschil zit tussen beide. Ik heb in ieder geval nog nooit echt een grote discrepantie gevonden.

Ben het idd met Peter Maeseele eens. Komt toch vrij spammy over op dit manier. Valt Google hier niet over?

Ik vind de reacties al minstens even interessant als het artikel.

Ik vind de image replacement techniek ook de beste oplossing. Het enigste nadeel hiervan is dat je niets meer ziet wanneer je afbeeldingen in je browser uitschakelt. Bij een element zal de alt tekst nog weergeven worden. Wat is jullie gedacht hierover?

Dank voor de tips allemaal. Zeer interessant artikel en de reacties net zo. weer wat geleerd