Tässä alla on muutamia tarpeellisia tageja selityksineen. Ne on kategorioitu löytämisen helpottamiseksi.
Yleiset
<!--
ja
-->
aloittavat ja lopettavat kommentin. Kommentti on lähdekoodin osa,
jota selain ei lue.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd>
pitäisi löytyä jokaisen
XHTML
1.1 tiedoston alusta. Kyseinen tagi kertoo selaimelle sivuston koodauksesta.
<html xmlns="http://www.w3.org/1999/xhtml>
aloittaa
XHTML
-koodauksen, jonka
</html>
lopettaa.
<head>
ja
</head>
sulkevat sisäänsä head-osuuden.
Head
-osuuden tulee sijaita
html
-tagien sisällä ennen
body
-osuutta.
<body>
ja
</body>
sulkevat sisäänsä kaiken näkyvän materiaalin, eli
body
-osuuden.
Head osioon voi laitaa
meta
-tageja, jotka kertovat selaimelle tietoja:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
kertoo selaimelle sivun sisältävän
(X)HTML
-koodia ja tekstiä, jotka käyttävät utf-8 merkistökoodausta. Merkistökoodausta voi muuttaa,
mutta utf-8 on moderni ja toimiva.
<meta http-equiv="Content-Style-Type" content="text/css" />
kertoo tyylien tiedostomuodon.
<meta http-equiv="keywords" content="avainsana, avainsana, avainsana" />
koodilla määritellään avainsanoja.
<meta name="description" content="KUVAUS" />
koodiin laitetaan kuvaus sivuistasi.
<meta name="revised" content="" />
koodilla kerrotaan edellisestä päivityksestä.
<meta http-equiv="refresh" content="5" />
koodilla määritellään uudelleenlatausväli. Tätä elementtiä on turha käyttää ellet päivitä
erittäin
usein. (useammin kuin kerran viidessä minuutissa)
Muutamia
head
-osioon laitettavia
link
-tageja:
<link rel="icon" type="image/png" href="favicon.png" />
asettaa kuvakkeen osoiteriville ja suosikeihin.
type
-kohtaa muokataan tiedostotyypin mukaan.
Href
-kohdassa on kuvan osoite.
<link rel="stylesheet" title="" media="screen" type="text/css" href="" />
koodi ottaa käyttöön ulkoisen tyylitiedoston.
Href
-kohtaan laitetaan osoite,
title
-kohtaan mikä tahansa nimi tiedostolle ja
media
-kohtaan laitetaan laite, jolle tyylitiedostoa käytetään.
(all=kaikki,screen=perus näyttö, print=tulostin,
handheld=pieninäyttöinen laite)
<link rel="alternate" type="application/rss+xml" title="RSS" href="" />
koodi luo yhteyden
RSS
-syötteeseen.Muuta head osioon laitettavaa:
<style type="text/css"></style>
tagit sulkevat sisäänsä tyylimäärittelyjä.
<base href=""></base>
määrittää linkkien polun alun.<title></title> tagien väliin laitetaan sivun otsikko, joka tulee näkyville muun muassa ikkunan yläreunaan.Yleistä body-osioon:
<div></div> luo kerroksen.Tekstin muotoiluun:
<p></p>
tageilla muodostetaan kappale. Kappaleiden käyttö on erittäin suositeltavaa.
<h1></h1> - <h6></h6>
tagein luodaan otsikoita.
h1
on suurin tärkeydessään ja
h6
pienin.
<em></em>
painottaa tekstiä. Oletusarvoisesti tämä on yleensä kursiivia
<strong></strong>
luo vahvaa tekstiä. Oletusarvoisesti tämä on usein lihavoitua.
<dfn></dfn>
selitys laitetaan näiden tagien väliin.
<code></code>
ohjelmointikielellä kirjoitettu teksti sijoitetaan näiden tagien väliin.
<var></var>
muuttuja tulisi sijoittaa näihin tageihin.
<cite></cite>
sitaatti tulisi sijoittaa näiden tagien väliin
<samp></samp>
ohjelmointikielinen esimerkki sijoitetaan näihin tageihin.
<kdb></kdb>
tageihin sijoitetaan näppäimistön tekstiä.
<span></span>
tageja on hyvä käyttää
class
-valitsimien ja tyylien kanssa. Tämä tagi ei ilman tyylejä tee mitään.
<q></q>
lyhyet lainaukset tulisi sijoitta näihin tageihin.
<blockquote></blockquote>
pitkät lainaukset laitetaan näiden tagien väliin.
<del></del>
tageja käytetään yhdessä
ins
-tagien kanssa muutoksia tehtäessä, mikäli vanha teksti halutaan jättää
paikalleen. Vanha teksti sijoitetaan näihin tageihin.
<ins></ins>
tageja käytetään yhdessä
del
-tagien kanssa muutoksia tehtäessä, mikäli vanha teksti halutaan jättää
paikalleen. Uusi teksti sijoitetaan näihin tageihin.<acronym title=""></acronym> tageihin laitetaan akronyymi siten, että kirjainjono tulee näkyville ja selite title-atribuuttiin.<abbr title=""></abbr> tageihin asetetaan lyhenne siten, että lyhenne tulee näkyville ja lyhentämätön ilmaus title-atribuuttiin.<br /> aiheuttaa rivinvaihdon. Lähes kaikki selaimet rivittävät tekstin automaattisesti, joten tätä tagia on turha k
äyttää ellei rivinvaihto ole täysin välttämätön. Huomaa, että kappalejako suoritetaan p-tageilla.Joskus saatat tarvita listoja. Esimerkiksi tämä sivu on täynnä listoja. Tässä muutama tarpeellinen listoja koskeva tagi:
<ol></ol> luo listan, jonka jäsenillä on järjestys, eli niillä on numerot tai kirjaimet.<ul></ul> luo listan, jonka jäsenillä ei ole järjestystä.<li></li> on listan yksittäinen osa. Tätä käytetään sekä järjestetyissä että järjestämättömissä listoissa.<dl></dl> luo määrityslistan, jossa on kahden eri sisennysasteen osia.<dt></dt> on määrityslistan määriteltävä osa.<dd></dd> on määrityslistan määrittelevä osa.Toisinaan saatat tarvita taulukkoa.
<table></table> tagit määrittelevät koko taulukon.<tr></tr> määrittelevät rivin.<td></td> määrittelevät yksittäisen solun.<thead></thead> tagilla valitaan yksi taulukon riveistä otsikkoriviksi. Tätä tagia pitää käyttää yhdessä tfoot ja tbody tagien kanssa. Näiden tagien tulee olla järjestyksessä thead - tfoot - tbody.<tfoot></tfoot> tagilla valitaan yksi taulukon riveistä alapuoliseksi otsikkoriviksi. Tätä tagia pitää käyttää yhdessä thead ja tbody tagien kanssa. Näiden tagien tulee olla järjestyksessä thead - tfoot - tbody.<tbody></tbody> tagilla valitaan kaikki muut rivit taulukon sisällöksi. Tätä tagia pitää käyttää yhdessä thead ja tfoot tagien kanssa. Näiden tagien tulee olla järjestyksessä thead - tfoot - tbody.Tässä olivat muutamat tarpeellisimmat. Jos tästä mielestäsi puuttuu jotakin, kerrothan minulle.