!

Dette materialet blir ikke lenger vedlikeholdt. Du vil finne oppdatert materiale på siden: http://borres.hiof.no/wep/

HTML5
Børre Stenseth
HTML > HTML5 >Tagger

HTML5 tagger

Hva
Oversikt over tagger og attributter

Du finner lett en rekke oversikter og kommentarer til alle elementer og attributter i HTML5. En enkel listing med noen korte kommentarer finnes på W3Schools [1] . Et W3C dokument som beskriver status på HTML5 definisjonen finnes som Editors draft [2]

De elementene som er forsvunnet siden HTML4 er:

<acronym>,<applet>,<basefont>,<big>,<center>,<dir>,
<font>,<frame>,<frameset>,<noframes>,<strike>,<tt>,<u>,<xmp>

De nye er:

<article>,<aside>,<audio>,<canvas>,<command>,<datalist>,<embed>,
<figcaption>,<figure>,<footer>,<header>,<hgroup>,<keygen>,<mark>,
<meter>,<nav>,<output>,<progress>,<rp>,<rt>,<ruby>,<section>,
<source>,<summary>,<time>,<video>,<wbr>

og vi sitter igjen med følgende liste med 102 elementer:

<!-->,<!DOCTYPE>,<a>,<abbr>,<address>,<area>,<article>,<aside>,<audio>,<b>,
<base>,<bdo>,<blockquote>,<body>,<br>,<button>,<canvas>,<caption>,<cite>,
<code>,<col>,<colgroup>,<command>,<datalist>,<dd>,<del>,<details>,<dfn>,<div>,
<dl>,<dt>,<em>,<embed>,<fieldset>,<figcaption>,<figure>,<footer>,<form>,
<h1> - <h6>,<head>,<header>,<hgroup>,<hr>,<html>,<i>,<iframe>,<img>,<input>,
<ins>,<keygen>,<kbd>,<label>,<legend>,<li>,<link>,<map>,<mark>,<menu>,<meta>,
<meter>,<nav>,<noscript>,<object>,<ol>,<optgroup>,<option>,<output>,<p>,
<param>,<pre>,<progress>,<q>,<rp>,<rt>,<ruby>,<s>,<samp>,<script>,<section>,
<select>,<small>,<source>,<span>,<strong>,<style>,<sub>,<summary>,<sup>,
<table>,<tbody>,<td>,<textarea>,<tfoot>,<th>,<thead>,<time>,<title>,<tr>,
<ul>,<var>,<video>,<wbr>

Elementer

En ting vi kan merke oss med lista over 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 [2] 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 [2] 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. Disse er i kortform beskrevet hos W3School [3] :

accesskey,class,contenteditable,contextmenu,dir,draggable,dropzone,
hidden,id,lang,spellcheck,style,tabindex,title 

der følgende er nye:

contenteditable,contextmenu,draggable,dropzone,hidden,spellcheck
Referanser
  1. HTML5 Tag Reference W3Schools www.w3schools.com/html5/html5_reference.asp 02-04-2011
  1. HTML5 w3.org dev.w3.org/html5/spec/Overview.html 14-03-2011
  1. HTML5 Global Attributes W3Schools www.w3schools.com/html5/html5_ref_globalattributes.asp 02-04-2011
Vedlikehold
B Stenseth, april 2011
( Velkommen ) HTML > HTML5 >Tagger ( Events )