HTML © Eva von Pepel
* [ HTML-referensbok ] * [ Referensböcker ] *
DIV (divisioner) * CENTER (centrerat innehåll) * H(1-6) (rubriker) * P (stycken) * BLOCKQUOTE (blockcitat) * PRE (preformaerad text) * ADDRESS (kontakt information) * HR (grafisk avdelare) * INS och DEL (infogad och raderad text)
Direkt efter dokumentets huvud (HEAD) kommer kroppen (BODY). Det får inte finnas några markord eller tecken mellan dessa två element, dvs </HEAD> som markerar slut på huvuddelen och <BODY> som markerar början på kroppsdelen. Det enda tillåtna är mellanslagg, tomma rader och kommentarer (skrivs mellan <!-- och -->).
Innehåll av elementet BODY utgör den synliga delen av HTML-dokument och är dess egentliga innehåll. Allt, förutom kommentarer, som skrivs mellan <BODY> och </BODY> är alltså synligt på skärmen. Innehåll av elementet BODY är BODY-elementen.
Vanligtvis börjar man struktureringen med att dela upp dokumentet i större logiska struktureringsblock (divisioner DIV) som föreställer en helhet, t ex kapitel i en bok. Med hjälp av attributet ID och/eller attributet CLASS kan dessa bock identifieras och/eller klassificeras och följaktligen formateras på ett sätt som är representativt för hela blocket. Finns det inga större block i dokumentet brukar man då börja med en första nivå rubrik H1.
Dessa struktuella block kan i sin tur innehålla mindre block, t ex rubriker, stycken eller tabeller. Blockelement är element som kan förekomma direkt i elementet BODY och skapar radbrytningar, dvs börjar på en ny rad och avslutar en rad. Många www-klienter avgränsar de flesta blockelement med en tom rad ovanför elementet och en under.
Till slut kommer inlineelement, även kallad textlevel-element. dvs element som följer blocket/texten utan att skapa några radbrytningar. Med några få undantag kan dessa element enbart finnas i något blockelement, mao kan de inte finnas direkt i BODY. Inte heller kan de (med några få undantag) innehålla blockelement.
<BODY> Blockelementen <DIV></DIV> <CENTER></CENTER> <H1></H1> <H2></H2> <H3></H3> <H4></H4> <H5></H5> <H6></H6> <P></P> <BLOCKQUOTE></BLOCKQUOTE> <PRE></PRE> <ADDRESS></ADDRESS> <HR> <INS></INS> <DEL></DEL> Följande blockelement beskrivs i andra avsnitt: listor: DIR (T), DL, MENU (T), OL, UL, LI, DD, DT, huvud: ISINDEX (T) tabeller: TABLE, TBODY, TD, TFOOT, TH, THEAD, TR formulär: FIELDSET,FORM ramar: FRAMESET (F), NOFRAMES (F) inlinelement som kan innehålla block: APPLET (T), IFRAME (T), MAP, BUTTON, OBJECT och SCRIPT som kan innehålla NOSCRIPT (block) </BODY> |
Exempel
<HTML> |
Markeras: <DIV></DIV> - båda obligatoriska
Får innehålla: blockelement, inlineelement
Får finnas i: APPLET (T), BLOCKQUOTE, BODY, BUTTON, CENTER (T), DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES (T), NOSCRIPT, OBJECT, TD, TH
Detta element används för att gruppera andra element i s.k. blockdivisioner. Elementet är unikt då det inte lägger till någon som helst presentation utan endast fungerar som generisk språk- och/eller stilbehållare (nästan som ett gummiband som endast håller elementen ihop utan att påverka dem). Blockdivision kan innehålla ett element eller ett antal element som grupperas i en helhet, t ex kapitel i en bok eller del av ett dokument t ex avsnitt. Genom att tilldela elementet attributen ID och/eller CLASS kan hela gruppen formateras på ett unikt sätt. Med hjälp av attributet ID kan t ex innehållsförteckning skapas eller tom databas.
Början på elementet markeras med <DIV> och slut med </DIV>. Båda är obligatoriska. DIV kan innehålla alla andra BODY-element, block såsom inline.
Med DIVs barn SPAN kan du på samma sätt formatera inlineelement.
| HTML 4.0 | HTML 4.0 Transitional | HTML 3.2 |
|---|---|---|
| Alla attribut som beskrivs i %attrs; | Alla attribut som beskrivs i %attrs; och ALIGN (justering) som kan ta värden: LEFT (vänster - standard), RIGHT (höger), CENTER (centrera), JUSTIFY (raka marginaler) |
ALIGN (som kan ta värden: LEFT (standard), RIGHT (höger), CENTER (centrera) |
<DIV ALIGN=center>
<H1>centrerad rubrik</H1>
<P>centrerat stycke</P>
</DIV>
Markeras: <CENTER></CENTER> - båda obligatoriska
Får innehålla: blockelement, inlineelement
Får finnas i: APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH
CENTER är en alias till <DIV ALIGN=center> och får endast användas i HTML Transitional där det är nedskrivet samt i HTML 3.2.
Elementet är fortfarande mycket kontroversiellt p.g.a. dess ologiska och absurda egenskaper. Det absurda ligger i det faktum att CENTER är ett värde och inte element.
Början på elementet markeras med <CENTER> och slut med <CENTER>. Båda är obligatoriska. CENTER kan innehålla alla andra BODY-element, block såsom inline.
| HTML 4.0 | HTML 4.0 Transitional | HTML 3.2 |
|---|---|---|
| Elementet finns inte | Alla attribut som beskrivs i %attrs; | Inga |
<CENTER>...</CENTER> är alias till <DIV ALIGN=center>...</DIV>
Markeras: <Hn></Hn> - båda obligatoriska
Får innehålla: inlineelement
Får finnas i: APPLET (T), BLOCKQUOTE, BODY, BUTTON, CENTER (T), DEL, DD, DIV, FIELDSET, FORM, IFRAME (T), INS, LI, MAP, NOFRAMES (F), NOSCRIPT, OBJECT, TD, TH
Rubrikerna är rangordnade i 6 olika nivåer där nivå 1 har den högsta prioriteringen. Rubriker är blockelement, dvs skapar en radbrytning vid dess början och slut. De flesta www-klienter skapar även en tom rad ovan och en under varje rubrik. Även då rubriker är blockelement får de inte innehålla andra blockelement utan endast inlinelement.
De flesta www-klienter visar rubriker med fet stil och varierande fontstorlekar beroende på rubrikens rangordning. Det finns sådana användare som använder rubriker för att ändra fontstorleken. Detta är felaktig användning av dessa element då rubriker är dokumentens strukturella delar och har inget med presentation att göra.
Rubriker är behållare. Dess början markeras med starttaggen <Hn> och slut med </Hn>. Båda är obligatoriska. "n" står för en siffra mellan 1 och 6. Rubrikernas innehåll kan endast vara andra inline element, t ex vara vanlig text, bilder eller båda två. Till exempel en logo i början av dokumentet är en perfekt rubrik på nivå 1.
| HTML 4.0 | HTML 4.0 Transitional | HTML 3.2 |
|---|---|---|
| Alla attribut som beskrivs i %attrs; | Alla attribut som beskrivs i %attrs; och ALIGN (justering) som kan ta värden: LEFT (vänster - standard), RIGHT (höger), CENTER (centrera), JUSTIFY (raka marginaler) |
ALIGN (som kan ta värden: LEFT (standard), RIGHT (höger), CENTER (centrera) |
<H1>Rubrik på nivå 1</H1>
<H2 ALIGN=center>Centrerad rubrik på nivå 2</H2>
Endast HTML 3.2 och 4.0-Transitional
<H3 style="text-align: center">Centrerad rubrik på nivå 3</H3>
Endast stilmallar får användas i HTML 4.0
Markeras: <P></P> - sluttaggen </P> är valfri
Får innehålla: inlineelement
Får finnas i: ADDRESS, APPLET (T), BLOCKQUOTE, BODY, BUTTON, CENTER (T), DEL, DD, DIV, FIELDSET, FORM, IFRAME (T), INS, LI, MAP, NOFRAMES (F), NOSCRIPT, OBJECT, TD, TH
Innehåll av detta element är vanliga stycken som kan innehålla både text och bilder. Även detta blockelement får inte innehålla andra block utan enbart inlineelement. Början på elementet markeras med starttaggen <P> och slut med </P>. Sluttaggen är valfri då elementets slut är underförstått genom en starttagg av ett efterföljande element.
Även då sluttaggen </P> är valfri är dess användning oftast nödvändig, speciellt om du använder Internet Explorer. Denna www-klient har en bugg som man kan/vill inte åtgärda, nämligen om du centrerar eller högerställer ett stycke och inte stänger det centreras/högerställs även de efterföljande element. Centreringen slutar först när ett element som stänger stycket (på ett eller annat sätt) påträffas.
Använder du Stylesheets bör du stänga alla dina stycken. Om du inte gör det kommer alla efterföljande element ärva styckets stil som kan ställa till mycket problem, speciellt om ett antal element deklareras olika marginaler. Marginalerna läggs ihop och kan orsaka att innehållet hamnar utanför skärmen och måste skrollas efter.
<P> är en strukturell tag och markerar början av ett logiskt stycke. Hur den tolkas beror på programvaran. En taldator kan göra en paus mellan styckena, en annan dra in första raden och en annan infoga en tom rad mellan dem. Det flesta www-klienter infogar en tom rad. Det blev upphov till ett missförstånd beträffande elementets syfte som gjorde att en del tror att <P> används för att mata in rader som är självfallet helt fel.
| HTML 4.0 | HTML 4.0 Transitional | HTML 3.2 |
|---|---|---|
| Alla attribut som beskrivs i %attrs; | Alla attribut som beskrivs i %attrs; och ALIGN som kan ta attribut left (standardvärde), center, right, justify |
ALIGN och värden left, right, center |
Om du använder dig av raka marginaler placera sluttaggen </P> på nästa rad och inte på den rad där stycket slutar annars kommer Netscape även presentera den sista raden med raka marginaler som kan orsaka oönskvärda mellanrum mellan orden.
Markeras: <BLOCKQUOTE></BLOCKQUOTE> - båda obligatoriska
Får innehålla: blockelement, inlineelement
Får finnas i: APPLET (T), BLOCKQUOTE, BODY, BUTTON, CENTER (T), DD, DEL, DIV, FIELDSET, FORM, IFRAME (T), INS, LI, MAP, NOFRAMES (F), NOSCRIPT, OBJECT, TD, TH
Blockquote används för att citera längre utdrag från andras verk och används tillsammans med elementet CITE där verkets titel eller författare kan uppges. BLOCKQUOTE skapar s.k. blockcitat - längre citat. Ska du citera kortare utdrag, t ex några ord eller en mening, som bäddas in i t ex ett stycke använder du elementet Q som är avsett för inlinecitat.
Början på elementet markeras med <Blockquote> och slut med </Blockquote>. Båda är obligatoriska. I HTML 4.0 kan <Blockquote> enbart innehålla andra blockelement, dvs ett annat blockelement, t ex <P> måste följa direkt efter <Blockquote>. I HTML 4.0 Transitional kan <Blockquote> följas av antingen blockelement eller inlineelement. BLOCKQUOTE kan nästläggas, dvs ett blockcitat kan innehålla ett annat.
De flesta www-klienter visar BLOCKQUOTE:s innehåll med ett höger- och ett vänsterindrag. En sådan presentation orsakade att en del använder elementet för att indentera texten och inte för att citera. HTML 4.0 nedskriver en sådan användning av BLOCKQUOTE till förmån av stilmallar. Ha även i tankarna att inte alla www-klienter indenterar texten. En del presenterar utdraget med blå eller gröna eller kursiva fonter istället. Då BLOCKQUOTE:s innehåll bör vara utdrag från andras verk indexteras inte innehållet av ett antal sökmotorer.
| HTML 4.0 och HTML 4.0 Transitional | HTML 3.2 |
|---|---|
| Alla attribut som beskrivs i %attrs; och CITE |
Inga |
Attributet CITE hänvisar till citatens källa, dvs URL till det dokument från vilket citatet är taget.
<BLOCKQUOTE CITE=url>
<P>Citat</P>
</BLOCKQUOTE>
Markeras: <PRE></PRE> - båda obligatoriska
Får innehålla: HTML 4.0 - IMG, OBJECT, BIG, SMALL, SUB, SUP
HTML 4.0 Transitional - IMG, OBJECT, APPLET, BIG, SMALL, SUB, SUP, FONT, BASEFONTHTML
3.2 - IMG, BIG, SMALL, SUB, SUP, FONT
Får finnas i: APPLET (T), BLOCKQUOTE, BODY, BUTTON, CENTER (T), DD, DEL, DIV, FIELDSET, FORM, IFRAME (T), INS, LI, MAP, NOFRAMES (F), NOSCRIPT, OBJECT, TD, TH
Innehåll av detta element presenteras på samma sätt det skrivs inklusive alla mellanslag eller tabbar och används mest för skripter, dikter eller liknande och även i formulär för att få ordning på fälten och rutor. Tidigare, dvs innan tabell-tiden, användes elementet för att presetera tabulära data.
En "tabell" kan se ut så här om den PRE-formateras:
Land Orter Sverige Stockholm England London
Början på elementet markeras med starttaggen <PRE> och slut med </PRE>. Båda är obligatoriska. För att kunna bevara de rätta avstånden visas innehåll i proportionella fonter. Var försiktig med radlängden och försök hålla dig till det rekommenderade antalet tecken 72-80. Det finns ingen wordwrap i <PRE> så om raden är längre än skärmen måste besökaren skrolla efter den. Elementet får enbart innehålla inlineelement exklusive följande:
| HTML 4.0 | HTML 4.0 Transitional | HTML 3.2 |
|---|---|---|
| IMG, OBJECT, BIG, SMALL, SUB, SUP | IMG, OBJECT, APPLET, BIG, SMALL, SUB, SUP, FONT, BASEFONT | IMG, BIG, SMALL, SUB, SUP, FONT |
| HTML 4.0 | HTML 4.0 Transitional | HTML 3.2 |
|---|---|---|
| Alla attribut som beskrivs i %attrs; | Alla attribut som beskrivs i %attrs; och WIDTH |
WIDTH |
Med detta attribut kan blocketsbredd föreslås. En www-klient kan välja då en annan fontstorlek för att bättre anpassa innehållet till breden. Värdet är en siffra som representerar antal tecken blockrader ska innehålla. Än så länge får inte attributet något vidare stöd.
<PRE width=80>
Detta block kommer att vara 80 tecken bred
</PRE>
Markeras: <ADDRESS></ADDRESS> - båda obligatoriska
Får innehålla: inlineelement, i HTML 4.0 Transitional även P
Får finnas i: APPLET (T), BLOCKQUOTE, BODY, BUTTON, CENTER (T), DD, DEL, DIV, FIELDSET, FORM, IFRAME (T), INS, LI, MAP, NOFRAMES (F), NOSCRIPT, OBJECT, TD, TH
Detta element används för kontaktinformation, t ex postadress eller telefonnummer. Elementet brukar förekomma i början eller slut av ett dokument.
Elementet är en behållare vars början markeras med en stattagg <Address> och slut med </Address>. Båda är obligatoriska. Även detta blockelement får endast innehålla inlinelement. HTML 4.0 Transitional tillåter även styckena (P). Innehållet visas oftast i kursivstil och ibland med ett litet indrag.
| HTML 4.0 | HTML 4.0 Transitional | HTML 3.2 |
|---|---|---|
| Alla attribut som beskrivs i %attrs; | Alla attribut som beskrivs i %attrs; | Inga |
<ADDRESS>
Kontaktperson för HTML Referens Guiden
är
<A href="mailto:eva@algonet.se">Eva</A>,
</ADDRESS>
Markeras: <HR> - sluttagg saknas
Får innehålla: Inget - tomt element
Får finnas i: APPLET (T), BLOCKQUOTE, BODY, BUTTON, CENTER (T), DD, DEL, DIV, FIELDSET, FORM, IFRAME (T), INS, LI, MAP, NOFRAMES (F), NOSCRIPT, OBJECT, TD, TH
HR står för horizontal rule och är en visuell horisontell linje, en grafisk avdelare som används för att avgränsa byte av ämne i ett block.
HR markeras enbart med <HR>. Det är ett tomt element och som sådant saknar sluttagg. Som blockelement skapar HR en radbrytning i början av elementet och en vid dess slut.
| HTML 4.0 | HTML 4.0 Transitional | HTML 3.2 |
|---|---|---|
| %coreattrs; och %events som beskrivs i %attrs; OBS! EJ %i18in | %coreattrs; och %events som beskrivs i %attrs; OBS! EJ %i18in och ALIGN, NOSHADE, SIZE, WIDTH |
ALIGN, NOSHADE, SIZE, WIDTH |
Nedskrivet attribut. Attributet specificerar avdelarens horisontell justering i förhållande till runtliggande innehåll. Tillåtna värden är: LEFT, CENTER (standardvärde) och RIGHT.
Nedskrivet attribut. Attributet är ritar en grövre linje. Detta är ett boolean attribut så dess värde är noshade och behöver inte uppges.
Nedskrivet attribut. Attributet specificerar anvdelarens bredd. Värdet uppges i pixlar. Standardvärdet bestäms av www-klienten men brukar vara 2 pixlar.
Nedskrivet attribut. Attributet specificerar avdelarens längd. Värdet kan uppges i pixlar och procent. Standardvärdet är 100%.
<HR ALIGN=left NOSHADE SIZE=10 WIDTH="50%">
Markeras: <INS></INS> <DEL></DEL> - båda obligatoriska
Får innehålla: blockelement, inlineelement
Får finnas i: blockelement, inlineelement
Dessa två element introducerades i HTML 4.0 och används för att markera ändringar i dokumentet med respekt till dess olika versioner så att ändringarna kan lätt urskiljas vid jämförelsen.
DEL står för deleted text, raderad text, medan INS står för inserted text, infogad text. De ändrade sektionerna kan visas till exempel i en annan font (INS) eller överstrukna (DEL). Elementen är unika då de kan förekomma både som blockelement direkt inuti BODY och innehålla t ex stycken, tabeller samt andra blockelement eller inlineelement inuti t ex ett stycke och innehålla ett eller fler ord, dock icke båda samtidigt. INS och DEL är behållare samt kräver både start- och sluttaggar.
| HTML 4.0 | HTML 4.0 Transitional | HTML 3.2 |
|---|---|---|
| %attrs;och CITE, DATETIME |
%attrs;och CITE, DATETIME |
Elementen finns inte |
Värde av detta attribut är en URL som pekar till ett källdokument där orsak till ändringarna beskrivs.
Värde av detta attribut specificerar datum och tid då ändringen skedde. Uppges YYYY-MM-DDThh:mm:ssTZD; YYYY-år, MM-månad; hh-timme, mm-minuter, ss-sekunder: TZD-time zone designator, t ex CET Central European Time.
<P>
Det fanns <DEL>22</DEL><INS>25</INS> deltagare.
</P>
Orsak till ändringarna kan även specificeras med hjälp av attributet TITLE och på så sätt få informationen presenterad i form av t ex popup-fönster:
<INS DATETIME="1998-05-28T15:20:40CET" TITLE="Ändringen gjordes pqa Evas kommentarer"> Ny text </INS>