Text
Struktur
Strukturerad text följer för det mesta samma mönster, den bestÄr av rubriker och paragrafer. Strukturerad text Àr mer lÀttlÀst och gör lÀsandet roligare.
Ett exempel Àr det hÀr materialet, förhoppningsvis gör sidans struktur det mer lÀttlÀst och enklare att förstÄ.
HTML innehÄller element för att mÀrka upp text utifrÄn detta mönster.
För att mÀrka upp en paragraf(engelska paragraph) sÄ anvÀnds <p>
elementet.
För att skapa en rubrik(engelska heading) finns det sex olika element att vÀlja mellan, <h1>
, <h2>
, <h3>
, <h4>
, <h5>
, <h6>
. Siffrorna i heading-elementet representerar olika rubrik-nivÄer dÀr <h1>
Ă€r huvudrubriken.
Genom att mÀrka upp text sÄ skapas en struktur pÄ sidan. Strukturen pÄ texten lÄter anvÀndaren skanna av texten snabbare och uppfatta det som vÀcker intresse och Àr relevant. Strukturen underlÀttar ocksÄ för sökmotorer som indexerar webbsidan, en bra strukturell hierarki ger bÀttre resultat. Strukturen Àr Àven avgörande för webbsidans tillgÀnglighet.
Ett exempel, Dracula
Böcker Àr ett utmÀrkt exempel pÄ strukturerad text. Se följande exempel, ett utdrag frÄn Bram Stokers Dracula.
Studera exemplet och notera mönstret med elementen och vad de representerar. Rubrikerna och paragraferna har en semantisk betydelse vilket Àr viktigt. Elementet <h1>
betyder att det Àr en huvudrubrik, elementets benÀmning bÀr en mening.
Ăvning, kapitel tvĂ„
AnvÀnd vscode för att skapa ett nytt HTML-dokument. Döp dokumentet till dracula.html och strukturera följande text.
Inline element för text
Text mÀrks inte enbart upp med block-element som ger dem struktur, utan det finns Àven ett antal inline-element för att formatera texten. NÄgra av elementen Àr semantiska, de ger mening till formateringen, medans andra Àr rent visuella.
För att visa att nÄgot ord Àr extra viktigt sÄ kan vi betona det.
I exemplet ovan sÄ anvÀnds taggen strong inuti ett p-element, det Àr nÀstlat. Strong-elementet Àr ett inline-element sÄ det blir ingen radbrytning kring det vilket Àr viktigt.
För att rent visuellt mÀrka upp text, med fetstil och kursiv stil sÄ anvÀnds element utan semantisk mening.
Listor
Listor finns överallt i text, att göra listor, handlarlistor och sÄ vidare, du anvÀnder dem sÀkert. Listor kan antingen vara oordnade eller ordnade. En handlarlista kanske inte behöver en speciell ordning, men skriver du en instruktion sÄ kan det vara avgörande att det sker i rÀtt ordning.
Listor pÄ webben anvÀnds ofta till annat Àn det som visuellt kanske kan ses som en lista. De anvÀnds ofta för att skapa struktur i till exempel menyer.
Oordnade listor
Listor dÀr ordningen inte spelar nÄgot roll.
En lista startar med med elementet för listans typ, unordered list har elementet <ul>
. Varje element i listan blir sedan ett <li>
element.
Ordnade listor
Ordnade listor Àr listor dÀr ordningen Àr viktig och det visas ocksÄ av att det som standard blir en numrerad lista. Elementet för ordered list Àr <ol>
. Varje enskilt element i listan mÀrks sedan upp med <li>
.
Notera indragen(indenteringen, engelska indentation) i listan, det Àr viktigt att du arbetar sÄ för att koden ska bli tydlig och lÀsbar.
Datum
För att mÀrka upp datum finns elementet <time>
. Detta Àr vÀldigt praktiskt för att det finns vÀldigt mÄngas olika format att skriva ett datum. Format som kanske en mÀnniska begriper, men inte en dator.
Ăvning
FortsÀtt arbeta med dracula.html.
Kopiera nÄgra paragrafer(inte hela) ur tvÄ-tre kapitel frÄn Dracula och mÀrk upp texten med HTML element.
AnvÀnd alla verktygen du lÀrt dig; rubriker, paragrafer, tid.
Skapa en innehÄllsförteckning med en lista.
Last updated
Was this helpful?