© Copyright kaxigt.com. All Rights Reserved.

Vad är HTML? Del 1 – märkspråk och element

Postad: 17 april 2022 | HTML-guider | No Comments

Lästid: 8 minuter

Det här är del 1 i en omarbetad artikelserie. Här får du introduktion om HTML som märkspråk och dess byggstenar – elementen.

Guiderna till höger bygger på denna artikelserie. De är utformade för en stegvis inlärningskurva. För att få bästa lärandeprocess rekommenderar jag Dig därför att läsa dem efter att denna artikelserie är avslutad.

HTML står för Hypertext Markup Language och är ett märkspråk som de flesta webbsidor och applikationer är byggda med. Det är stommen, strukturen eller skelettet, kan man säga. Till presentationen/utseendet av sidan använder vi CSS. Hypertext är den text som definierar länken mellan andra textstycken och webbsidor medan ett märkspråk är en serie märken som talar om för webbservrarna vilka stilar och strukturer dokumentet är uppbyggt av.

Ett märkspråk används för att definiera textdokumentet inom taggen som i sin tur definierar strukturen på webbsidorna.

Detta språk används för att kommentera text (göra anteckningar för datorn) så att den kan förstå texten. Språket använder taggar för att definiera vilken manipulation som måste göras på texten. De flesta märkspråk (exv. HTML) är läsbara för människor. Till exempel kan innehåll struktureras inom en uppsättning stycken, lista med punkter eller med hjälp av bilder och datatabeller.

Som titeln antyder kommer denna artikel att ge dig en grundläggande förståelse för HTML och dess funktioner.

Bra att lägga på minnet! Ett ord som ofta förekommer bland dem som bygger webbplatser är just ”markup” och då menas i allmänhet det märkspråk som den aktuella webbsidan eller en annan specifik webbsida är uppbyggd med.

Kännetecknande för HTML:

Lätt att förstå: Det är det enklaste språket, väldigt lätt att förstå, att lära sig och att utveckla.
1. HTML kan enkelt integreras med andra språk.
2. Det är grundläggande för alla programmeringsspråk.
Flexibelt: Det här språket är så flexibelt att du kan skapa vad du vill. Det har ett följsamt sätt att designa webbsidor tillsammans med text.
Länkbart: Du kan göra länkbar text från en sida till en annan eller webbplats.
Obegränsade funktioner: Du kan lägga till videor, gifs, bilder eller ljud eller vad du vill för att göra webbplatsen mer attraktiv.
Support: Du kan använda detta språk till att visas på vilken plattform som helst. HTML stöds av alla webbläsare.

Grundläggande HTML

HTML består av flera element man använder för att omsluta (enclose) eller linda in (wrap) olika delar av innehållet för att få det att se ut på ett visst sätt eller agera på ett visst sätt. De omslutande taggarna meta-taggar <> kan skapa en mening paragraph <p> bild <img> eller en hyperlänk <a> som leder någon annanstans. Man kan kursivera ord <em> göra teckensnittet större <large> eller mindre <small> och så vidare.

Den genomsnittliga webbplatsen innehåller flera olika HTML-sidor. En startsida (index.html), en om-sida (about.html) och en kontaktsida (contact.html) kan alla ha separata HTML-filer. En webbläsare läser HTML-filen och återger dess innehåll så att internetanvändare kan se den.

HTML-dokument är filer som slutar med tillägget .html eller .htm.

Anatomin av ett html-dokument

<!DOCTYPE html>	Visar vilket doctype som används
<HTML>	HTML rot-element
<head>	Innehåller en sidas metadata
<title>Min sida<title>	Sidans title-element
</head>
<body>	Den del som utgör den visuella delen av sidan
<h1>en rubrik</h1>	Rubrik med metataggar
<p>Lite text</p>	en paragraph (stycke) med metataggar
</body>
</html>

Visste du att det går att göra ”osynliga” kommentarer i HTML-dokumentet?


<!DOCTYPE html>
<html>

<!-- Innehåll i sektionen head -->
  <head>
    <meta charset="utf-8"/>

 <!-- Site title (Sidans titel) -->
    <title>Min blomsida</title>
  </head>

<!-- Innehåll i sektionen body -->
  <body>

 <!-- Innehåll i Heading (rubrik) -->
<h1>En rubrik</h1>

 <!-- meta-taggar för att visa innehåll i paragraph (stycke)  -->
    <p>Lite text</p>

 <!-- meta-taggar för att ange innehållet för image <bild) -->
    <img src="images/solrosor.jpg" alt="solrosor"/>

  </body>
</html>

Var för sig innebär de följande:

<!DOCTYPE html> — Ett doctype är obligatoriskt så att webbläsarna kan tolka sidan korrekt efter de regler det gällande doctype representerar. Det här doctype refererar till HTML5.

<html></html> — elementet <html>. Detta element omsluter allt innehåll på hela sidan och kallas för rotelementet.</html>

<head></head> — elementet <head>. Det här elementet fungerar som en container för allt du vill inkludera på HTML-sidan och som inte visas för sidans besökare. Det kan röra sig om nyckelord och en sidbeskrivning som du vill ska visas i sökresultat eller CSS för att utforma innehållet, teckenuppsättningsdeklarationer med mera.</head>

<meta charset="utf-8"/> — Detta element ställer in teckenuppsättningen om ditt dokument ska använda UTF-8 som innehåller de flesta tecken från de allra flesta skrivna språk. I huvudsak kan den nu hantera allt textinnehåll.

<title></title> — Med elementet <title> ställer du in titeln på din sida, vilket är titeln som visas på webbläsarfliken sidan laddas i. Den används också för att beskriva sidan om någon bokmärker/favoriserar den.</title>

<body></body> — elementet <body>. Det är här allt innehåll finns som du vill visa för dina besökare, oavsett om det är text, bilder, videor, spel, spelbara ljudspår eller vad som helst.</body>

Ett semantiskt html5-dokument

Om semantik och ett semantiskt html-dokument bygger vi på med i del 3, men det underlättar om du redan här får bekanta dig med vad dessa element heter samt hur de placeras (syntaxen).

HTML5 semantic elements

Anatomin av ett html-element

Alla HTML-sidor har flera HTML-element som består av en uppsättning taggar och attribut. HTML-element är byggstenarna i en webbsida. En tagg talar om för webbläsaren var ett element börjar och slutar medan ett attribut beskriver egenskaperna hos ett element.

Huvuddelarna av ett HTML-element är följande:

Html element

Öppningstaggen – Direkt efter denna kommer namnet på elementet (i detta fall p) och ligger mellan öppnings- och stängningstaggarna. Detta anger var elementet börjar eller börjar träda i kraft. I vårt fall var stycket börjar.
Den avslutande taggen – Den är samma som den inledande taggen förutom att den innehåller ett snedstreck före elementnamnet. Just detta anger var elementet slutar. Glömmer man att lägga till en avslutande tagg, som är ett av de mest vanliga nybörjarfelen, leder det ofta till felaktiga resultat.
Innehållet (content) – Innehållet i elementet <p> är i vårt fall texten ”det här är en vanlig htmltext”. Den synliga delen i ett elementet.
Elementet – Det är både den inledande taggen, den avslutande taggen, och som tillsammans utgör själva elementet.

Tomma element

Ett element som inte har omslutande metataggar kallas ett tomt element. Det här är exemplet har omslutande taggar <p>text</p>.

Att lägga till stängningstaggar till tomma element skapar en ogiltig syntax. Ett tomt element både börjar och slutar i sig själv. De har nämligen självstängande taggar.

Det här är helt felaktigt <br></br> medan detta är rätt <br/> och den enda koden som behövs (HTML4.0/HTML5). Observera att slashen läggs innan den sista avslutande metataggen.

I HTML4.0 behövs ingen avslutande slash i tomma element.
I XHTML måste de tomma elementen avslutas med ett blanksteg före den avslutande slashen.
I HTML5 kan man använda alla varianterna.

De tomma elementen har inga underordnade noder. Det är element med ett värde i sig själv. De behöver inte ha någon extra avslutande stängningstagg.

De tomma elementen används för att bädda in bilder, listor, brytningar, horisontella linjer, för inmatning, metadata etc. Till exempel hade <p>-taggen en stängningstagg, så det var inte ett tomt element. Kika på exemplen här nedan.

<hr> (html)
<hr/> (html)
<hr /> (xhtml)
En tematisk brytning mellan komponenter på styckenivå representeras av elementet <hr>. Till exempel en förändring av ämnet inom ett avsnitt. <hr> visas i allmänhet som en horisontell linje.

<br> (html)
<br/> (html)
<br /> (xhtml)
Elementet <br> används för en radbrytning i en text (kan även kallas carriage-return). Det är användbart när man ska skriva en adress, berättelse, bloggar osv där en lång mening måste bryta för bättre läsbarhet.

<img src="bilden.jpg" alt="information vad bilden föreställer"> (html)
<img src="bilden.jpg" alt="information vad bilden föreställer"/> (html)
<img src="bilden.jpg" alt="information vad bilden föreställer" /> (xhtml)

<area> Den används för att kartlägga en del av en bild för att göra den klickbar av slutanvändaren. Den används för att dirigera användaren till olika länkar efter att användaren klickar på de mappade delarna av bilden. Den används som en underordnad tagg till <map>-taggen.

<base> För alla relativa URL:er i ett dokument är base-URL:n specificerad att använda med <base>-elementet. Endast ett <base>-element kan användas i ett dokument.

<col> Taggen <col> i HTML används för att ställa in kolumnegenskaperna och stilegenskapen för varje kolumn i en <colgroup>-tagg. Den här taggen innehåller inga avslutande taggar.

< embed> Taggen < embed> i HTML används för att bädda in externa applikationer som vanligtvis ljud eller video i ett HTML-dokument. Den används som en container för att bädda in plugin-program.

<input> Detta tomma element används för att skapa interaktiva kontroller för webbaserade applikationer och formulär, exempelvis för att acceptera information från användaren såsom en adress, namn, telefonnummer, etc, beroende på vilka typer av indata och kontrollwidgets som är tillgängliga. Alla indatatyper och attribut används i <input>-elementet.

<link> HTML-elementet <link> används för att upprätta en koppling (länk) mellan det aktuella innehållet och en extern resurs. Till exempel kan vi använda den för att länka den externa stilmallen eller javascript-filen, etc.

<meta> HTML-elementet <meta> representerar metadata, dvs information om en information.

<param> Taggen <param> i HTML används för att definiera en parameter för plugin-program som är associerad med elementet <object>. Den innehåller inte sluttaggen.

<source> Elementet <source> är ett tomt element som tillhandahåller olika mediaresurser för elementen <image>, <audio> eller <video>. Den tillhandahåller samma mediematerial i flera filformat för att säkerställa kompatibilitet med en mängd olika webbläsare eftersom bild- och mediefilformat stöds av webbläsarna på olika sätt.

<track> Taggen <track> anger textspår för mediakomponenter ljud och video. Den här delen används för att specificera undertexter, bildtextfiler eller olika filer som innehåller text som borde vara synliga när media spelas upp. <track>-elementet är ett tomt HTML-element som används som en underordnad ljud och videomediekomponent. Den låter dig definiera tidsinställda textspår (eller tidsbaserad data), till exempel för att hantera undertexter automatiskt. WebVTT-format (.vtt-filer) — Web Video Text Tracks — används för spåren.

<wbr> Taggen <wbr> (word break) i HTML används till ordbrytning och används för att definiera textens position, vilken i sin tur behandlas som en radbrytning av webbläsaren. Den används mest när ordet är för långt och webbläsaren riskerar att bryta raden på fel plats för att få texten att passa in.

Block-element och Inline-element

Varje HTML-element har ett grundvärde som visas beroende på vilken typ av element det rör sig om. Det finns två typer. Block-element och inline-element. Majoriteten av HTML-elementen är element på blocknivå. Vi ska nu titta lite närmare på skillnaden mellan dessa. Du kommer att arbeta med båda varianterna i HTML.

Inline vs Block

Den distinkta skillnaden mellan en blocknivå kontra ett inline-element användes främst i HTML-specifikationerna upp till 4.01. I HTML5 ersätts denna med en mer komplex uppsättning av innehållskategorier. Medan kategorin ”inline” ungefär motsvarar kategorin innehåll så uttrycks motsvarar kategorin ”Block-nivå” inte direkt till någon HTML5-innehållskategori.

När block-nivå och inline-element kombineras tillsammans motsvarar det flödets direkta innehåll för HTML5. Fast det finns också ytterligare kategorier, t.ex. interaktivt innehåll.

Element på blocknivå

Blockelement börjar alltid på en ny rad i dokumentet medan ett inline-element kan börja varhelst på en rad.

Ett element på blocknivå tar upp hela bredden på en sida. Exempelvis så kommer ett rubrikelement att finnas på en separat rad från ett stycke-element. Dessutom lägger webbläsarna automatisk till margin (luft) mellan raderna på ett block-element. Grundläget (default) är alltid vänsterställt. Här under är några exempel på ofta använda block-element du kommer att stöta på.

Rubriktaggar – dessa sträcker sig från <h1> till <h6> där rubrik h1 är störst i storlek och blir mindre när de flyttas upp till h6.
Stycketaggar – alla omges av taggen <p>.
Listtaggar – har olika varianter. Använd taggen <ol> för en ordnad lista och använd <ul> för en oordnad lista. Bifoga sedan enskilda listobjekt med taggen <li>.
Blockquote – element för långa citat.
Div – document devision, en container för flödeskontroll.
Nav – navigationssektion.

Generellt kan blocknivåelement innehålla inline-element och (ibland) andra blocknivåelement. Tanken med denna strukturella skillnad är att blockelement skapar ”större” strukturer än inline-element. Nedanstående är en komplett lista över alla HTML blocknivå-element (även om ”blocknivå” inte är tekniskt definierad för element som är nya i HTML5).

Alla blockelement

<address>: Kontaktinformation
<article>: Innehåll i artikel
<aside>: Innehåll i aside.
<blockquote>: Längre blockcitat.
<details>: Visar innehåll widget
<dialog>: Avsnitt för dialog Dialog
<dd>: Beskriver en term i en definierbar lista
<div>: Document division – div block
<dl>: Definitionslista – liknas vid en container
<dt>: Beskrivning av en listterm – title
<fieldset>: Märkning av ett avgränsat fält
<figcaption>: Bildtext
<figure>: Grupperar mediainnehåll med en bildtext
<footer>: Section eller page footer
<form>: Inmatningsformulär
<h1> <h2> <h3> <h4> <h5> <h6>: Rubriknivåer h1-h6
<header>: Section eller page header
<hgroup>: Grupperar rubrikinformation – Borttaget element och används inte längre
<hr>: Horisontell linje
<li>: List item
<main>: Innehåller det centrala innehållet som är unikt för detta dokument
<nav>: Navigeringsblock
<ol>: Ordnad lista
<p>: Paragraph – Stycke
<pre>: Förformaterad text
<section>: Sektion i en webbsida
<table>: Tabell
<ul>: Oordnad lista

[https://developer.mozilla.org/]

Inline element

Till skillnad från blocknivåelement startar inte inline-element på en ny linje. De börjar inom en linje och tar bara upp så mycket bredd som det är nödvändigt. Inline-element ingår som en del av huvudtexten.

Inline-element ligger på samma baslinje som block-elementet.

Inline-element innehåller vanligtvis andra inline-element, eller så kan de vara tomma. Ett inline-element formaterar det inre innehållet i element på blocknivå som att lägga till länkar och betonade strängar. De används oftast för att formatera text utan att bryta flödet av innehållet.

Till exempel skulle en <strong>-tagg göra ett element i fet stil medan <em>-taggen skulle visa det i kursiv stil. Hyperlänkar är också inline-element som använder en <a>-tagg och ett href-attribut för att indikera länkens destination.

display inline

Du kan ändra den visuella presentationen av ett element med egenskapen CSS-display från ”inline” till ”block” och få webbläsaren att rendera ett inline-element till en block box snarare än en inline-box, och vice versa. Att göra detta kommer dock inte att ändra kategorin och innehållsmodellen för elementet. Även om vi ändrar visningsegenskapen av exempelvis ett spanelement till att bli ett block så skulle det fortfarande inte tillåta att nästla in div-element.

I allmänhet kan inline-element endast innehålla data och andra inline-element. Du kan inte lägga blockelement i inline-element men du kan lägga in inline-element i ett block.

Alla inline-element

<a>	<abbr>	<acronym>	<audio> (om synliga kontroller finns)
<b>	<bdi>	<bdo>	<big>
<br>	<button>	<canvas>	<cite>
<code>	<data>	<datalist>	<del>
<dfn>	<em>	<embed>	<i>
<iframe>	<img>	<input>	<ins>
<kbd>	<label>	<map>	<mark>
<meter>	<noscript>	<object>	<output>
<picture>	<progress>	<q>	<ruby>
<s>	<samp>	<script>	<select>
<slot>	<small>	<span>	<strong>
<sub>	<sup>	<svg>	<template>
<textarea>	<time>	<u>	<tt>
<var>	<video>	<wbr>

[https://developer.mozilla.org]

Här avslutas första delen av Vad är HTML? 1 Det är mycket information för den som är nybörjare, men det är viktig information Du behöver känna till om du ska börja bygga webbsidor. När du har landat och känner dig redo så är du välkommen till Vad är HTML? Del 2.

Lycka till!

kaxigt.com

Jag skriver om webben för webben