Valontuoja

XHTML+CSS: H1 tagi hyötykäyttöön headerkuvana

Sivuja tehdessä H1 tagia voidaan hyödyntää CSS:n avulla niin, että H1 tilalle tuodaan CSS:n kautta kuva. Tämä lisää sivun saavutettavuutta siinä tilanteessa, jos tyylitiedostot eivät suostu toimimaan. Tällöin H1-tagin tilalle ei ilmesty kuvaa, vaan tagiin määritetty teksti. H1-tagi ja headerin yhdistelmä on myös hakukoneen luettavissa.

Kohta #1
Kirjoitamme seuraavan XHTML dokumenttiin:

<h1><a href="#"><span>Sivun H1-otsikko</span></a></h1>

Kohta #2
Tämän jälkeen kirjoitamme CSS dokumenttiin:

h1 {
	background: url("otsikko.jpg");
	width:250px;
	height:100px;
}

h1 a {
	display: block;
	height: 100px;
}

h1 span { display:none; }

Kohtaa <span> ja </span> käytetään poistamaan teksti h1 tagin sisältä. Tämän tilalle tuodaan kohdassa H1 määritetty taustakuva. Kohtaa h1 a käytetään määrittämään linkitettävä alue.

Katso esimerkki.

2 kommenttia jutulle “ XHTML+CSS: H1 tagi hyötykäyttöön headerkuvana ”