Elementer
Elementer
Du finner lister med elementer hos flere kilder, f.eks hos Mozilla Developers Network [2]
De elementene som er forsvunnet siden HTML4 er:
<acronym>,<applet>,<basefont>,<big>,<center>, <font>,<frame>,<frameset>,<noframes>,<strike>, <tt>,<u>,<xmp>
En ting vi kan merke oss er at frames er ute. Kombinasjonen av AJAX og/eller CSS og Javascript gjør handtering av frames overflødig og unødig komplisert. Merk imidlertid at iframe fortsatt er med.
Vi merker oss videre at vi har fått egne elementer for video og audio. Og vi beholdt object og embed. Det er litt diffust og det er kanskje litt overlap mellom disse. Henter vi forklaring fra Editors draft [3] finner vi følgende:
- video
- A video element is used for playing videos or movies.
- audio
- An audio element represents a sound or audio stream.
- embed
- The embed element represents an integration point for an external (typically non-HTML) application or interactive content.
- object
- The object element can represent an external resource, which, depending on the type of the resource, will either be treated as an image, as a nested browsing context, or as an external resource to be processed by a plugin.
- iframe
- The iframe element represents a nested browsing context.
Gruppering
Hos ulike kilder finner vi litt forskjellige måter å gruppere ,litt avhengig av perspektivet. Kilden, Editors draft [3] buker følgende gruppering
- The Root Element
-
<html>
- Document Metadata
-
<head>,<title>,<base>,<link>,<meta>,<style>
- Scripting
-
<script>,<noscript>
- Sections
-
<body>,<section>,<nav>,<article>,<aside>, <h1>-<h6>,<hgroup>,<header>,<footer>,<address>
- Grouping Content
-
<p>,<hr>,<pre>,<blockquote>, <ol>,<ul>,<li>,<dl>,<dt>,<dd>,<figure>, <figcaption>,<div>
- Text-level Semantics
-
<a>,<em>,<strong>,<small>,<s>, <cite>,<q>,<dfn>,<abbr>,<time>,<code>,<var>,<samp>, <kdb>,<sub>,<sup>,<i>,<b>,<mark>,<ruby>,<rt>, <rp>,<bdi>,<bdo>,<span>,<br>,<wbr>
- Edits
-
<ins>,<del>
- Embedded content
-
<img>,<iframe>,<embed>,<object>, <param>,<video>,<audio>,<source>,<track>, <canvas>,<map>,<area>
- Tabular data
-
<table>,<caption>,<colgroup>, <col>,<tbody>,<thead>,<tfoot>,<tr>,<td>,<th>
- Forms
-
<form>,<fieldset>,<legend>, <label>,<input>,<button>,<select>,<datalist>, <optgroup>,<option>,<textarea><keygen>, <output>,<progress>,<meter>
- Interactive elements
-
<details>,<summary>,<command>,<menu>
Det er selvsagt en rekke regler, her som i tidligere versjoner av HML og XHTML regler for hvilke elementer som kan inneholde hvilke. Noen kjøreregler er gitt av navnene og grupperingen, men alle detaljene finner vi bare dersom vi finleser definisjonen av HTML5 eller prøver og feiler mot en validator.
Mange av disse elementene er beskrevet slik at vi forventer at nettleseren foretar en bestemt aksjon når de leses. Alle elementene i Metadata, Scripting og noen i Forms er slik.
Andre elementer er bltt navngitt ut fra en intensjon om hva de skal brukes til. Utseende og eventuell funksjonalitet er avhengig av stilsett og Javascript. Alle elementene i Sections, Grouping Content, Edits, Text-level Semantics og Tabular data er slik.
Spesielt Sections er en interessant gruppe elementer. De nye elementene section,nav,article,aside,hgroup,header,footer indikerer en bruk som er knyttet til en overordnet dokumentstruktur. Spørsmålet blir da hvilken betydning vil dette ha på måten vi skriver og leser på web? Søking? Skraping?
Attributter
De ulike elementene kan ha litt forskjellige attributter, men det er definert et sett med standard attributter som de fleste skal akseptere.
accesskey,class,contenteditable, contextmenu,dir,draggable,dropzone, hidden,id,lang,spellcheck,style,tabindex,title
Events
- Window Event Attributes
-
Events triggered for the window object.
Applies to the <body> tag:onafterprint,onbeforeprint, onbeforeonload, onblur,onerror,onfocus, onhaschange,onload, onmessage,onoffline, ononline, onpagehide,onpageshow, onpopstate, onredo,onresize, onstorage,onundo, onunload
- Form Events
-
Events triggered by actions inside a HTML form.
Applies to all HTML5 elements, but is most common in form elementsonblur,onchange,oncontextmenu, onfocus,onformchange,onforminput, oninput,oninvalid, onselectonsubmit
- Keyboard Events
-
Events triggered by a keyboard.
Applies to all HTML5 elements.onkeydown,onkeypress,onkeyup
- Mouse Events
-
Events triggered by a mouse, or similar user actions
Applies to all HTML5 elements.onclick,ondblclick, ondrag,ondragend,ondragenter, ondragleave,ondragover, ondragstart,ondrop, onmousedown,onmousemove, onmouseout,onmouseover, onmouseup,onmousewheel, onscroll
- Media Events
-
Events triggered by medias like videos, images and audio.
Applies to all HTML5 elements, but is most common in media elements, such as audio, embed, img, object, and videoonabort,oncanplay, oncanplaythrough, ondurationchange, onemptied,onended, onerror,onloadeddata, onloadedmetadata, onloadstart,onpause, onplay, onplaying,onprogress, onratechange, onreadystatechange, onseeked,onseeking, onstalled,onsuspend, ontimeupdate, onvolumechange, onwaiting
console
Hvis du er i tvil om hvilke egneskaper et element har kan du fange det opp som et objeckt i JavaScript , f.eks. slik: var obj=document.getElementById(), og så logge det i console med console.dir(obj).
Jeg bruker stort sett FireFox som utviklings- og testomgivelse, men du finner lignende løsninger i andre nettlesere. Det jeg gjør er å sette opp Tools : Web Developer : Browser Console. Når det er gjort kan jeg skrive til konsollet fra javascriptkoden, se Console hos Mozilla [4] . Vi har mange mulige rapporteringsformer. console.dir( ) gir en dump av alle egeneskapene til et objekt.
