18. HTML lukitut ja avoimet elementit

HTML lukitut ja avoimet elementit

Jokaisella html elementillä on oletus näyttö arvo riippuen minkä tyypin elementti se on. Oletuksena useimmilla elementeillä arvot ovat joko lukittu tai avoin.

Lukittu Elementti

Lukittu elementti aloittaa aina uuden rivin ja vie aina riviltä kaiken tilan.

<div> elementti on lukittu elementti.

Esimerkkejä lukituista elementeistä:

<div>
<h1> - <h6>
<p>
<form>

Avoimet elementit

Avoin elementti ei ala uudelta riviltä ja vie tilaa vain sen verran mitä koodin pätkässä tekstiä on.

Tämä on avoin <span> elementti kappaleen sisässä

Esimerkkejä avoimista elementeistä:

<span>
<a>
<img>

<div> Elementti

<div> elementti on lukittu elementti jota usein käytetään säilömään muita HTML elementtejä.

<div> elementti ei tarvitse erillisiä atribuutteja, mutta style ja class tyylit ovat yleisesti käytössä

CSS:än kanssa kun käytetään yhdessä niin <div> elementtiä voidaan käyttää tyylittelemään sisältöjä:

Esimerkki

<div style="background-color:black; color:white; padding:20px;">

<h2>Lontoo</h2>
<p>Lontoo on Englannin pääkaupuni. Se on Englannin suosituin kaupunki, jonka metropoli alueella asuu yli 13 miljoonaa asukasta.</p>

</div>

<span> Elementti

<span> elementti on avoin elementti jota ylein käytetään teksteissä.

<span> elementti ei myöskään tarvitse atribuutteja, mutta style ja class ovat tässäkin yleisiä.

CSS:än kanssa käytettäessä <span> elementtiä, voit tyylitellä tekstiä:

Esimerkki

<h1> Minun <span style="color:red"> Tärkeä </span> otsikko </h1>