HTML atšķir sešas dažādas virsrakstu līmeņu pakāpes. To definē elementi no h1 līdz h6.
<h1>Virsraksta līmenis 1</h1> <h2>Virsraksta līmenis 2</h2> <h3>Virsraksta līmenis 3</h3> <h4>Virsraksta līmenis 4</h4> <h5>Virsraksta līmenis 5</h5> <h6>Virsraksta līmenis 6</h6>
Šeit h1 simbolizē lielāko, bet h6 mazāko virsrakstu. Arī HTML5 ieviesa papildu veidus virsrakstu definēšanai, kas tiks demonstrēti vēlāk.
Dažādie virsrakstu līmeņi palīdz jums strukturēt tekstu. Piemēram, jūs varat orientēties pēc grāmatām. Tur ir grāmatas nosaukums, kas ir salīdzināms ar h1 satura daļu. Tāpēc vienai HTML lapai ir jāievieto tikai viens h1 elements. Pārējo tekstu tad iedala citos līmeņos. Pēc galvenā virsraksta nāk h2. h2 apakšnodaļas atkal ir atzīmētas ar h3 elementu.
Starpcitos: Virsrakstu līmeņu izmērus sākotnēji nosaka pārlūki. Tomēr, tos varēsit patstāvīgi noteikt, izmantojot CSS. Par to vēlāk vairāk.
Virsrakstu līmeņus var izmantot ļoti vienkārši. Jums jāievada "h", pēc tam izvēlētais līmeņa cipars.
<h1>PSD-Tutorials.de</h1>
Noteikti pārbaudiet, vai ievades un aizveršanas tagi ir identiski.
Definēt rindas
Papildus virsrakstiem, teksts bieži sastāv no rindām. Tādas rindas HTML var ļoti vienkārši izveidot, izmantojot p elementu. Tāda rinda pēc noklusējuma ir attāluma no pārējiem elementiem. Kāds būs šī rindas garums, atkal varat kontrolēt ar CSS:
Šeit ir piemērs ar diviem rindu definējumiem:
<p>Tas ir rinda</p> <p>Tas arī ir rinda</p>
HTML5 īstenībā nav obligāti noteikts, ka atvērtās rindas jāaizver ar </p>. Tomēr, lai saglabātu skaidrību, ieteiktu faktiski izmantot aizveršanas </p> tagu.
Manuālie rindu pārtraukumi
Teksts rindkopās, sarakstos utt. automātiski tiek pārtraukts pārlūkā, ja, piemēram, tas ir platāks par pārlūka logu. Tas ir ērti, jo novērš lieku horizontālo ritināšanu. Papildus jūs varat rindas pārtraukt jebkurā vietā. Tam tiek izmantots elements <br />. Šis ir t.s. stand-alone tags, kas nenosaka savu aizveršanas tagu, bet faktiski pats sevi aizver.
<p>Jā, šis ir darbiniekiem, kas strādā nakti un dienu<br /> Ar roku un ar prātu, lai nopelnītu savu algu<br /> Tiem, kas gadsimtiem ilgi nav saņēmuši neko vairāk par savu maizi<br /> Esat asiņojis par savām valstīm un saskaitījis mirušos</p>
iPhone 5
5.
iPhone 5
Preformatēts teksts
Var rasties situācijas, kad tekstu vēlamies izvadīt tieši tā, kā tas ir sakārtots avottekstā. Parastā situācija ir programmu saraksti, kā to bieži var atrast arī šeit, vietnē „PSD-Tutorials.de“. 
Šādiem nolūkiem HTML atļauj definēt preformatētus teksta fragmentus. Pārlūks atzīmēs atkāpes tā, kā tās ir atrunātas avotkodā. Nākamais piemērs parāda, kā tas tiek ieviests dzīvē:
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> <h1>"Hallo, Welt!" in PHP</h1> <pre> <?php echo "Hallo, Welt\\n"; ?> </pre> </body> </html>
Fragmentu, kas jāparāda kā preformatētu tekstu, definē iekšējā pre-elementā. Ievietojiet atkāpes utt. tur precīzi tā, kā tās beigās vēlas redzēt pārlūkprogramma.
Skatoties uz piemēra kodu, varētu pamanīt dīvainas rakstzīmes <?php un ?>. Pārlūks tos attēlos kā <?php un ?>. Avotkodā izmantotā versija saucas rakstzīmju maskēšana. Tas ir nepieciešams, ja HTML rakstzīmes nav jāinterpretē pārlūkprogrammai. Ievadot tieši avotkodā <?php, pārlūks domātu, ka tas ir PHP sākuma joma. Tāpēc rakstzīmes tiek maskētas.
• Aizvietojiet rakstzīmi & ar virkni &
• Aizvietojiet rakstzīmi < ar virkni <
• Aizvietojiet rakstzīmi > ar virkni >
• Aizvietojiet pēdiņas ar "
Starpiem, pre ne tikai noderīgs programmu sarakstu parādīšanai. Ar to var viegli attēlot arī tabulāras datus. Nākamais piemērs parāda tipisku tabulu, kas ir izveidota tikai ar atstarpēm iekšpusē pre-elementa.
<pre> Mērķis Izbraukšana Ierašanās Perons ---------------------------------------------------------------- Berlīne 10:23 14:30 2 Hamburga 11:09 13:20 13 Mūnhenes 12:04 15:45 1a </pre>
Rezultāts pārlūkā izskatās šādi:
Tiešām pārlūki ņem vērā tos atstarpes, ko definējat avottekstā. Parādītais tabulu variants darbojas diezgan labi. Maziem tabulāriem es to uzskatu par ļoti praktisku. Tomēr, kad datu apjoms kļūst lielāks, jums vajadzētu pāriet uz klasiskām HTML tabulām. Kā tās definēt, jūs varēsiet uzzināt arī šajā sērijā.
