Seitenstruktur von HTML5

Versionsinformation - Doctype

Eine einfache HTML-Seite beginnt immer mit der Document Type Declaration oder dem Doctype. Auf diese Weise können Sie den Browsern mitteilen, um welche Art von Dokument es geht. Der Doctype ist immer das erste Element oben in einer HTML-Datei. Dann kommen Abschnitte und Unterabschnitte, jeder hat möglicherweise seine eigene Überschrift und Unterüberschrift. Diese Elemente der Überschrift und der Einteilung helfen dem Leser, die Bedeutung des Inhalts wahrzunehmen.

Wenn wir über die Vergangenheit sprechen, können wir sagen, dass die Deklaration Doctype sehr unangenehm und schwer zu merken war.

Zum Beispiel HTML 4.01 Strict DTD Deklaration:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML5 hat mehr getan! Momentan ist die beste Lösung diese kurze Deklaration:

<!Doctype html>

Der Doctype kann in Groß-, Klein- oder Mischschreibung geschrieben werden. Wie Sie bemerkt haben, fehlt in der Deklaration offensichtlich "5". Obwohl dieses Web-Markup als "HTML5" bekannt ist.

Das Element <html>

Das Element <html> folgt der Doctype-Information, mit der der Browser darüber informiert wird, dass es sich um ein HTML-Dokument handelt. Sie können das Attribut lang mit dem Wert en verwenden, um anzugeben, dass das Dokument auf Englisch ist. Aber heutzutage ist auch das Attribut lang nicht mehr notwendig, damit das Dokument validiert oder korrekt funktioniert.

Vergessen Sie nicht, das Endtag </html> hinzuzufügen:

<!DOCTYPE HTML>
<html lang="en">

</html>

Die Sektion <head>

Der nächste Teil ist der Titelbereich. Das Element <head> enthält Metadaten (Dokumententitel, Zeichensatz, Stile, Links, Skripte), spezifische Informationen über die Webseite, die dem Benutzer nicht angezeigt werden.

Das Element <meta> dient zur Angabe der Metadaten, um Browsern und Suchmaschinen technische Informationen über die Webseite zur Verfügung zu stellen.

Wenn Sie beispielsweise den Autor Ihres Dokuments angeben möchten, können Sie das Element <meta> wie folgt verwenden:

<meta name="Author" content="W3docs">

Um die Zeichenkodierung für das Dokument zu definieren, müssen Sie in fast allen Fällen das Attribut charset mit dem Wert utf-8 einstellen. UTF-8 ist die Standardzeichenkodierung für HTML5.

Erfahren Sie mehr über UTF-8-Kodierung.

<meta charset="utf-8">

Verwenden Sie das Element <title>, um den Titel Ihres Dokuments zu definieren.

<title>W3Docs - Lernen Sie Programmiersprachen online.</title>

Als nächstes kommt das Element <link>, das die Beziehung zwischen dem aktuellen Dokument und der externen Ressource einstellt. Im Allgemeinen wird es verwendet, um auf das externe CSS-Stylesheet zu verweisen.

Erforderliche Attribute für das Element <link> sind rel, href und type.

<link rel="stylesheet" type="text/css" href="style.css">

Das Element <body>

Das Element <body> eines Dokuments enthält den Inhalt des Dokuments. Die Inhalte können von einem User-Agenten auf unterschiedliche Weise präsentiert werden. Zum Beispiel kann der Inhalt ein Text, Bild, Link, verschiedene Farben, Grafiken, usw. sein.

<body>
  ...
</body>

Zwischen den Tags <body> kann es viele verschiedene Elemente geben, denen Sie mithilfe von CSS-Eigenschaften stylen können. Fügen Sie einfach eine id oder class Selektor zu Ihrem HTML-Element hinzu und erwähnen Sie im Abschnitt <style> Ihre bevorzugten Stylingoptionen (Farbe, Größe, Schriftart, usw. ).

<style>
  .header-style {
  color: blue;
  }
</style>
<body>
  <header class=”header-style”
</body>

Das Tag <script>

In HTML5 wird das Tag <script> platziert, um den Praktiken zur Einbettung von JavaScript zu entsprechen. Es hängt beispielsweise mit der Ladegeschwindigkeit der Seite zusammen.

<script src="js/scripts.js"></script>

Die Überschriften (Elemente h1-h6)

Die Überschriften <h1>-<h6> werden verwendet, um eine kurze Beschreibung des kommenden Abschnitts zu geben. <h1> wird als das Wichtigste betrachtet, und <h6> als das Unwichtigste.

<body>
  <h1>Überschrift der ersten Ebene</h1>
  <h2>Überschrift der zweiten Ebene</h2>
</body>

Das Element <header>

Verwenden Sie das Element <header>, um eine Überschrift für das Dokument oder den Abschnitt zu definieren. Sie enthält in der Regel ein Logo, eine Suchleiste, Navigationslinks usw.

<header>
</header>

Das Element <nav>

Das Element <nav> definiert einen Block von Navigationslinks, entweder innerhalb des aktuellen Dokuments oder zu anderen Dokumenten. Beachten Sie bitte, dass nicht alle Links im HTML-Dokument innerhalb des Elements <nav> platziert werden können; es kann nur wichtige Navigationsblöcke enthalten.

<header>
  <nav>
    <ul>
      <li>Menüeintrag</li>
      <li>Menüeintrag</li>
      <li>Menüeintrag</li>
    </ul>
  </nav>
</header>

Das Element <article>

Das Element <article> wird verwendet, um einen unabhängigen, in sich geschlossenen Inhalt zu definieren (Artikel, Blogbeiträge, Kommentare usw. ). Der Inhalt des Elements hat seine eigene Bedeutung und lässt sich leicht vom Rest des Inhalts der Webseite unterscheiden.

<article>
  <p>Text des Artikels</p>
</article>

Das Element <section>

Das Element <section> wird verwendet, um eigenständige Abschnitte innerhalb einer Webseite zu gruppieren, die logisch verbundene Inhalte (Nachrichtenblock, Kontaktinformationen usw.) enthalten.

<section>
  <h1>Überschrift</h1>
  <p>Ein Absatz zum Beispiel</p>
</section>
<section>
  <h1>Überschrift 2</h1>
  <p>Ein anderer Absatz zum Beispiel.</p>
</section>

Lassen Sie uns nun vervollständigen und sehen, wie eine HTML5-Seite aussieht:

Beispiel

<!DOCTYPE HTML>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
      html, body {
      height: 100%;
      }
      body {
      display: flex;
      flex-wrap: wrap;
      margin: 0;
      }
      .header-menu, footer {
      display: flex;
      align-items: center;
      width: 100%;
      }
      .header-menu {
      justify-content: flex-end;
      height: 60px;
      background: #1c87c9;
      color: #fff;
      }
      h2 {
      margin: 0 0 8px;
      }
      ul li {
      display: inline-block;
      padding: 0 10px;
      list-style: none;
      }
      aside {
      flex: 0.4;
      height: 165px;
      padding-left: 15px;
      border-left: 1px solid #666;
      }
      section {
      flex: 1;
      padding-right: 15px;
      }
      footer {
      padding: 0 10px;
      background: #ccc;
      }
    </style>
  </head>
  <body>
    <header class="header-menu">
      <nav>
        <ul>
          <li>Menüeintrag</li>
          <li>Menüeintrag</li>
          <li>Menüeintrag</li>
        </ul>
      </nav>
    </header>
    <section>
      <article>
        <header>
          <h2>HTML lernen</h2>
          <small>Hyper Text Markup Language</small>
        </header>
        <p>In unserem kostenlosen HTML-Tutorial für Anfänger lernen Sie HTML und wie Sie Ihre Website von Anfang an erstellen können. HTML ist nicht schwierig, also hoffen wir, dass Sie Spaß am Lernen haben.</p>
      </article>
      <article>
        <header>
          <h2>Quiz "HTML Basic" starten</h2>
          <small>Mit dem Quiz von W3docs können Sie Ihre HTML-Kenntnisse testen.</small>
        </header>
        <p>Für jede richtige Antwort erhalten Sie 5% auf Single-Choice-Fragen. Bei Multiple-Choice-Fragen kann er bis zu 5% betragen. Am Ende des Quiz wird Ihre Gesamtpunktzahl angezeigt. Die maximale Punktzahl beträgt 100%.</p>
      </article>
    </section>
    <aside>
      <h2>Unsere Bücher</h2>
      <p>HTML</p>
      <p>CSS</p>
      <p>JavaScript</p>
      <p>PHP</p>
    </aside>
    <footer>
      <small>Gesellschaft © W3docs. Alle Rechte vorbehalten.</small>
    </footer>
  </body>
</html>

Versuch es selber!