HTML grunder

Några av de vanligaste elementen i HTML är rubriker, paragrafer, divisioner och radbrytningar.

Dessa formateras automatiskt av olika webbläsare på ett liknande sätt med en radbrytning före och efter elementet. Därför kallas de blockelement till skillnad från inline element som inte automatiskt får en radbrytning före och efter.

Exempel på rubriker, paragrafer och divisioner

Rubriker <h1> – <h6>

Rubriker definieras med taggarna <h1> <h2> <h3> <h4> <h5> <h6>. <h1> är den största rubriken och <h6> är den minsta.

HTML:

<h1>Rubrik 1</h1>
<h2>Rubrik 2</h2>
<h3>Rubrik 3</h3>
<h4>Rubrik 4</h4>
<h5>Rubrik 5</h5>
<h6>Rubrik 6</h6>

Rubriker är ett blockelement vilket innebär att webbläsare automatiskt lägger till en radbrytning före och efter elementet.

När sökmotorer rankar sidor efter sökord är en av de faktorer som avgör vad som står i rubrikerna. De största rubrikerna är ”mest värda”. Se därför till att rubriksätta sidorna på ett smart sätt!

Paragrafer <p>

Paragrafer är textstycken som definieras av taggen <p>.

HTML:

<p>Detta är en paragraf</p>

En paragraf är ett blockelement vilket innebär att webbläsare automatiskt lägger till en radbrytning före och efter elementet.

Divisioner <div>

Divisioner definieras med taggen <div>. Divisioner är utformade för att användas med stilmallar (css) och är det element som används för att bygga upp en webbsidas layout.

Läs mer om hur en sida kan byggas upp med hjälp av div taggar genom boxmodellen.

Divisioner har vanligtvis en radbrytning före och efter elementet utan något inbyggt vertikalt utrymme. En division utan innehåll visas alltså inte av webbläsaren.

HTML:

<div>Detta är en division</div>

Radbrytningar <br />

Webbläsare drar vanligtvis ihop det vertikala tomma utrymmet mellan angränsade flytande blockobjekt. Detta innebär att tomma rader i HTML koden försvinner när läsaren skriver ut den.

Exempel:

Fusce porta sem,
aliquam vitae, metus.

HTML:

<p>Fusce porta sem, <br /> aliquam vitae, metus.</p>

Referenslista

Element	Beskrivning
HTML h1-h6	Anger en rubrik där h1 är störst
HTML p	Anger en paragraf
HTML div	Anger en del av ett dokument
HTML br	Anger en radbrytning