HTML – Von Ent­ste­hung bis hin zum Nut­zen

Die Funk­ti­on da­hin­ter ba­siert dar­auf, dass Bil­der, Tex­te, Vi­de­os oder sons­ti­ge Da­tei­en elek­tro­nisch in der Aus­zeich­nungs­spra­che dar­ge­stellt wer­den und so uni­ver­sal und un­ab­hän­gig von Web­brow­ser, An­bie­ter, etc. ver­stan­den wer­den kann.

Ge­schich­te des HTML

Für das In­ter­net wur­de ab dem Jahr 1990 nach ei­nem Weg ge­sucht, ein­heit­li­che Re­geln zu kon­zi­pie­ren, be­son­ders hin­sicht­lich ver­öf­fent­lich­ter In­for­ma­tio­nen. Die­se soll­ten so auf­be­rei­tet wer­den, dass sie für jeg­li­che Soft­ware zur Ver­fü­gung ste­hen und ge­le­sen wer­den kön­nen – das war die Hy­per­text Mark­up Lan­guage, be­kannt als HTML.

Schon be­vor das In­ter­net öf­fent­lich wur­de, hat der Bri­te Tim Ber­ners-Lee das Grund­ge­rüst des HTML kon­zi­piert. Da­bei kon­zen­trier­te er sich zu­nächst auf wis­sen­schaft­li­che In­for­ma­tio­nen, die über das In­ter­net aus­ge­tauscht wer­den soll­ten. Den­noch war dies der Be­ginn von HTML, das seit­her ste­tig er­neu­ert und op­ti­miert wur­de. Heu­te wird HTML ver­si­ons­los als „HTML Li­ving Stan­dard“ der WHATWG fort­lau­fend wei­ter­ent­wi­ckelt.

Ein HTML-Ele­ment be­steht in der Re­gel aus ei­nem öff­nen­den Tag (z. B. <a>), dem In­halt und ei­nem schlie­ßen­den Tag (</a>). Ein „Tag“ ist also nur die Aus­zeich­nung in spit­zen Klam­mern, wäh­rend das „Ele­ment“ öff­nen­des Tag, In­halt und schlie­ßen­des Tag zu­sam­men um­fasst. At­tri­bu­te ste­hen im öff­nen­den Tag und er­gän­zen das Ele­ment, z. B. href bei Links so­wie src und alt bei Bil­dern.

Was macht man mit HTML?

HTML ist vor al­lem da­für da, dass In­for­ma­tio­nen uni­ver­sal wei­ter­ge­ge­ben wer­den kön­nen, nicht ab­hän­gig vom An­bie­ter, Pro­gramm, Web­brow­sers oder Pro­vi­der, son­dern viel­mehr von al­len Ge­rä­ten glei­cher­ma­ßen les­bar. Mit die­sem Hy­per­text las­sen sich bei­spiels­wei­se Web­sei­ten for­men, die durch spe­zi­el­le Codes Ka­pi­tel, Über­schrif­ten, Far­ben, Hin­ter­grün­de, Gra­fi­ken und vie­les mehr dar­stel­len kön­nen.

Der Fo­kus liegt dar­auf, eine ein­heit­li­che Struk­tur zu ent­wi­ckeln, die dann welt­weit ge­nutzt wird. Da­bei spielt auch CSS eine wich­ti­ge Rol­le, dies steht für Cas­ca­ding Style Sheets, was da­bei hilft die In­hal­te zu for­ma­tie­ren. Der Haupt­zweck von CSS ist die Dar­stel­lung, ba­sie­rend auf dem Be­reich und dem In­halt. HTML und CSS in Kom­bi­na­ti­on kön­nen dem­nach eine Struk­tu­rie­rung und Dar­stel­lung von In­hal­ten, bei­spiels­wei­se an­hand von In­ter­net­sei­ten aus­wei­sen.

Mit HTML5 ka­men se­man­ti­sche Struk­tur-Ele­men­te, die den Auf­bau ei­ner Sei­te in­halt­lich be­schrei­ben – etwa <hea­der>, <nav>, <main>, <ar­tic­le>, <sec­tion> und <foo­ter>. Sie ver­bes­sern Ma­schi­nen­les­bar­keit, Bar­rie­re­frei­heit (Screen­rea­der) und SEO. Rei­ne Ge­stal­tungs­ele­men­te wie <cen­ter> oder <font> gel­ten da­ge­gen als ver­al­tet (de­pre­ca­ted) und soll­ten durch CSS er­setzt wer­den – Aus­se­hen ge­hört ins Style­sheet, nicht ins HTML.

HTML und SEO?

Auch für die Such­ma­schi­nen­op­ti­mie­rung (SEO) ist HTML wich­tig. Es gibt meh­re­re Fak­to­ren, mit de­nen sich die Sicht­bar­keit über Such­ma­schi­nen durch HTML ver­bes­sern lässt.

Der Title-Tag ist ein gu­tes Bei­spiel, denn da­mit wird der Ti­tel des Ar­ti­kels be­stimmt. Durch eine Key­word-Re­cher­che wer­den zu­erst die wich­tigs­ten Key­words ge­sucht; das Haupt­key­word soll­te zu An­fang des Titles ste­hen. So kann Goog­le di­rekt fest­stel­len, wor­um es geht. Eine schlech­te Kenn­zeich­nung oder ein Key­word, das nicht im Title vor­kommt, kann dazu füh­ren, dass der Ar­ti­kel im Ran­king nicht be­ach­tet wird.

Ein wei­te­rer wich­ti­ger Aspekt ist die Meta De­scrip­ti­on. Sie ist kein au­to­ma­ti­scher Aus­zug der ers­ten Zei­chen des Ar­ti­kels, son­dern ein ei­gen­stän­di­ges <meta name=“de­scrip­ti­on“>-Ele­ment, des­sen Text (rund 155 Zei­chen) frei de­fi­niert wird und als Vor­schau-Snip­pet in den Such­ergeb­nis­sen er­schei­nen kann. Vie­le Sys­te­me wie Word­Press bie­ten ein Feld da­für; ma­nu­ell sieht der Tag so aus:

<meta name="de­scrip­ti­on" con­tent="Kur­ze Sei­ten­be­schrei­bung">

Mo­der­ne Web­sei­ten be­ru­hen auf drei Bau­stei­nen mit kla­rer Auf­ga­ben­tei­lung: HTML lie­fert die Struk­tur und den In­halt (Über­schrif­ten, Tex­te, Bil­der), CSS über­nimmt die Ge­stal­tung (Far­ben, Lay­out, Schrift) und Ja­va­Script sorgt für Ver­hal­ten und In­ter­ak­ti­vi­tät (z. B. For­mu­lar­prü­fung, dy­na­mi­sche In­hal­te). Die­ses Drei­eck „Struk­tur – Ge­stal­tung – Ver­hal­ten“ ist das gän­gi­ge Ein­stiegs­mo­dell.

Es gibt vie­le wei­te­re HTML-Aus­zeich­nun­gen, die SEO un­ter­stüt­zen, etwa die Hea­ding-Tags – SEO und HTML ge­hen Hand in Hand. Wer op­ti­ma­les SEO-Mar­ke­ting be­trei­ben möch­te, soll­te Grund­wis­sen in HTML mit­brin­gen. Mehr dazu in un­se­rem Rat­ge­ber zur Such­ma­schi­nen­op­ti­mie­rung.

HTML Code

Jede HTML-Da­tei be­ginnt mit ei­nem Grund­ge­rüst, das in je­der Da­tei gleich auf­ge­baut ist und auf je­der Sei­te in­di­vi­du­ell be­füllt wird.

Das Grund­ge­rüst (<!DOC­TY­PE html>, <html>, <head>, <body>) ist ein Aus­gangs­sche­ma, das auf je­der Sei­te in­di­vi­du­ell an­ge­passt wird – der <head> mit title/meta, der <body> mit dem sicht­ba­ren In­halt. Es ent­hält auch Ele­men­te, die im fer­ti­gen Do­ku­ment un­sicht­bar blei­ben, etwa An­ga­ben im <head>-Be­reich (nicht zu ver­wech­seln mit dem sicht­ba­ren <hea­der>-Ele­ment).

<!DOC­TY­PE html>
<html lang="de">
<head>
<meta char­set="utf-8">
<meta name="view­port" con­tent="width=de­vice-width, in­iti­al-sca­le=1">
<title>Sei­ten­ti­tel</title>
<meta name="de­scrip­ti­on" con­tent="Kur­ze Sei­ten­be­schrei­bung">
</head>
<body>
<!-- Sicht­ba­rer In­halt der Sei­te -->
</body>
</html>

HTML er­stel­len: Wie geht das? Wel­ches Pro­gramm?

Es gibt ver­schie­de­ne Pro­gram­me, mit de­nen man HTML-Da­tei­en er­stel­len kann, zum Bei­spiel:

• Win­dows Edi­tor
• Mi­cro­soft Edi­tor
• HTML-Edi­tor
• Nvu
• Blue­Grif­fon (auch für Mac)
• Ado­be Bra­ckets (auch für Mac)
• Vi­su­al Stu­dio Ex­press

Der ge­naue Ab­lauf der Er­stel­lung ei­ner HTML Da­tei ba­siert auf dem Pro­gramm, doch das Grund­prin­zip bleibt das glei­che. In nur drei Schrit­ten kann bei­spiels­wei­se eine HTML Da­tei bei Win­dows Edi­tor er­stellt wer­den.

Schritt 1:

Win­dows Edi­tor auf­ru­fen, wel­che im­mer Be­reich „Win­dows-Zu­be­hör“ ge­fun­den wer­den kann.

Schritt 2:

Das HTML Grund­ge­rüst in die Da­tei ko­pie­ren. Das Grund­ge­rüst kann die­sem Ar­ti­kel ent­nom­men wer­den.

Schritt 3:

Die­se HTML Da­tei muss nun durch „Spei­chern un­ter“ ge­spei­chert wer­den, zu­gleich öff­net sich ein neu­es Fens­ter. Nun kann un­ter dem Feld Da­tei­typ .txt aus­ge­wählt wer­den und dann muss die En­dung von .txt in .html ge­än­dert wer­den. „Spei­chern“ und schon wur­de die HTML Da­tei er­stellt.

Quellen

• Polaris Systems, Entstehung und Zweck von HTML: https://www.polaris-systems.de/tutorials-beitrag/entstehung-und-zweck-von-html.html
• Code Crowd, 10 wichtige HTML Tag: https://code-crowd.de/blog/die-10-wichtigsten-html-tags/
• Wiki.selfhtml, HTML Tutorial: https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5/Grundger%C3%BCst