Hvordan er HTML grundlæggende bygget op?

Her er et simpelt eksempel på HTML. For rigtigt at forstå HTML og hvordan en hjemmeside i bund og grund fungere, så er det en fordel at kende til elementerne i HTML også kald HTML-tags. Det har også stor betydning når du skal lære om SEO og hvordan det virker.

<html>

<body>

<h1>Primær og unik overskrift<h1⁄>

<h2>Opdelings overskrift/overskrifter Her er et simpelt eksempel på HTML<h2⁄>

<p>

Dette er brødtekst lorem ipsum dolor

<p⁄>

<a href=”https://enghuus.com” >Besøg Enghuus.Com<a⁄>

<img src=”solnedgang-ved-hvidesande.jpg” alt=”Solnedgang ved Hvidesande” ⁄>

<body⁄>

<html⁄>

Overskriften Hvad er HTML er h1 overskrift. Den er unik og det vil sige at den skal være på hver side eller hvert indlæg, men der må kun og skal kun være en h1 overskrift, h1-tag for hvert indlæg eller side. H1-tag har stor SEO værdi.

Så er der H2-tag eller h2-overskriften som ikke er unik. Du kan altså have alle de h2-tags som du ønsker. En h2-overskrift, h2-tag har også stor SEO værdi, dog knap så stor som h1. H-tags er også det som kaldes heading. Der er også et h3 tag som endnu en gang minder om h2 bare med mindre SEO-værdi.

Faktisk er der helt ned til h6. Men rent SEO-mæssigt er det h1, h2 og h3 som er interessante.

Skab en relevant og visuelt overblik med overskrifter

H-tags som h2 og h3 er rigtig god at anvende, jo længere teksten er jo flere vil jeg anbefale at du anvender. De er nemlig rigtig god til at skabe et forståelsesmæssigt overblik og er gode til at give afsnit en relevant overskrift. De enkelte afsnit er defineret med p-tag, paragraf eller bare brødtekst.

Denne brødteks skal som sagt opdels i mindre afsnit for at gøre teksten mere læsbar og som et supplement til at øge læsbarhed anvender du relevante under-overskrifter, h-tags til disse afsnit. Brødteksten har ligeledes en SEO værdi.

Ud over SEO og læsbarhed ved opdeling så medfører det også en anden vigtig faktor og det er struktur. Afsnit og overskrifter giver en båder en visuel og forståelsesmæssig struktur, og såvel også en struktur i et SEO-perspektiv.

Så har jeg også vist et a-tag eller et link og et billede-tag.

Lad os dykke endnu dybere ned i HTML

Jeg mangler faktisk lige en vigtig detalje. Hvad står HTML for? Jo, det står for Hyper Text Markup Language. Det er altså et opmarkeringssprog som definer at her er der noget tekst, links og nogle billeder.

Jeg har nu vist dig det absolut basale i body-tag, det man ser på en hjemmeside. Der er et afsnit som er lige så vigtigt som det synlige lag, måske endda endnu mere vigtigt. Der er faktisk en HEAD del til et HTML dokument.

Det ser sådan her ud

<html>

<head>

<title>Et Webbureau i bevægelse – Enghuus.Com<title⁄>

<meta name=”descriptioncontent=”Webbureau i Odense Enghuus.Com tilbydes der alt lige fra simple hjemmesider til komplekse webshops, SEO og struktureret data med Schema Markup” />

<head⁄>

<body>

<body⁄>

<html⁄>

I head-tag er der mange interessante elementer, 2 af dem er title-tag og meta-description. De er begge meget vigtige, når du arbejder med SEO. Det skal dog påpeges, at meta-description ikke direkte har så meget med SEO at gøre. En meta-description som man ser når man har Googlet din side, har du ikke udfyldt en meta-description for dine sider, så vil google selv genere ud fra teksten, og det er måske ikke lige det som du ønsker. En meta-description er din måde til at få kunden til at klikke ind på din side.

Derimod så er title-tag det vigtigste SEO tag som du har. Det er noget af det første som Google kigger efter og kategoriser din side ud fra. Det første ord i din title bliver gradueret højest, det næste ord gradueres lige under og så videre.

SERP – Search Engine Result Page

serp stor for search engine result pageHerover er et eksempel på et SERP, Search Engine Result Page fra Google, hvor jeg har søgt på “Enghuus.Com” Her kan du se title-tag Webbureau i Odense som tager kunder .. Og lige under ser du min definerede meta-description.

Andre elemnter i HEAD er style elementer, links til style såkaldt css der kan også forkomme links til andre scripts eksempelvis javascript. Javascript kan dog også forkomme i bunden af et HTML dokument.

Generering af HTML sker på en server

Når du kommer ind på en hjemmeside, så er der meget mere en HTML, CSS, javascript, links og billeder. På WordPress side er HTML generet af noget PHP. PHP skal lægge på en server for at kunne generer en HTML side.

Der er også sider som ikke er bygget op i PHP eksempelvis en Umbraco side, som er bygget op i et helt andet programmeringssprog end PHP. Umbraco er nemlig bygget op i .Net kaldt dot net. Det genere ligeledes en HTML side.

Semantisk Markup

HTML findes desuden i forskellige udgaver eksempelvis HTML4, XHTML og nuværende HTML5. I HTML5 taler man om at div elementer har fået en semantisk værdi. I stedet for kun at anvende et div-tag, så har man blandt andet et header-tag, footer-tag, Artikel-tag, Aside og Nav altså semantisk markup. Du kan desunde læse mere om Semantisk Markup og Schema Markup og bliv klogere på dette spændende emne.

Hvad er HTML?

HTML er den basale kodesprog på din hjemmeside, som definere alle elementerne i dit indhold. Det definere menu, links, billeder, overskrifter og tekst. Det er også via HTML at CSS og JavaScript implementeres. Der er altså også tags for CSS og JavaScript.

Hvordan fungerer HTML?

HTML læses af en browser. Der findes forskellige browsere som du kan downloade. Browseren er altså dit primære værktøj fo at se en hvilken som helst hjemmeside på internettet. Typiske browser er Google Chrome, Firefox, Safari og Edge.

Det er altså i din browser at præsentationen af indholdet vises.

Hvornår blev HTML opfundet?

HTML blev opfundet i 1989 af Tim Berners-Lee, en britisk computerforsker, mens han arbejdede på CERN, det europæiske center for partikelfysikforskning i Schweiz.

Hvem opfandt HTML?

Britisk Computerforsker Tim Berners-Lee opfandt HTML

Hvad står HTML for?

HTML står for HyperText Markup Language og er det primære sprog, der bruges til at oprette websider. Berners-Lee ønskede at skabe et system, der ville tillade forskere at dele information og dokumenter på tværs af computere og netværk. Han udviklede HTML som en del af dette system, som senere blev kendt som World Wide Web. HTML har gennemgået mange opdateringer og versioner siden sin opfindelse, og det er stadig et vigtigt værktøj til at oprette og designe websider i dag.

Hvad er formålet med HTML?

HTML er de fundamentale byggesten på enhver hjemmeside. Det er her den grundlæggende struktur for ethvert website er sat op.

Hvad er forskellen på HTML og CSS?

HTML er de indholdsmæssige byggesten på enhver hjemmeside. Men for at det ser pænt ud kræves der noget grafisk opsætning. Det er her CSS kommer ind. Hvor HTML definere de forskellige elementer har CSS den primære rolle for style. Det vil sige farver, størelser placeringer og sågar typografi.

Hvordan kan du validere HTML-kode?

Du kan validere dit HTML på The W3C Markup Validation Service. Der er 3 metooder. Enten via et link, via filupload eller ved copy paste af koden.

Hvad er de nyeste versioner af HTML?

Den nyeste version er HTML5 som blev implementeret i 2014. Det er med HTML5 at semantisk markup blev introduceret.

Kan HTML anvendes på dynamiske websider?

Ja, det kan det godt. HTML er forudsætningen for enhver hjemmeside. HTML er dog statisk, men kan manipuleres med JavaScript i browserniveau og PHP eller .net på serverviveau.

 

OPSUMERING

Det er alt som jeg ville fortælle omkring HTML og grundlæggende HTML-struktur. Nu ved du, mere omkring den grundlæggende opbygning af en hjemmeside og hvordan det blandt andet hænger sammen med SEO – Søgemaskineoptimering. 

Mit navn er Claus Enghuus og er forfatter til dette indlæg.

Du finder desuden min personlige profil på Linked

Har du spørgsmål så send mig endelig en besked.

Hilsen

Claus Enghuus

enghuus@enghuus.com