Wie bilde ich eine Webseite
und strukturiere den Text?

HTML <tags> für Flächen


Das Video ist eine Übersicht für diesen Bereich und zeigt wie man eine Webseite aufbauen kann und den Text in HTML strukturiert.

Diese Elemente sind Rechtecke und verhalten sich ähnlich: Sie sind per CSS-Standard display: BLOCK. Sie erzwingen eine neue Zeile und nehmen erst einmal 100% der Breite ein und sind so hoch wie ihr Inhalt. Lediglich der iframe benötigt auf jeden Fall im CSS eine Angabe für die Höhe. Ihnen wird aber eine bestimmte Bedeutung (Semantik) zugeschrieben und dieses allgemeine semantische Konzept soll berücksichtig werden.

Semantische HTML <tags>

HTMLBedeutung
<body>Enthält alle Elemente die im Browser angezeigt werden. Der BODY kann mittels CSS direkt gestaltet werden. Der BODY darf nur einmal pro HTML Dokument eingesetzt werden. Der BODY ist neben dem HEAD ein direktes Kind von dem HTML Element. Der BODY hat als Standard display: Block und nimmt 100% der Breite ein und ist so hoch wie sein Inhalt. Die Höhe muss bei Bedarf (z.B. Für einen Verlauf) im CSS definiert werden.
<main>Hauptteil der Webseite. Darf in einem validen HTML Dokument nur einmal vorkommen und kein Kind-Element der anderen Elemente, bis auf HTML und BODY, sein. Leider wird <main> NICHT vom Internet Explorer unterstützt. Unglaublich. Insofern ist davon in der Produktion abzuraten.
<header>Sichtbarer HEADER (Kopfbereich) der Webseite. Nicht mit dem unsichtbaren HEAD zu verwechseln.
<nav>Navigation der Webseite. Enthält automatisch die ARIA-Roles die einem Screenreader die Navigation signalisieren.
<section>Abschnitt (Sektion) der Webseite. Man kann mehrere SECTIONS in einem HTML Dokument benutzen. Eine SECTION kann weitere SECTION als Kind haben. Eine SECTION umfasst mehrere <article>. Die SECTION ist sozusagen die Kategorie.
<article>Umfasst Elemente die zu einem Artikel gehören. Z.B. Überschriften, Text, Tabellen und Bilder.
<figure>Container Element für alle Inhalte (FIGCAPTION) die zu einer Abbildung (IMG) gehören.
<aside>Umfasst ergänzende Elemente. ASIDE bedeutet "Nebenbemerkung". Verhält sich optisch wie alle anderen Block-Elemente. Muss also mit CSS an seine Position gebracht werden.
<footer>Fußbereich der Webseite für dort geeignete Informationen.

Non-Semantische HTML <tags>

HTMLBedeutung
<div>DIV ist die Abkürzung für Divison: Bereich. Er ist semantisch nicht näher definiert. Er kann beliebige Inhalte haben kann. DIV sind häufig benutzte Elemente. Allerdings sollten zunächst die semantischen Elemente wie <section> <article>, <nav> <button> etc. benutzen.
<iframe>Bettet einen Bereich aus einer anderen Quelle, z.B. HTML, Webseite, Google-Maps oder Videohoster wie Youtube, ein.
<embed>Eingebettete Application. Wie z.B. ein Flash oder auch Videos von Youtube oder Vimeo. Wobei der Trend in Richtung <iframe> geht.

frageantwort
Entferne mal das <aside> Element<aside> und </aside> löschen
Was bedeutet <span> ?Span ist ein beliebiger Bereich der Webseite. Er kann genutzt werden um Inhalte innerhalb eines <div> zu markieren. Ähnlich wie ein Zeichenformat innerhalb eines Absatzformates in InDesign.
Wofür ist der <footer>?Der footer ist der Fuß der Webseite.
Was bettet "iframe" ein?Der iFrame bettet einen Bereich einer anderen Quelle ein, zum Beispiel ein Videohoster wie Youtube.
Was bedeutet <article>Umfasst zusammengehörige Elemente. Z.B. Bild, Text und Überschrift.
HTML <tags> für Text

Diese Elemente sind ebenfalls Rechtecke. Sie sind semantisch für Text vorgesehen. Die meisten sind BLOCK Elemente per Standard und erzwingen eine neue Zeile. Einige sind INLINE und können genutzt werden um innerhalb eines BLOCK Elements einzelne Zeichen zu markieren. Die textbezogenen HTML Elemente bringen meist auch Einstellungen zu der Schriftgröße, Schriftschnitt und Abstände (margin) mit. Die Standard-Eigenschaften können natürlich bei Bedarf im CSS angepasst werden.

Semantische HTML <tags> für Text

HTMLBedeutung
<h1> <h6>Überschriften der 1. bis 6. Ebene. H1 (Head1) sollte pro Dokument nur einmal vorkommen.
<p>Kompletter Absatz (Paragraph) im Text. Entspricht einem Absatzformat im InDesign
<ul>Anfang und das Ende einer Liste mit beliebigen Aufzählungszeichen. UL steht für Unordered List, also eine Liste ohne Zahlen. Per CSS-Standard bekommen LI Elemente in einer UL einen Aufzählungspunkt.
<ol>Anfang und das Ende einer nummerierten Liste. Per CSS-Standard bekommen LI Elemente in einer OL ein laufende Nummer.
<li>Markiert in <ul> und <ol> die einzelnen Listen-Elemente.
<br>BREAK. Zeilenumbruch. Der Text im Absatz bricht an dieser Stelle um.
<!--...-->HTML-Kommentar und nur im Quellcode sichtbar. Kommentare sind ein wesentliches Mittel für guten Quellcode.
<hr>Horizontale Linie für einen thematischen Wechsel. Man kann übrigens selbst die HR mit Angaben für eine Höhe in ein Rechteck umbauen. Eine HR kann aber kein Text beinhalten. Sie ist zum gliedern von Text gedacht.
<adress>Markiert die Kontakt Informationen.
<del>Durchgestrichen.
<em>Hervorgehobener Text. Steuert im semantischen Kontext die Bedeutung.
<ins>Neu eingefügter und deswegen hervorgehobener Text.
<sub>Tiefgestellter Text.
<sup>Hochgestellter Text.
<dl>Anfang und das Ende einer Definitionsliste. Ähnelt <ul> definiert jedoch mittels <dt> und <ddl> ein konkretes Element.
<dt>Zu definierender Begriff in der Definitionsliste.
<dd>Erklärender Text in der Definitionsliste. Entspricht in der Verwendung dem <li>
<strong>Fetter Text. Im semantischen Kontext betont es Wichtigkeit. Die Optik wird mit der CSS Eigenschaft FONT-WEIGHT (z.B. Bold) bestimmt.
<b>Fetter Text. Wichtiger Text sollte mit <strong> hervorgehoben werden. Die Optik wird mit der CSS Eigenschaft FONT-WEIGHT (z.B. Bold) bestimmt.
<i>Zeigt es im semantischen Kontext Fremdwörter an. Die Optik wird mit der CSS Eigenschaft FONT-FAMILY oder FONT-STYLE bestimmt.
<small>Kleine Schriftgröße. Wird mit CSS FONT-SIZE näher eingestellt.
<q>Container für ein Zitat (Quote) samt <cite>.
<cite>Zitat.
<var>Kennzeichnet semantisch eine Variable. HTML kann aber keine Variablen ausführen. Es bezieht sich nur auf die Dokumentation von Variablen.

frageantwort
Durchstreiche die Zeile Handwerk, Technik ... <del> Handwerk ...</del>
Wie definiert man die Dicke der Schrift?Mit der Eigenschaft font-weigth
Was bedeutet < del > ?< del >bedeutet das ein Text durchgestrichen ist.
Mach die Schriftdicke von "Arnold Bode Schule" dünner.strong {font-weight:300;}
Was passiert wenn der Tag ⁢ strong > bei der überschrift ,,Code" gelöscht wird?Dann wird die Überschrift ,,Code" über H1 definiert und ist schwarz und nicht mehr fett.
Wie kann man den Strich durch Walter-Hecker-Schule entfernen?<small>Walter-Hecker-Schule</small> Man muss das <del> entfernen
Wie wird aus einer ungeordneten Liste eine geordnete Liste (1. 2. etc)?Der tag <ul> muss in den tag <ol> umgewandelt werden.
Was ist der Unterschied zwischen <sup> und <sub> ?<sup> ist ein hochgestellter Text und <sub> ist ein tiefgestellter Text.
Wie schafft man es ein Wort oder Satz durch zu streichen?Mit dem <del>
Es soll Hallo Welt durch gestrichen werden also muss man <small><del> (Hallo Welt) </del></small> ein geben um das Ziel zu ereichen.
Wie kann man Arnold Bode Schule schräg (kursiv) stellen?<i>Arnold Bode Schule/i>
Was ist der Unterschied zwischen <dd> und <dt>?<dd&gt definiert <dt>. <dd> ist ein Erklärender Text in der Definitionsliste
<dt> ist ein definierender Begriff in der Definitionsliste
Womit ist die Überschrift "Arnold Bode" angegeben?
<h4>
Mach H1 kursiv mit hilfe eines < tags > :)& lt;H1& gt; & lt;i& gt; Hallo & lt;/i& gt; & lt;/H1& gt;
► Weitere Infos

Interne Quellen


Im Skript gibt es einen kleinen Überblick der Geschichte des Internets, den Inhalt der ersten Webseite, tabelarischen Übersichten der flächen- und textbezogenen HTML Elemente und für den Start eine kleine HTML-Webseite mit Musterlösung.


Externe Quellen

W3C Web of Data

http://www.w3.org/2013/data/

Original W3C Initiative für das Web der Daten, also den semantischen Gebrauch der HTML Elemente.


W3C 4.31 HTML5

http://www.w3.org/TR/html5/sections.html#sections

Original W3C Recommendation für den Gebrauch der semantischen flächenbezogenen Elemente


W3C Semantische Grundelemente

http://www.w3.org/wiki/HTML_structural_elements

Beitrag im Wiki der W3C über den Gerbauch der HTML5 Elemente und den guten alten <div>.


Seitenstrukturierung auf selfhtml.wiki

http://wiki.selfhtml.org(...)Seitentrukturierung

Umfangreiche Erklärung für die flächenhaften HTML Elemente in deutscher Sprache.


Textstrukturierung auf selfhtml.wiki

http://wiki.selfhtml.org(...)Textstrukturierung

Umfangreiche Erklärung für die Textbezogenen HTML Elemente in deutscher Sprache.


Support für <main>

https://microsoft.com(...)html5-main-element-not-supported

Auch im Jahr 2015 kann der Internet Explorer seine Sonderstellung im schlechten oder verwirrenden Support halten. Das semantisch wichtige <main> Element wird nach wie vor nicht unterstüzt. Ansonsten sind alle Elemente bedenkenlos einsetzbar.


HTML5 in der Praxis II

http://webkrauts.de/artikel(...)html5-der-praxis-ii

Artikel bei Webkrauts in deutscher Sprache der beispielhaft die semantische Struktur eines typischen Blogs aufzeigt.