HTML-otsantaelementit

Lisää esimerkkejä

Dokumentin otsikko
<title>-otsikko määrittää dokumentin otsikon.
Kaikkien linkkien kohde
Miten kaikki linkit voivat avautua uudessa ikkunassa.
Dokumentin kuvaus
Käytä <meta>-elementtiä kuvataksesi dokumenttia.
Dokumentin avainsanat
Käytä <meta>-elementtiä määrittääksesi dokumentin avainsanat.
Käyttäjän ohjaaminen
Miten käyttäjä ohjataan uuteen URL-osoitteeseen.

HTML <head>-elementti

HTML-elementti on kaikkien pääelementtien säiliö. Elementit, jotka sijaitsevat <head>-elementin sisällä, voivat sisältää skriptejä, ohjata selausta siihen, missä löytyy tyylitaulut, tarjota metatietoja ja niin edelleen.

Seuraavat tagit voidaan lisätä head-osaan: <title>, <base>, <link>, <meta>, <script> ja <style>.

HTML <title>-elementti

<title>-tagi määrittää asiakirjan otsikon.

title-elementti on välttämätön kaikissa HTML/XHTML-dokumenteissa.

title-elementti voi:

  • Otsikko, joka määrittää selaimen työkalupalkin otsikon
  • Otsikko, joka näkyy, kun sivu lisätään kirjanmerkkeihin
  • Sivun otsikko, joka näkyy hakukoneiden tuloksissa

Yksinkertaistettu HTML-dokumentti:

<!DOCTYPE html>
<html>
<head>
<title>Dokumentin otsikko</title>
</head>
<body>
Dokumentin sisältö......
</body>
</html>

HTML <base>-elementti

<base>-tagi määrittää kaikkien sivun linkkien oletusosoitteen tai oletustavoitteen (target):

<head>
<base href="http://www.codew3c.com/images/" />
<base target="_blank" />
</head>

HTML <link>-elementti

<link>-tagi määrittää asiakirjan ja ulkoisen resurssin välisen suhteen.

<link>-tagi käytetään yleensä yhdistämään tyylimallit:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

HTML <style>-elementti

<style>-tagi määrittää HTML-asiakirjan tyyliinformaation.

Voit määrittää HTML-elementtien esitystavan selaimessa style-elementin sisällä:

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

HTML <meta>-elementti

Metatiedot (metadata) ovat tietoa tiedoista.

<meta>-tagi tarjoaa tietoja HTML-asiakirjasta. Metatiedot eivät näy sivulla, mutta ne ovat koneille luettavia.

Tavallisesti meta-elementti käytetään määrittämään sivun kuvaus, avainsanat, asiakirjan kirjoittaja, viimeinen muokkauspäivä ja muut metatiedot.

<meta>-tagi sijaitsee aina head-elementissä.

Metadata voidaan käyttää selaimissa (miten sisältöä näytetään tai sivu ladataan uudelleen), hakukoneissa (avainsanat) tai muissa verkkopalveluissa.

Avainsanat hakukoneille

Jotkut hakukoneet käyttävät meta-elementin name- ja content-ominaisuuksia sivun indeksointiin.

Seuraava meta-elementti määrittelee sivun kuvauksen:

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

Seuraava meta-elementti määrittelee sivun avainsanat:

<meta name="keywords" content="HTML, CSS, XML" />

name- ja content-ominaisuuksien tehtävänä on kuvata sivun sisältöä.

HTML <script>-elementti

<script>-tagi käytetään asiakasohjelmiston määrittämiseen, kuten JavaScriptiin.

Käsittelemme script-elementtiä myöhemmin.

HTML-otsantaelementit

Tagi Kuvaus
<head> Määrittelee tiedon dokumentista.
<title> Määrittelee dokumentin otsikon.
<base> Määrittelee kaikkien linkkien oletusosoitteen tai oletustavoitteen.
<link> Määrittelee dokumentin ja ulkoisten resurssien välisen suhteen.
<meta> Määrittelee HTML-dokumentin meta-tiedot.
<script> Määrittelee asiakasohjelmiston.
<style> Määrittelee dokumentin tyyliinfo.