Dersom du ønsker å starte en karriere som front-end-utvikler, vil du ofte få rådet om å lære HTML. Hypertext Markup Language, oftest kjent som HTML, utgjør selve fundamentet for de aller fleste nettsider.
HTML er sammensatt av ulike elementer som tagger, attributter og selve elementene. Vårt fokus her vil være på HTML-tagger. Disse taggene benyttes for å instruere nettlesere om hvordan innhold, som overskrifter, avsnitt, bilder og mer, skal struktureres. HTML-tagger fungerer dermed som nøkkelord som bestemmer hvordan innholdet skal vises eller formateres i nettleseren.
Servere leser HTML-tagger sekvensielt, fra toppen til bunnen. Det er ingen øvre grense for hvor mange HTML-tagger en nettside kan inneholde.
- Alle HTML-tagger er innkapslet i < >
- Hver HTML-tag har en distinkt funksjon
- De fleste HTML-tagger har en starttag <tag> og en slutt-tag </tag>
HTML-tagger kontra HTML-elementer kontra HTML-attributter
Begrepene HTML-tagger og HTML-elementer blir ofte brukt om hverandre. Men er de egentlig det samme? Teknisk sett er det forskjell mellom HTML-elementer og HTML-tagger.
HTML-tagger definerer HTML-elementer. Dette gjøres ved å omslutte innhold med en start- og slutttag som matcher det aktuelle innholdet.
Her er et eksempel på et HTML-element:
<p> Dette er et avsnitt </p>
<p> er et eksempel på en HTML-tag.
HTML-attributter gir tilleggsinformasjon om HTML-elementer. Attributter finnes inne i HTML-elementer.
Her er et eksempel på et HTML-attributt:
<button id="SubmitOrder" class="btn">Bestill</button>
HTML-tagger alle burde kjenne til
HTML som markeringsspråk har utviklet seg mye siden Tim Berners-Lee lanserte det i 1993. Den første versjonen inneholdt 18 tagger. Nye tagger har blitt lagt til i hver ny versjon; den siste oppdateringen var HTML5 i 2014.
En sammenligning av HTML og HTML5 viser at sistnevnte har semantiske tagger som <article>, <header> og <footer> som mer presist beskriver innholdet. Nå finnes det over 100 HTML-tagger. Her er noen av de mest brukte taggene du burde kjenne til:
<!DOCTYPE>
DOCTYPE er teknisk sett ikke en tag, men en erklæring som forteller nettleseren hvilken type fil som skal lastes. Denne taggen informerer nettleseren om hvilken HTML-versjon som brukes.
I HTML5 kan du deklarere filen din slik:
<!DOCTYPE html>
Eller
<!doctype html>
Merk: Deklarasjonen har ingen slutt-tag og skiller ikke mellom store og små bokstaver.
<html> </html>
<html> ….. </html>-taggen plasseres etter DOCTYPE-taggen. Denne taggen definerer dokumentet som en nettside; alle andre elementer vil ligge inni den. HTML-taggen markerer start og slutt på et HTML-dokument.
En <html>-tag representeres som;
<html>Innhold</html>
<head></head>
Head-seksjonen i et HTML-dokument er representert med en <head>-tag. Denne taggen er plassert inni <html>-taggen og inneholder generell informasjon om nettsiden.
<head>-taggen inneholder andre tagger som gir spesifikk informasjon om nettsiden, som sidens tittel og forfatter. Innholdet i denne taggen vises ikke på selve nettsiden.
Dette er syntaksen for en <head>-tag:
<head> …….. </head>
<title></title>
<title>-taggen angir tittelen på nettsiden. Denne taggen plasseres inni <head>-taggen. <title>-taggen vises i tittellinjen eller fanen i nettleservinduet, men ikke på selve nettsiden.
Syntaksen for <title>-taggen er:
<title>HTML-tagger for nybegynnere</title>
Inni en <head>-tag vil den vises slik:
<head> <title>HTML-tagger for nybegynnere</title> </head>
<body> </body>
<body>-taggen viser alt synlig innhold på en nettside. Bilder, lenker, ren tekst, videoer og mer plasseres mellom <body> og </body>-taggene.
Noen av de andre taggene du kan finne inne i body-taggen inkluderer <p>-tag for avsnitt, <a>-tag for lenker, <strong>-tag for fet tekst og <ol>-tag for en nummerert liste, for å nevne noen.
Syntaksen for <body>-taggen er:
<body> Innhold </body>
<h1> til <h6>-tagger
Det kan være opptil 6 overskrift-tagger i et HTML-dokument. Hver tag er representert med et tall fra 1 til 6, som <h1>, <h2>, <h3>, <h4>, <h5> og <h6>.
<h1> er den største overskrift-taggen, mens <h6> er den minste.
I et HTML-dokument kan overskrift-tagger representeres slik:
<h1>Overskrift 1</h1> <h2>Overskrift 2</h2> <h3>Overskrift 3</h3> <h4>Overskrift 4</h4> <h5>Overskrift 5</h5> <h6>Overskrift 6</h6>
<h1> til <h6>-tagger plasseres inni <body>-taggen.
For eksempel vil en <h1>-tag bli inkludert som dette:
<body> <h1> Dette er overskrift 1 </h1> </body>
<p> </p>
<p>, eller avsnitt-taggen, brukes når du ønsker å strukturere innhold i avsnitt. Hvis du trykker på «enter»-knappen i en HTML-dokument i et koderedigeringsprogram, vil det ikke opprettes et nytt avsnitt.
Hvis du vil ha mer enn ett avsnitt, må du bruke flere <p>-tagger i dokumentet. Avsnitt-taggene skal plasseres inni <body>-taggen.
Syntaksen for en avsnitt-tag er:
<p> ….noe innhold her….</p>
Hvis du vil ha fire avsnitt, vil koden din struktureres slik:
<body> <p>Innhold for første avsnitt.</p> <p>Innhold for andre avsnitt.</p> <p>Innhold for fjerde avsnitt.</p> </body>
<b> </b>
<b> </b>, eller fet-taggen, vil formatere alt innhold mellom start- <b> og slutt- </b> som fet skrift.
Den fete taggen kan plasseres mellom en overskrift som <h1>, eller til og med inni en avsnitt-tag.
Her er noen eksempler på en fet-tag:
<b> Fet tag </b>
Uttrykket «Fet tag» vises i fet skrift.
<h1>Rolig, <b> Femte utgave </b>, vinnerutgaven </h1>
«Femte utgave» vil være fet.
<i> </i>
Kursiv-taggen, betegnet med <i>, kursiverer teksten inni taggene.
For eksempel, hvis vi har
<i> Dette er kursiv </i>
Ordene «Dette er kursiv» vises i kursiv.
<u> </u>
Understrekings-taggen, eller <u>, brukes når du ønsker å understreke en bestemt del av teksten i et HTML-dokument.
For eksempel, hvis vi har:
<u> understrek disse ordene </u>
Uttrykket mellom taggene vil være understreket.
<center> </center>
Center-taggen, <center>, brukes til å sentrere innhold i et HTML-dokument.
For eksempel, hvis vi har en h2-tag som lyder
Sentre innhold i HTML
, kan vi sentrere den slik:
<center> <h2> Sentre innhold i HTML </h2> </center>
<span></span>
Span-taggen, <span>, er en generisk innebygd beholder som ikke har noen standard stil. Du kan bruke span-taggen til å gruppere tekst du vil style.
Du kan plassere span-taggen inne i andre tagger som overskrifter og avsnitt:
<h2> Lær HTML <span> av eksperter </span> og vær klar for markedet </h2>
<p> Lær HTML <span> av eksperter </span> og vær klar for markedet </p>
<div></div>
En divisjon-tag, forkortet div, er en tag som lar deg gruppere ulike tagger i et HTML-dokument.
En div-tag kan gis en «klasse» for å legge til ekstern styling ved hjelp av CSS.
Slik vil en div som omgir en h1, h2 og en avsnitt-tag bli representert.
<div > <h1> Lær HTML </h1> <h2> HTML-tagger </h2> <p> HTML er et markeringsspråk……… </p> </div>
<em></em>
Uthevings-taggen, eller <em>-taggen, brukes for å understreke visse ord i et HTML-dokument.
Innhold mellom <em>-tagger vises skrått eller i kursiv.
Uthevet innhold i et avsnitt kan vises slik i et koderedigeringsprogram:
<p> Møtet starter kl. <em> 0800 </em>, vær presis </p>
<sup></sup>
<sup>, eller hevet skrift, lar den vedlagte teksten være over resten. Et godt eksempel er når du ønsker å kvadrere et tall X og vise det matematisk som X².
Syntaksen for <sup> i en avsnitt-tag vil være:
<H1> Harveys <sup>TM </sup> Company Limited </H1>
<sub></sub>
Senket skrift eller <sub>-taggen, er det motsatte av den hevede taggen. Innholdet i <sub>-taggen vil vises under den vanlige tekstlinjen. Et perfekt eksempel er når du skriver den kjemiske formelen for vann som H20.
Syntaksen for senket skrift-taggen vil være:
Husk at H <sub> 2 </sub> 0 er den kjemiske formelen for vann
<br>
<br> er en selvlukkende tag som står for linjeskift. Alt innhold etter <br /> vil starte på en ny linje.
Syntaksen for <br> i et avsnitt vil være:
<p> HTML er forkortelsen for Hypertext Markup Language <br> Det har vært en pågående debatt om det er et programmeringsspråk eller ikke <br> Vi kan likevel ikke underdrive betydningen <br> HTML brukes i over 95 % av dagens nettsider </p>
<ol></ol>
og <li></li>
Den nummererte liste-taggen, eller <ol>, må brukes sammen med en annen tag, som <li>.
De to kan vises i en kodeeditor som dette:
<ol> <li> Asia </li> <li> Afrika </li> <li> Europa </li> </ol>
Når det vises i nettleseren, vil innholdet vises nummerert.
Det kan være ønskelig å legge til et bilde for visuelt uttrykk eller en logo. Den selvlukkende bilde-taggen, <img decoding=»async» src=»»/>, kommer godt med i slike tilfeller.
Syntaksen for bilde-taggen vil være:
<img src="https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png"/>
Innholdet i anførselstegnene representerer kildenettadressen.
Oppsummering
Det finnes over 100 HTML-tagger, men de ovennevnte er de du bør kjenne til som nybegynner. HTML støttes av de fleste koderedigeringsprogrammer, og du kan være trygg på at du gjør det riktig når du begynner å lære.