HTML5-Semantik – Haupt

Bereits 2013 wurde das Element

offiziell zur W3C-HTML-Spezifikation hinzugefügt. Bisher war die Definition dieses Elements sehr vollständig, daher ist es jetzt an der Zeit, einen genaueren Blick darauf zu werfen Es ist angemessen, das Element

zu verwenden. Also, fangen wir an.

　Der Hauptzweck der W3C-Spezifikation

　

besteht darin, ARIAs Wahrzeichenfunktion main auf Elemente in HTML abzubilden. Dies hilft Screenreadern und Hilfsgeräten dabei, zu erkennen, wo der Hauptinhalt der Seite beginnt. Die W3C-Spezifikation beschreibt

als:

Der Hauptinhalt eines Dokuments oder einer Anwendung. Der Hauptinhaltsbereich besteht aus Inhalten, die sich direkt auf das zentrale Thema des Dokuments oder die Kernfunktionalität der App beziehen oder sich darauf erstrecken.

Seitdem das

-Element in die HTML-Spezifikation aufgenommen wurde, ist das -Element auf seine HTML4-Definition zurückgesetzt.

Das Body-Element repräsentiert einmal den Inhalt des Dokuments. Warum ist festgelegt, dass eine Seite nur einmal verwendet werden darf? Auch wenn mich die konkreten Details nicht interessieren, scheinen einige Punkte doch Sinn zu ergeben.

Wenn Sie versuchen, mehrere

-Tags in einem Dokument zu verwenden, gibt der W3C-Validator laut Spezifikation einen Fehler aus.

Eine weitere Voraussetzung für das

-Element ist, dass es nicht als untergeordneter Elementknoten von

,

,

,

,

verwendet werden kann ;.

Verwenden Sie

Genau wie andere neue HTML5-Elemente können nicht alle Browser

erkennen und Standardstile hinzufügen. Möglicherweise müssen Sie es zu einem eigenen Element auf Blockebene machen CSS-Datei.

main {display:block;}

Manchmal müssen Sie zur Unterstützung einiger niedrigerer Versionen von IE-Browsern möglicherweise auch JavaScript verwenden, um dieses Element zu erstellen.

Natürlich können Sie auch html5shiv verwenden.

<script type="text/javascript">document.createElement(&#39;main&#39;);</script>

Der einfachste Weg, das

-Element zu verwenden, besteht darin, den ID- oder Class-Wert durch main oder content zu ersetzen . Klasse von

Wie soll es also in der Praxis aussehen? Nachfolgend finden Sie die Struktur des Dokuments vor der Verwendung des

-Elements.

Als nächstes verwenden Sie das Element

, um das Dokument neu zu schreiben.

<header>Header</header>
    <div id="content">Main Content</div>
    <footer>Footer</footer>

Okay, es ist so einfach, dass wir das Dokument in weniger als einer Minute in den neuesten HTML5-Stil umschreiben können.

Zusammenfassung

  <header>Header</header>
    <main id="content">Main Content</main>
    <footer>Footer</footer>

Wie Sie sehen, ist die Verwendung des

-Elements super einfach und dauert nur ein paar Minuten, also ist es jetzt wirklich an der Zeit, das

-Element einzuführen um die Website zu entwickeln.

Das Obige ist der Inhalt der HTML5-Semantik - Hauptinhalt. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!

Verwandte Etiketten：

HTML5 ，语义化，main

Quelle：php.cn

Vorheriger Artikel：Überwachen Sie die Front-End-Leistung mithilfe der HTML5-API Nächster Artikel：Mehrere „Neue“ Dinge zu HTML5 und CSS3

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

• Videomaterial zum Aufbau Ihres eigenen PHP-Frameworks von Grund auf
  2023-03-15 16:54:01
• Beispielanalyse, wie PHPMailer das QQ-Postfach verwendet, um die E-Mail-Versandfunktion abzuschließen
  2023-03-15 12:26:02
• Einführung in den Empfang von E-Mails in IMAP in PHP
  2023-03-14 18:58:01
• Beispiel für die schnelle Implementierung der Array-Deduplizierung in PHP
  2023-03-14 11:30:01
• Zusammenfassung der Verwendung aller Attribute des -Tags in HTML
  1970-01-01 08:00:00
• Zusammenfassung der PHP-Grundkenntnisse (notwendig für Anfänger zum Einstieg)
  2023-03-16 15:20:01
• Einführung in die Verwendung von typeof in JavaScript
  1970-01-01 08:00:00
• Einführung in die Verwendung der Bestätigungsmethode () in JavaScript
  1970-01-01 08:00:00
• Eine detaillierte Einführung in das HTML5-Platzhalterattribut
  1970-01-01 08:00:00
• So implementieren Sie Einzelauswahl, Mehrfachauswahl und Rückwärtsauswahl in Formularen in ReactJS
  1970-01-01 08:00:00

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

0

3

2347

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

0

11

2476

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

0

1

2099

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...

Aus 2024-04-18 23:52:34

0

1

1978

Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen

Aus 2024-04-16 10:10:18

0

0

2049

verwandte Themen

Mehr>

• Was sind die Produktionsmethoden der HTML5-Animationsproduktion?
• Der Unterschied zwischen HTML und HTML5
• Der Unterschied zwischen Bond0 und Bond1
• So legen Sie Transparenz in CSS fest
• iexplore.exe
• Verlauf der Oracle-Ansichtstabellenoperationen
• JS-Array-Sortierung: Methode sort()
• Methoden zum Lesen und Schreiben von Java-DBF-Dateien