Vefforritun 1 kennd haustið 2025
<!doctype html>
<html lang="is">
<head>
<meta charset="utf-8">
<title>Halló heimur</title>
</head>
<body>
<p>Halló heimur</p>
</body>
</html>
<html><html>lang attribute er æskilegt þar sem það skilgreinir á hvaða máli síðan er og er notuð af t.d. lesvöfrum til að velja tungumál<p lang="en">Hello world!</p><head><head> er yfirleitt fyrsta barn <html><meta charset="utf-8"><title><body><body>HTML skilgreinir element og er þeim skipt í hópa:
<object width=1000 height=288 data=img/content-venn.svg></object>
id, skilgreinir auðkenni á element sem notað er í CSS eða til uppflettingar í DOM.
id skilgreint einu sinni per síðu.class, flokkar (skipt á bili) sem elementið tilheyrir, mikið notað í CSS. Flokkanöfn ættu að vera lýsandi fyrir hegðun en ekki útlit (class="important" ekki class="red").title, texti með auka upplýsingum um element sem oftast birtist sem tooltip þegar mús er haldið yfir elementinu, ekki aðgengilegt í öllum tækjum og ætti að forðast.Lýsigögn eru ekki efni sem notandi neytir beint, heldur lýsir vefnum á einhvern máta, t.d.
<meta> skilgreinir margskonar lýsigögn, t.d. stafasett (charset), lýsingu á vef (description), eða hver sé höfundur (author)<script> inniheldur eða vísar í JavaScript kóða<link> lýsir tengingu við önnur gögn. Ef rel attribute er sett þá einskorðast <link> við <head>
Flest element í meginmáli, <body>, vefs eru flæði element.
Nokkur element eru flæði element og innihalda greinilegt efni (e. palpable content) en falla ekki í aðra flokka.
Dæmi fylgja, betri yfirferð í kennslubók, og sú allra besta í spec.
<address>, skilgreinir upplýsingar um hvernig megi hafa samband við höfund efnis.<blockquote>, skilgreinir hluta í skjali sem vitnað er í frá öðrum stað.<footer> skilgreinir efni um það element sem það er innihaldið í, tilgreinir t.d. höfund, tengt efni, eða hvenær efnið var seinast uppfært.<header> skilgreinir hóp af efni sem kynnir eða veitir leiðsögn um efni.<main> skilgreinir megin efni vefs, þetta element ætti aðeins að koma fyrir einu sinni per vefsíðu.<p>, málsgrein, skilgreinir í flestum tilfellum texta og element sem falla undir orðalag.<pre>, preformatted, texti innan <pre> er óstílaður af vafra og viðheldur bilum og línubilum.<figure>, sjálfstætt svæði innan skjals sem við munum vilja vísa í úr öðrum stöðum.<dialog>, merkir part vefs sem þarf eða krefst aðkomu notanda, ekki nógu vel stutt í dag til almennrar notkunar<div> er element sem hefur enga eiginlega merkingu, merking þess er skilgreint af því sem það inniheldurAuthors are strongly encouraged to view the
divelement as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of thedivelement leads to better accessibility for readers and easier maintainability for authors.
<article> er fyrir efni sem stendur sjálfstætt innan vef, t.d. grein, athugasemd<aside> er fyrir efni sem er tengt efni í kringum element, t.d. útdrátt sem gert er hærra undir höfði<nav> heldur utan um leiðarkerfi fyrir vef<section> skilgreinir kafla á vef, heldur utan um svipað efni, oftast með fyrirsögn<body>
<div id="main">
<div id="header">
<div id="nav"></div>
</div>
<div class="article">
<div class="section"></div>
</div>
<div id="footer"></div>
</div>
</body>
<body>
<main>
<header>
<nav></nav>
</header>
<article>
<section></section>
</article>
<footer></footer>
</main>
</body>
<h1> til <h6>, í minnkandi mikilvægisröð<hgroup> og skilgreinum útlínu heildstætt yfir allt skjalið, endurnýtum ekki innan kafla og svæða<main>
<h1>Aðalfyrirsögn, aðeins 1x</h1>
<section>
<h2>Kaflaheiti</h2>
<h3>Millifyrirsögn</h3>
</section>
<section>
<h3>Ónei, ég ætti að vera h2</h3>
</section>
</main>
Nokkur, af frekar mörgum elementum sem finnast í meginmáli, frekar í kennslubók.
<p>, málsgrein, skilgreinir í flestum tilfellum texta<em>, leggur áherslu á texta<strong>, gefur texta mikið auka vægi<span>, merkir ekkert í sjálfu sér og er skilgreint af börnum sínum, svipar til <div><code>, merkir forritunarkóða<img> bætir mynd við, vísað í með src attribute<audio> bætir hljóðskrá við<video> bætir myndbandi við<object> bætir við utanaðkomandi auðlind, sem gæti verið meðhöndluð af vafra ef þekkt eða sem plugin (t.d. Flash)<iframe>, fellir inn aðra vefsíðu eða vef, vísað í með src attribute, innan núverandi síðu.<img src="">, <a href=""> og önnur element sem vísa í efniimg/mynd.jpg er gert ráð fyrir að img/ mappa sé til í sömu möppu og skjal sem vísað er frá/ er byrjað á að fara „á rótina“ á viðkomandi vef. þýðir mappa sem við erum í.. þýðir mappan fyrir ofan þá sem við erum íverkefni/
├── img/
│ └── mynd.jpg
└── index.html
mynd.jpg
./img/mynd.jpgimg/mynd.jpg/verkefni/img/mynd.jpg../verkefni/img/mynd.jpg<img src="mynd.jpg"><picture> element getur skilgreint nákvæmlega hvernig við viljum að mynd birtist, bæði tæknilega, og sjónrænt (art direction)Sum element eru, eða geta verið, gagnvirk fyrir notanda, t.d.:
<audio> og <video> geta skilgreint stýri attribute og eru þá gagnvirk<input> taka við gögnum frá notenda, sérstaklega í formum<embed> og <iframe> eru gagnvirk að því leiti að það sem innfellt er getur verið gagnvirkt<a>Nokkur attribute sem breyta hvernig tengill hagar sér, t.d.:
target, opnar tengil í öðru samhengi, oftast target="_blank" til að opna tengil í nýjum glugga.download, býður upp á að hlaða efni niður í stað að vafri fari að því.rel, tenging núverandi skjals við það skjal sem tengt er í, sjá mögulegar gerðir í staðli.Í flestum tilfellum er href attrbute URL sem tengt er á, en einnig er hægt að skilgreina tengla sem opna tölvupóst með mailto: forskeytinu, eða opna síma, með tel: forskeytinu.
<details><details> elementið leyfir að skilgreina efni sem hægt er að opna til að fá frekari upplýsingar.<summary> element skilgreinir samantekt eða yfirskrift<details> birt ef opnað, eða ef open attribute er til staðar