Grundstruktur
Eine typische Grundstruktur einer HTML-Seite könnte in etwa so aussehen:
<!DOCTYPE html>
<html lang="de">
Die erste Zeile lässt den Browser wissen, dass alles folgende als HTML interpetiert werden muss. Mit der zweiten Zeile wird die vorherrschende
Sprache der Website hinterlegt (de heisst Deutsch, siehe hier für die Sprachkürzel). Das ist nicht zwingend, kann aber für die automatische Übersetzung von Texten im Browser helfen.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>...</title>
<meta name="description" content="...">
<meta property="og:image" content="..."/>
</head>
Im head-Element werden weitere Informationen für die User unsichtbar hinterlegt. Die ersten zwei Zeilen können ohne Umschweife
genau so übernommen werden. In der title-Zeile lässt sich die Webseite benennen, dieser Name wird auch im Browser angezeigt. meta-Attribute
gibt es viele, sie füttern Suchmaschinen und andere maschinelle Verarbeitung mit Informationen zur Seite – zum Beispiel eine eigene Beschreibung
oder ein Symbolbild – was wichtig sein kann für die SEO.
<link href="..." rel="stylesheet" />
<link href="..."rel="icon">
<script src="..."></script>
Auch im head-Element können CSS-Stylesheets, ein Favicon und JS-Scripts hinterlegt werden.
Im body-Element befinden sich alle Elemente, die im Browser angezeigt werden sollen. Als allgemeines Strukturierungs-Element dienen div-Elemente,
die mit class- und id-Zuweisungen aus einem CSS-Stylesheet angesteuert werden können.
Weitere wichtige vordefinierte Element-Tags sind <p></p> für einen Textabsatz, <i></i> formatiert Text darin kursiv, <b></b> bold und <a> steht für Links.
Dazu kann mit href der Zielort und mit target die Art der Weiterleitung bestimmt werden. Zum Beispiel: <a href="https://ksschuepfheim.lu.ch" target="_blank">
Hier geht's zur Webseite der Kantonsschule Schüpfheim.</a>. Für Bilder steht <img></img>, hier werden Infos mit src und gegebenenfalls alt
hinzugefügt. Source verweist per Link auf den Standort der Bilddatei, während ein Alt-Text für Suchmaschinen und Accessibility-Tools wichtig sein kann (SEO).
Favicon
Das Favicon wird in den meisten Browsern als kleines Erkennungszeichen entweder im Browserfenster selbst, oder beispielsweise
in den Lesezeichen angezeigt. Auch dieses Detail trägt zur Identität der Seite bei und kann im head-Element als .jpg, .png, .svg, oder als eigene
Icon-Datei – .ico – hinterlegt werden.
Responsive Design
Um eine angenehme Darstellung sowohl auf Bildschirmen von Laptops und PCs, wie auch auf Smartphones zu gewährleisten, kann mit sogenannten @media-queries
Parameter des Endgeräts abgefragt werden. Beispielsweise die Pixeldimensionen des Bildschirms, oder ob er im Hoch- oder Querformat ausgerichtet ist. Eine
Möglichkeit um css-Variablen für Smarthpones zu definieren ist zum Beispiel: @media only screen and (orientation:portrait) {...} oder
@media only screen and (orientation:portrait) and (hover:none) {...}.
Vgl. auch hier.
SEO
Kurz für Search Engine Optimisation ist SEO dann wichtig, wenn eine Seite auf Suchmaschinen erscheinen soll. Sehr viele
Faktoren spielen hier hinein, auch da alle Suchalgorithmen nach eigenen Gewichtungen und Logiken vorgehen. Sinnvolle meta-Elemente im head,
alt-Beschreibungen auf Bildern und sogar sinnvolle Dateinamen können schon einen sehr grossen Unterschied machen. Externe Anbieter mit Baukasten-Prinzip
haben oft eigene Bereiche, um diese Optimierung im jeweiligen System vorzunehmen.