HTML Hauptinhalt

HTMLHTMLBeginner
Jetzt üben

💡 Dieser Artikel wurde von AI-Assistenten übersetzt. Um die englische Version anzuzeigen, können Sie hier klicken

Einführung

Im HTML wird das <main>-Tag verwendet, um den Haupt- oder dominierenden Inhalt der Datei darzustellen. Es ist ein neu eingeführtes Tag in HTML5 und wird normalerweise innerhalb des <body>-Tags geschrieben. Der Inhalt des <main>-Tags sollte einzigartig und direkt mit dem zentralen Thema der Datei zusammenhängen. Es ist ein ähnlicher Begriff wie ein Wahrzeichen, das in einem großen Dokument schnell identifiziert und die Navigation erleichtert.

In diesem Lab werden wir lernen, wie man das <main>-Tag verwendet, um einen Hauptinhaltscontainer in HTML zu erstellen.

Hinweis: Sie können im index.html programmieren und lernen, wie man HTML in Visual Studio Code schreibt. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 95% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Einrichten der HTML-Datei

Erstellen Sie eine neue Datei und benennen Sie sie index.html. Öffnen Sie sie in Ihrem bevorzugten Code-Editor.

Im <head>-Abschnitt der HTML-Datei fügen Sie folgenden Code hinzu:

<!doctype html>
<html>
  <head>
    <title>Creating a Main Content Container in HTML</title>
  </head>
  <body></body>
</html>

Hinzufügen eines Headers und eines Fußzeils

Um unsere Webseite vollständiger aussehen zu lassen, fügen wir einen Header und eine Fußzeile hinzu.

Fügen Sie folgenden Code zwischen die <body>-Tags Ihrer HTML-Datei hinzu:

<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
</header>

<main>
  <p>Welcome to my website. This is the main content area.</p>
</main>

<footer>
  <p>&copy;2021 My Website. All rights reserved.</p>
</footer>

Der obige Code definiert einen Header mit einem Navigationsmenü, ein <main>-Tag und eine Fußzeile.

Hinzufügen von Inhalt zu dem Main-Tag

Jetzt, nachdem wir unseren Header und unsere Fußzeile eingerichtet haben, können wir Inhalt zum Main-Tag hinzufügen.

Fügen Sie folgenden Code zwischen die <main>-Tags hinzu:

<main>
  <h2>About Us</h2>
  <p>
    Wir sind ein Unternehmen, das sich auf Webentwicklungsservices
    spezialisiert. Unser Team besteht aus erfahrenen Webentwicklern, die Ihnen
    helfen können, eine Website zu erstellen, die Ihrem Geschäft helfen wird, zu
    wachsen.
  </p>
  <h2>Our Services</h2>
  <ul>
    <li>Web Design</li>
    <li>Web Development</li>
    <li>Search Engine Optimization</li>
    <li>Social Media Marketing</li>
  </ul>
  <h2>Our Portfolio</h2>
  <p>Hier sind einige der Websites, die wir erstellt haben:</p>
  <ul>
    <li><a href="#">Website 1</a></li>
    <li><a href="#">Website 2</a></li>
    <li><a href="#">Website 3</a></li>
  </ul>
</main>

Überprüfung des endgültigen HTML-Codes

Nachdem Sie den Hauptinhaltsbereich hinzugefügt haben, sollte Ihr HTML-Code wie folgt aussehen:

<!doctype html>
<html>
  <head>
    <title>Creating a Main Content Container in HTML</title>
  </head>
  <body>
    <header>
      <h1>My Website</h1>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <h2>About Us</h2>
      <p>
        Wir sind ein Unternehmen, das sich auf Webentwicklungsservices
        spezialisiert. Unser Team besteht aus erfahrenen Webentwicklern, die
        Ihnen helfen können, eine Website zu erstellen, die Ihrem Geschäft
        helfen wird, zu wachsen.
      </p>
      <h2>Our Services</h2>
      <ul>
        <li>Web Design</li>
        <li>Web Development</li>
        <li>Search Engine Optimization</li>
        <li>Social Media Marketing</li>
      </ul>
      <h2>Our Portfolio</h2>
      <p>Hier sind einige der Websites, die wir erstellt haben:</p>
      <ul>
        <li><a href="#">Website 1</a></li>
        <li><a href="#">Website 2</a></li>
        <li><a href="#">Website 3</a></li>
      </ul>
    </main>

    <footer>
      <p>&copy;2021 My Website. All rights reserved.</p>
    </footer>
  </body>
</html>

Zusammenfassung

In diesem Lab haben wir gelernt, wie man das <main>-Tag verwendet, um einen Hauptinhaltscontainer in einem HTML-Dokument zu erstellen. Wir haben einen Header, einen Hauptinhaltsbereich und einen Fußzeilenbereich mit Beispielinhalten erstellt. Denken Sie daran, dass der Inhalt des <main>-Tags einzigartig und direkt mit dem zentralen Thema des Dokuments zusammenhängen sollte. Indem wir das <main>-Tag verwenden, können wir einen leicht identifizierbaren Abschnitt der Website erstellen, der den Benutzern dabei helfen wird, sich problemlos zu navigieren.