22 HTML ploki- ja rea-elemendid
Plokielemendid
Osa elemente HTML keeles on blokielemendid (block), mis tähendab, et nad algavad alati uuelt realt, hõivavad veebilehel kogu rea ja ei luba teisi elemente enda kõrvale.
Plokielementideks on näiteks pealkirjad (<h1>…<h6>), tekstilõigud <p>, loendid <ol> ja <ul>, tabelid <table>, alajaotused <div> jt.
Plokielemente ei kirjutata reaelementide sisse!
| Plokielemendid | ||||
<address>Kontaktinformatsioon |
<article>Artikli sisu |
<aside>Ääremärkus |
<blockquote>Pikk tsitaat |
<canvas>“Lõuend” |
<dd>Kirjeldusloendi kirjeldus |
<div>Plokk-konteiner |
<dl>Loendielement |
<dt>Kirjeldusloendi elment |
<fieldset>Vormi elementide koondamine |
<figcation>Pildile pealdise lisamine |
<figure>Meediaelementide koondamine |
<footer>Jalus |
<form>Vorm |
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>Pealkirjad |
<header>Päis |
<hr>Horisontaaljoon |
<li>Loendi element |
<main>Lehe põhiosa |
<nav>Navigatsiooniplokk |
<noscript>Teavitus skripti kasutamisest |
<ol>Nummerdatud loend |
<p>Tekstilõik |
<pre>Eelnevalt vormindatud tekst |
<section>Sektsioon |
<table>Tabel |
<tfoot>Tabeli päis |
<tfoot>Tabeli jalus |
<ul>Täpploend |
<video>Video |
Rea-elemendid
Teine osa HTML elemente on jällegi rea-elemendid (inline). Rea-elemendid ei alga uuelt realt ja nad võtavad enda alla nii palju ruumi kui parasjagu vajalik.
| Rea-elemendid | ||||
<a>Hüperlink |
<abbr>Lühend |
<b>Paks kiri |
<bdo>Teksti suund |
<br>Reavahetus |
<button>Nupp |
<cite>Teose pealkiri |
<code>Koodilõik |
<dfn>Definitsioon |
<em>Rõhutatud kiri |
<i>Kaldkirjas kiri |
<img>Pilt |
<input>Sisend |
<kbd>Klaviatuurikäsklus |
<label>Silt |
<map>Interaktiivne pilt |
<object>Objekt |
<output>Väljund |
<q>Tsitaat |
<samp>Koodinäite stiil |
<script>Programmikood |
<select>Rippmenüü |
<small>Väike tekst |
<span>Reasisene konteiner |
<strong>Oluline tekst |
<sub>Allindeks tekst |
<sup>Ülaindeks tekst |
<textarea>Tekstisisestus kast |
<var>Muutuja |
|
Konteinerid <div> ja <span>
Keerulisemas HTML koodis leiavad tihti kasutust ka <div> ja <span> elemendid. Element <div> on plokielement ja teda kasutatakse enamasti teiste elementide grupeerimiseks. Näiteks saame seda elementi kasutades stiliseerida korraga mitut tema sees asuvat elementi.
<div style="background-color:#fff700;padding:20px;"> <h1>Põhiväärtused</h1> <p>Meile olulisi märksõnu ja põhimõtteid lugedes joonistuvad selgelt välja kolm läbivat põhiväärtust. Need on ÕNNELIKKUS, EETILISUS ja VAIMSUS. Need kolm on väärtuseks kõiges, mida me teeme ja mille poole me püüdleme. RaM Kooli pedagoogiline kontseptsioon on suunatud sellele, et kogu koolipere, eriti aga iga laps, oleks praegu ja tulevikus:</p> <h2>ÕNNELIK</h2> <p>Siia kuuluvad märksõnad tervis, loovus, võrdsus, individuaalsust arvestav kohtlemine, lapsesõbralikkus, iseseisvus, ettevõtlikkus, tasakaalukus, vabadus, ennast armastav eluhoiak.</p> </div>
Element <span> on aga reasisene element ning enamasti kasutatakse seda tekstilõigus mõne osa stiliseerimiseks:
<p>Mulle maitsevad <span style="background-color:yellow">banaanid</span> ja <span style="color:red;">õunad</span>.</p>
Lisaks style atribuudile lisatakse <div> ja <span> elemendile tihti ka class või id atribuut, et meil oleks võimalik neid elemente ka stiililehe kaudu stiliseerida.
