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 man 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=”billede.jpg” alt=”billede” ⁄>
<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=”description” content=”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
Herover 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.
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.
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.
Har du spørgsmål høre jeg gerne fra dig.
Hilsen
Claus Enghuus
