Samuelin sivukurssi

Rakenne

XHTML Basic -elementit

Tälle sivulle olen koonnut kaikki XHTML Basic -elementit kaikkine standardin mukaisine määreineen. Elementit ovat aakkosjärjestyksessä, minkä lisäksi alussa on erillinen hakemisto niiden käyttötarkoituksen mukaan. Hakemisto on järjestetty moduuleittain samalla tavalla kuin W3C:n virallisella XHTML Basic -sivulla.

Kunkin elementin kohdalla on listattu kaikki kyseisen elementin standardin mukaiset lisämääreet. Mikäli jollakin elementillä ei ole tällä sivulla lopputagia, se on ns. tyhjä elementti, joka ei koskaan saa lopputagia. Tyhjät elementit sisältävät XHTML:ssä lopputagin kauttaviivan itsessään, esim. <br />.

Kaikkia tässä lueteltuja elementtejä voi käyttää myös HTML 4.01 -version mukaisissa dokumenteissa. Tällöin tyhjistä elementeistä pitää jättää sulkeva kauttaviiva pois.

Itse asiassa HTML 4.01 on tällä hetkellä suositeltavin HTML-versio tavallisten www-sivujen tekoon. XHTML Basic -dokumentteja ei pitäisi määritysten mukaan tarjoilla selaimille HTML-tiedostoina (tiedostotyypillä text/html) vaan oman sisältötyypin application/xhtml+xml mukaisina. Internet Explorer -selain ei ainakaan vielä (versio 6) tue application/xhtml+xml-tyyppiä. Itse suosimani vaihtoehto on vaihtaa XHTML Basic -sivuille dokumenttityypin määritykseksi <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ja lähettää ne text/html-tyyppisinä, jos selaimena on Internet Explorer tai muu uudempaa tyyppiä osaamaton selain.

Katso myös, mitä kohdassa validointi on kerrottu HTML:n ja XHTML:n eroista virheitä käsiteltäessä.

HAKEMISTO

Rakenne
body, head, html, title
Teksti
abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p pre q samp, span, strong, var
Hyperteksti
a
Listat
dd, dl, dt, li, ol, ul
Lomakkeet
form, input, label, option, select, textarea
Taulukot
caption, table, td, th, tr
Kuvat
img
Objektit
object, param
metatieto
meta
linkit
link (huomaa, että normaaleissa hypertekstilinkeissä käytettävä a-elementti on määritelty hypertekstimoduulissa)
perusosoite
base

a

<a
accesskey="..."
charset="..."
class="..."
href="..."
hreflang="..."
id="..."
rel="..."
rev="..."
tabindex="..."
title="..."
type="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</a>

a eli ankkuri (Anchor) on hypertekstilinkkien merkitsemistä varten. Esimerkiksi
<a href="http://www.iki.fi/~samuel/kurssi/sisalto.html">Sivukurssi</a>
määrittäisi linkin sanasta Sivukurssi kurssi-hakemistossa olevaan tiedostoon sisalto.html.

Esimerkiksi sivun ensimmäiseen otsikkoon voi tehdä ankkurin
<h1><a id="top">Otsikko</a></h1>
minkä jälkeen siihen voi viitata linkillä
<a href="#top">Alkuun</a>

Toisaalta XHTML:ssä mille tahansa elementille voi määritellä yksilöivän id:n, joten ankkurin voisi tehdä helpomminkin:
<h1 id="top">Otsikko</h1>

<a href="mailto:samuel@iki.fi">Lähetä postia!</a> tekee linkin, josta voi lähettää minulle sähköpostia.

title antaa linkille nimen, jonka selain voi esittää esimerkiksi tooltip-vihjeenä:
<a href="tagit.html" title="Kaikki XHTML Basic -elementit selityksineen">XHTML Basic</a>

rel ja rev määrittävät linkkien välisiä suhteita (related to ja revised from). Katso myös link. Vain harva selain hyödyntää näitä mihinkään.

[HAKEMISTO]

abbr

<abbr
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</abbr>

[HAKEMISTO]

acronym

<acronym
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</acronym>

[HAKEMISTO]

address

<address
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</address>

Tätä elementtiä voidaan käyttää osoitetietojen ilmoittamiseen. Monet selainohjelmat näyttävät address-tagien sisällä olevan tekstin tietyllä tavalla (esim. kursiivilla ja sisennettynä), jolloin sivun lukijan on helppo erottaa osoitetiedot muusta yhteydestä.

[HAKEMISTO]

base

<base href="..."
xmlns="http://www.w3.org/1999/xhtml"
/>

base-elementin href-attribuutin avulla voidaan ilmoittaa perusosoite, johon kaikki sivulla olevat relatiiviset URL-viittaukset suhteutetaan. Jos esimerkiksi merkitään <base href="http://iki.fi/samuel/kurssi/" /> ja myöhemmin sivulla esiintyy linkki <a href="tagit.html">XHTML Basic -elementit</a>, linkki ohjautuu aina osoitteeseen http://iki.fi/samuel/kurssi/tagit.html, vaikka itse HTML-sivu sijaitsisi missä tahansa. base-elementti on tyhjä elementti eli sillä ei ole lopputagia. base esiintyy HTML-tiedoston head-osion sisällä.

[HAKEMISTO]

blockquote

<blockquote
cite="..."
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</blockquote>

blockquote merkitsee lainauksen, jonka selainohjelma näyttää tietyllä tavalla (esim. kursiivina ja sisennettynä tai sähköpostissa käytetyn lainausmerkinnän mukaisesti >-merkein merkittynä).

[HAKEMISTO]

body

<body
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</body>

body määrittää dokumentin varsinaisen näkyvän osan. Kaiken sivun materiaalin tulee olla joko head- tai body-osassa.

HTML-dokumentissa saa esiintyä vain yksi body-elementti.

[HAKEMISTO]

br

<br
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
/>

br-tagi katkaisee rivin (line BReak). Mikäli sivun vasemmassa reunassa on esimerkiksi kuva, clear="left" aiheuttaa seuraavan rivin alun siirtyvän kuvan alapuolelle. clear="right" siirtää uuden rivin alun oikeassa laidassa olevien elementtien alapuolelle ja clear="all" varmistaa, ettei kummassakaan laidassa ole muita elementtejä.

[HAKEMISTO]

caption

<caption
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</caption>

caption määrittää taulukolle (table) kuvatekstiä vastaavan kuvauksen. align määrittää tekstin sijainnin.

[HAKEMISTO]

cite

<cite
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</cite>

cite-elementin alku- ja lopputagin välissä oleva teksti ymmärretään sitaatiksi ja näytetään tietyllä tavalla (usein kursiivilla).

[HAKEMISTO]

code

<code
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</code>

code-elementin alku- ja lopputagin välissä oleva teksti ymmärretään tietokonekoodiksi tai vastaavaksi ja näytetään tietyllä tavalla; usein kirjasimella, jossa kaikki kirjaimet ovat yhtä leveitä (monospaced font).

[HAKEMISTO]

dd

<dd
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</dd>

dd merkitsee määritelmän määritelmälistauksessa (dl). dd-elementtiä ennen tulee aina olla ainakin yksi DT-elementti.

[HAKEMISTO]

dfn

<dfn
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</dfn>

dfn tarkoittaa, että sen sisältämä teksti on jonkin asian määritelmä (definition). Elementtiä käytetään esimerkiksi tietyn termin esiintyessä tekstissä ensimmäistä kertaa.

[HAKEMISTO]

div

<div
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</div>

div-elementillä dokumentti voidaan jakaa loogisiin osiin (division). Sillä ei ole muuta semanttista merkitystä. Sitä käytetään yleisesti merkitsemään jollekin tietylle lohkolle attribuutti id tai class, joiden kautta lohkon sisältöä voidaan käsitellä esimerkiksi CSS:n tai skriptien avulla. Katso span.

[HAKEMISTO]

dl

<dl
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</dl>

dl muodostaa määrittelylistan (Definition List), joka koostuu dt-elementeillä merkityistä jäsenistä ja niiden dd-elementeillä merkityistä määritelmistä. dt voi esiintyä ilman dd-elementtiä, mutta dd-elementin edellä on aina oltava dt-elementti, jota dd määrittää.

[HAKEMISTO]

dt

<dt
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</dt>

dt on dl-listan jäsen, jolle voidaan antaa määritelmä dd-elementillä.

[HAKEMISTO]

em

<em
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</em>

em korostaa (emphasize) sen alku- ja lopputagin välissä olevan tekstin. (Usein teksti on kursivoitu.) Katso strong.

[HAKEMISTO]

form

<em
action="..."
class="..."
enctype="..."
id="..."
method="get|post"
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</em>

form-elementillä luodaan sivun lukijan täytettäväksi lomake. Lomakkeessa voidaan käyttää input, select/option ja textarea -kenttiä, joiden määrittämät nimi (name) ja arvo (value) -parit lähetetään CGI (Common Gateway Interface) -ohjelmalle käsiteltäviksi. text-tyyppisissä input-kentissä ja textarea-kentissä value voi olla esitäytetty, mutta käyttäjä pääsee yleensä muokkaamaan sitä. select-listoissa sekä checkbox- ja radio-tyyppisissä input-kentissä käyttäjän on tarkoitus valita ennalta määrätyistä vaihtoehdoista.

action kertoo ohjelman osoitteen, method="get" ja method="post" ovat tietojen lähetysmenetelmiä. post on suositeltavampi menetelmä, jos tietojen lähettäminen muuttaa jotakin (eli lomaketta käytetään esimerkiksi tietokannassa olevien tietojen ylläpitämiseen).

enctype määrittelee, millä tavalla selaimen pitää lähettää tiedot palvelimelle. Jos lomakkeella lähetetään tiedostoja (<input type="file" />), arvoksi pitää laittaa multipart/form-data. Oletusarvo on application/x-www-form-urlencoded.

[HAKEMISTO]

h1

<h1
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</h1>

h1 on kaikkein suurin otsake, sivun pääotsikko. Tämän sivun yläreunassa lukeva "Sivukurssi" on h1-otsake.

[HAKEMISTO]

h2

<h2
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</h2>

h2 on toiseksi suurin otsake. "Sivukurssin" alapuolella lukeva "Rakenne" on h2-otsake.

[HAKEMISTO]

h3

<h3
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</h3>

h3 on kolmanneksi suurin otsake. "XHTML Basic -elementit" tämän sivun yläosassa on h3-otsake.

[HAKEMISTO]

h4

<h4
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</h4>

h4 on neljänneksi suurin otsake. Tämän kohdan aloittava "h4" on h4-otsake.

[HAKEMISTO]

h5

<h5
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</h5>

h5 on viidenneksi suurin (toiseksi pienin) otsake.

[HAKEMISTO]

h6

<h6
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</h6>

h6 on pienin otsake.

[HAKEMISTO]

head

<head
profile="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</head>

head määrittää dokumentin sen osan, jossa on tietoa sivusta selain- tai hakuohjelmalle. Selainohjelma ei yleensä näytä head-osassa olevaa tietoa. HTML-dokumentissa saa esiintyä vain yksi head-elementti.

[HAKEMISTO]

html

<html
version="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</html>

html-avaustagin tulee standardin mukaan olla dokumentissa ensimmäisenä DTD-rivin jälkeen ja lopputagin koko dokumentin viimeisenä merkintänä.

HTML-dokumentissa saa esiintyä vain yksi html-elementti.

[HAKEMISTO]

img

<img
alt="..."
class="..."
height="..."
id="..."
longdesc="..."
src="..."
title="..."
width="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
/>

img-elementin avulla web-sivuille voi liittää kuvia. src-kohdassa määritetään halutun kuvan tiedostonimi, esimerkiksi src="poroja.gif". alt määrittää, mitä kuvan tilalla näkyy silloin, kun selainohjelma ei pysty näyttämään kuvaa, esimerkiksi alt="Porotokka Ounasvaaralla". height ja width määrittelevät kuvan koon (korkeus ja leveys) pikseleinä.

[HAKEMISTO]

input

<input
accesskey="..."
checked="..."
class="..."
id="..."
maxlength="..."
name="..."
size="..."
src="..."
title="..."
type="text|password|checkbox|radio|submit|reset|file|hidden"
value="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</h1>

input-elementti liittyy lomakkeisiin (form). type="text" tarjoaa rivin, jonka sivun lukija voi täyttää. Rivin pituuden voi määrätä size-optiolla, mutta rajatun pituiselle riville voi kirjoittaa enemmänkin tekstiä kirjoitetun liukuessa alta pois. Tekstin kokonaispituuden voi rajoittaa maxlength-optiolla. type="password" toimii kuin type="text", mutta lomakkeen täyttäjä ei näe kirjoittamaansa tekstiä, vaan se näkyy esimerkiksi asteriskeina (********).

type="checkbox" tarjoaa lomakkeen täyttäjälle mahdollisuuden valita määrättyjä vaihtoehtoja päälle tai pois. type="radio" on samanlainen, mutta vaihtoehdoista voi valita vain yhden. Lisäämällä optio checked radio- tai checkbox-tyyppiseen input-kenttään kyseinen vaihtoehto on ennalta valittu päälle.

type="submit" luo lähetyspainikkeen, jonka tekstin voi määrätä value-optiolla. Lähetyspainikkeeksi voi myös määrätä kuvan src-optiolla. Tällöin tulee kuitenkin käyttää lisäksi value-optiota, joka näkyy selaimilla, jotka eivät näytä kuvia. type="reset" tarjoaa nollausspainikkeen, joka palauttaa kaikki lomakkeen kentät siihen tilaan, missä ne olivat sivua ladattaessa.

name-option avulla lomakkeen käsittelevä CGI-ohjelma erottaa eri tiedot toisistaan. value-tagissa annettu arvo näkyy tekstinä vapaasti täytettävissä kentissä (type="text") sekä lähetys- ja nollauspainikkeissa.

[HAKEMISTO]

kbd

<kbd
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</kbd>

kbd-elementin sisällä oleva teksti ymmärretään lukijan kirjoitettavaksi tarkoitetuksi tekstiksi (KeyBoarD input). Esimerkiksi
<P>Ohjelman loppuun pitää kirjoittaa <kbd>goto 20</kbd></P>.

[HAKEMISTO]

label

<label
accesskey="..."
class="..."
for="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</label>

label-elementillä voidaan yhdistää lomakkeen syöttökenttiä kuvaavat nimet kenttiin. input-elementille on tällöin annettava id-attribuutti, johon viitataan label-elementin for-attribuutilla:
<input type="radio" name="maku" value="mansikka" id="makumansikka" /> <label for="makumansikka">Mansikka</label>
<input type="radio" name="maku" value="mustikka" id="makumustikka" /> <label for="makumustikka">Mustikka</label>

[HAKEMISTO]

li

<li
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</li>

li merkitsee listan (ul, ol) jäsenen.

[HAKEMISTO]

link

<link
charset="..."
class="..."
href="..."
hreflang="..."
id="..."
media="..."
rel="..."
rev="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
/>

link-elementtiä voi käyttää dokumenttien välisten suhteiden määrittämiseen rev ja rel -optioilla. Esim. <link rev="parent" href="..." title="Sivun nimi">.

Lisäksi sen avulla voi määrittää sivun tekijän <link rev="Made" title="Tekijän Nimi" ref="mailto:tunnus@domain.maa" /> tai omistajan <link rev="Owns" ... />.

Yleisin käyttö liittynee kuitenkin CSS-tyylisivujen liittämiseen sivuille: <link rel="stylesheet" type="text/css" media="print" href="print.css" />

[HAKEMISTO]

meta

<meta
content="..."
http-equiv="..."
name="..."
scheme="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
/>

meta-elementillä voi dokumentin head-osaan liittää tietoa sivusta. Esimerkiksi sivun tekijän nimi: <meta name="Author" content="Samuel Rinnetmaki">, koska dokumenttia on viimeksi muutettu: <meta name="review" content="12 10 1996">, hakusanoja name=keywords, dokumentin kuvaus name=description tai tietoa dokumentin ikääntymisestä: <meta http-equiv="Expires" content="Sat, 01 Jan 2000 00:00:00 GMT">.

Viimeisen avulla esimerkiksi selainohjelma tietää hakea sivusta uuden version sen vanhentuessa vuosituhannen vaihtuessa. Vain harvat selaimet käyttävät hyväksi meta-elementin avulla annettuja tietoja. Toisaalta useat hakupalvelinten robotit osaavat hyödyntää keywords- ja description-tietoja.

[HAKEMISTO]

object

<object
archive="..."
class="..."
classid="..."
codebase="..."
codetype="..."
data="..."
declare="declare"
height="..."
id="..."
name="..."
standby="..."
tabindex="..."
title="..."
type="..."
width="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</object>

object-elementin avulla HTML-sivulle voidaan sisällyttää erikoisempaa sisältöä kuten Java-appletteja, Flash- tai Shockwave-animaatioita jne.

ol

<ol
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</ol>

ol muodostaa järjestetyn eli numeroidun listan (Ordered List), joka koostuu li-elementeillä merkityistä osista. Osat numeroidaan alkaen numerosta 1. Numerointitapaa voi vaihtaa käyttämällä CSS-tyylitiedostoja.

[HAKEMISTO]

option

<option
class="..."
id="..."
selected="selected"
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</option>

option-elementillä määritellään lomakkeen (form) select-elementin vaihtoehdot. selected-optiolla määritelty vaihtoehto on valmiiksi valittu.

[HAKEMISTO]

p

<p
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</p>

p merkitsee kappaleen.

[HAKEMISTO]

param

<param
id="..."
name="..."
type="..."
value="..."
valuetype="data|ref|object"
xmlns="http://www.w3.org/1999/xhtml"
>...</param>

param-elementtiä käytetään object-elementin kanssa. name-optiolla määritellään objektin käyttämän muuttujan nimi ja value-optiolla muuttujan arvo.

[HAKEMISTO]

pre

<pre
class="..."
id="..."
title="..."
xml:lang="..."
xml:space="preserve"
xmlns="http://www.w3.org/1999/xhtml"
>...</pre>

pre tarjoaa mahdollisuuden sisällyttää HTML-dokumenttiin valmiiksi muotoiltua tekstiä (preformatted text). Tavallisesti selain tulkitsee perättäiset välilyönnit ja rivinvaihdot vain tyhjäksi tilaksi ja tiivistää tyhjän tilan aina yhdeksi välilyönniksi.

pre-elementillä merkityn alueen välilyönnit ja rivinvaihdot näkyvät sivulla samalla tavalla, kuin ne on kirjoitettu lähdekoodissa. Tekstiin käytetään yleensä kirjasinta, jossa kaikki kirjaimet ovat yhtä leveitä (monospaced font).

[HAKEMISTO]

q

<q
cite="..."
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</q>

q merkitsee lainauksen. cite-attribuutissa voidaan esittää esimerkiksi URL-viittaus lainauksen lähteeseen.

[HAKEMISTO]

samp

<samp
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</samp>

samp-elementillä merkitty teksti ymmärretään näytteeksi (sample) ohjelmien tms. ulosannista. Selainohjelma voi näyttää samp-elementillä merkityn tekstin tietyllä tavalla.

[HAKEMISTO]

select

<select
class="..."
id="..."
multiple="multiple"
name="..."
size="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</select>

select tarjoaa lomakkeen (form) täyttäjälle mahdollisuuden valita annetuista vaihtoehdoista (option). size-optio määrittää select-listassa näkyvien vaihtoehtojen määrän, name nimeää listan ja multiple="multiple" sallii lomakkeen täyttäjän valita yhtä aikaa useita vaihtoehtoja. Ellei attribuuttia multiple="multiple" löydy, ensimmäinen select-elementin sisällä määritellyistä vaihtoehdoista on yleensä oletusarvona valittu.

Esimerkki select-listan käytöstä:
<select name="väri" size=4>
<option value="g">vihreä</option>
<option value="b">sininen</option>
<option value="y">keltainen</option>
<option value="r">punainen</option>
</select>

Esimerkissä käyttäjälle näkyvät selväkieliset värien nimet, mutta lomakkeen käsittelevälle ohjelmalle lähetetään valitun värin yksikirjaiminen koodi.

[HAKEMISTO]

span

<span
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</span>

span on div-elementin tavoin tyhjä tai merkityksetön elementti, jota voidaan käyttää esimerkiksi lisäämään CSS-tyylitiedostoa varten luokitus tiettyihin sanoihin. Esim.

Ero div-elementtiin on, että span on ns. inline-elementti, eli se voi sisältä vain tekstiä ja muita inline-elementtejä.

[HAKEMISTO]

strong

<strong
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</strong>

strong näyttää sen alku- ja lopputagin väliin jäävän tekstin vahvennettuna, mikäli se selainohjelman puolesta onnistuu. strong-elementillä määritellyn vahvennuksen tulisi olla voimakkaampi kuin em-elementillä. Yleensä strong on lihavoitu.

[HAKEMISTO]

table

<table
class="..."
id="..."
summary="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</table>

table-elementin avulla sivulle voi luoda taulukoita. Attribuutilla summary voi kertoa tiivistelmän taulukon sisällöstä.

Esimerkki taulukosta:
<table>
<caption>Syys-lokakuun tulos</caption>
<tr> <th>Syyskuu</th> <td>120.000,00</td> </tr>
<tr> <th>Lokakuu</th> <td>131.000,00</td> </tr>
</table>

[HAKEMISTO]

td

<td
abbr="..."
align="left|center|right"
axis="..."
class="..."
colspan="..."
headers="..."
id="..."
rowspan="..."
scope="col|row"
title="..."
valign="top|middle|bottom"
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</td>

td määrittää taulukon (table) tietosolun (Table Data cell). rowspan ja colspan määrittävät, kuinka monta taulukon vaaka- ja pystyriviä td-solu peittää. align ja valign määräävät solun sisällä olevan tekstin vaaka- ja pystysuorasta sijoittelusta.

abbr-attribuutilla voi esittää selaimelle vihjeen solun lyhenteeksi. axis, headers ja scope liittyvät monimutkaisempiin "moniulotteisiin" taulukoihin. Niiden avulla voi kertoa, miten otsikko- ja datasolut liittyvät toisiinsa.

[HAKEMISTO]

textarea

<textarea
accesskey="..."
class="..."
cols="..."
id="..."
name="..."
rows="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</textarea>

textarea määrittää lomakkeessa (form) useamman rivin täytettävän alueen. rows-optio määrää rivien määrän, cols niiden pituuden. name määrittää alueelle nimen.

[HAKEMISTO]

th

<th
abbr="..."
align="left|center|right"
axis="..."
class="..."
colspan="..."
headers="..."
id="..."
rowspan="..."
scope="col|row"
title="..."
valign="top|middle|bottom"
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</th>

th määrittää taulukon (table) otsakesolun (Table Header cell). Attribuutit ovat samat kuin td-elementillä.

[HAKEMISTO]

title

<title
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</title>

title määrittää dokumentin nimen. Siitä tulee käydä selvästi ilmi, mitä kyseinen sivu pitää sisällään. Esim. <title>Esko Hukkasen artikkeli pääkaupunkiseudun metsittymisestä</title>. Nimen ei pitäisi olla yli 60 merkin pituinen. HTML-dokumentissa saa esiintyä vain yksi title-elementti. Kuitenkin useille elementeille voi antaa title-attribuutin.

[HAKEMISTO]

tr

<tr
align="..."
class="..."
id="..."
title="..."
valign="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</tr>

tr määrittää taulukon (table) solurivin (Table Row). align ja valign määräävät rivin solujen sisällä olevan tekstin vaaka- ja pystysuorasta sijoittelusta.

[HAKEMISTO]

ul

<ul
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</ul>

ul muodostaa järjestämättömän eli numeroimattoman listan (Unordered List), joka koostuu li-elementeillä merkityistä osista.

[HAKEMISTO]

var

<var
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml"
>...</varl>

var-elementin sisällä oleva teksti ymmärretään muuttujaksi (variable) tai komennon argumentiksi. Selainohjelma näyttää var-elementin sisällä olevan tekstin tietyllä tavalla.

[HAKEMISTO]