Semantics ist die Untersuchung der Bedeutungen von Wörtern und Phrasen in der Sprache.
Semantische Elemente sind Elemente mit einer Bedeutung.
Semantic HTML ist die Verwendung von HTML-Markup der Semantik oder Bedeutung der Informationen in Web-Seiten und Web-Anwendungen und nicht nur zur Verstärkung seiner Präsentation zu definieren oder suchen.
Semantic HTML wird von traditionellen Web-Browsern verarbeitet sowie von vielen anderen Benutzeragenten. CSS wird verwendet, um seine Präsentation für die menschlichen Nutzer zu suggerieren.
Was sind semantische Elemente?
Ein semantisches Element beschreibt deutlich seine Bedeutung sowohl für den Browser und den Entwickler.
Beispiele für nicht-semantische Elemente: <div> und <span> - Weist nichts über ihren Inhalt.
Beispiele für semantische Elemente: <form> , <table> und <img> - klar definiert sein Inhalt.
Browser-Unterstützung
| Ja | Ja | Ja | Ja | Ja |
HTML5 semantische Elemente werden in allen modernen Browsern unterstützt.
Darüber hinaus können Sie "teach" älteren Browser wie zu handhaben "unknown elements" .
Lesen Sie es in HTML5 Browser - Unterstützung .
Neue semantische Elemente in HTML5
Viele Websites enthalten HTML - Code wie: <div id="nav"> <div class="header"> <div id="footer">
um anzuzeigen, Navigation, Kopf- und Fußzeilen.
HTML5 bietet neue semantische Elemente, um verschiedene Teile einer Webseite zu definieren:
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
HTML5 <section> Element
Der <section> Element definiert einen Abschnitt in einem Dokument.
Laut W3C Dokumentation HTML5: "A section is a thematic grouping of content, typically with a heading." in der "A section is a thematic grouping of content, typically with a heading."
Ein Website-Homepage kann aufgeteilt in Abschnitte für die Einführung, Inhalte und Kontaktinformationen wird.
Beispiel
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section> Versuch es selber " HTML5 <article> Element
Der <article> -Element gibt unabhängige, in sich geschlossene Inhalt.
Ein Artikel sollte Sinn für sich allein machen, und es sollte, es zu lesen möglich sein, unabhängig vom Rest der Website.
Beispiele, wo ein <article> Element kann verwendet werden:
- Forum posten
- Blogeintrag
- Zeitungsartikel
Beispiel
<article>
<h1>What Does WWF Do?</h1>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article> Versuch es selber " Nesting semantische Elemente
Im HTML5 - Standard, dem <article> definiert Element eine vollständige, in sich geschlossene Block der zugehörigen Elemente.
Das <section> Element als ein Block von zugehörigen Elementen definiert.
Können wir die Definitionen verwenden, wie man Nest Elemente entscheiden? Nein Wir können nicht!
Im Internet finden Sie HTML - Seiten mit finden <section> Elementen <article> Elemente und <article> Elemente enthalten <sections> Elemente.
Sie werden auch Seiten mit finden <section> Elementen <section> Elemente und <article> Elemente enthalten <article> Elemente.
Zeitung: Die articles im Sport section , haben einen technischen section in jedem article .
HTML5 <header> Element
Der <header> Element gibt einen Header für ein Dokument oder Abschnitt.
Das <header> Element sollte als Container für Einführungs Inhalt verwendet werden.
Sie können mehrere haben <header> in einem Dokumentelemente.
Das folgende Beispiel definiert einen Header für einen Artikel:
Beispiel
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article> Versuch es selber " HTML5 <footer> Element
Der <footer> -Element gibt eine Fußzeile für ein Dokument oder Abschnitt.
A <footer> Element sollte Informationen über die darin enthaltenen Element enthalten.
Eine Fußzeile enthält in der Regel den Autor des Dokuments, Copyright-Informationen, Links zu Nutzungsbedingungen, Kontaktinformationen usw.
Sie können mehrere haben <footer> in einem Dokumentelemente.
Beispiel
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:[email protected]">
[email protected]</a>.</p>
</footer> Versuch es selber " HTML5 <nav> Element
Das <nav> Element definiert eine Reihe von Navigations - Links.
Das <nav> Element ist für große Blöcke von Navigations - Links vorgesehen. Allerdings sind nicht alle Links in einem Dokument sollte innerhalb eines sein <nav> Element!
Beispiel
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav> Versuch es selber " HTML5 <aside> Element
Das <aside> Element definiert einige Inhalte abgesehen von dem Inhalt es platziert wird in (like a sidebar) .
Der beiseite Inhalt sollte auf den umgebenden Inhalt bezogen werden.
Beispiel
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside> Versuch es selber " HTML5 <figure> und <figcaption> Element
In Büchern und Zeitungen ist es üblich, Beschriftungen mit Bildern zu haben.
Der Zweck einer Beschriftung ist eine visuelle Erklärung zu einem Bild hinzuzufügen.
Mit HTML5, Bilder und Beschriftungen können zusammen in gruppiert werden <figure> Elemente:
Beispiel
<figure>
<img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Rock, Norway.</figcaption>
</figure> Versuch es selber " Das <img> Element das Bild definiert, das <figcaption> Element definiert die Beschriftung.
Warum Semantic HTML5-Elemente?
Mit HTML4, gebrauchte Entwickler ihre eigenen Lieblings-Namen Stil Seitenelemente Attribut:
header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...
Dies machte es unmöglich für Suchmaschinen den richtigen Web-Seite Inhalt zu identifizieren.
Mit HTML5 - Elemente wie: <header> <footer> <nav> <section> <article> , wird dies einfacher geworden.
Laut dem W3C, ein Semantic Web:
„Erlaubt Daten gemeinsam genutzt und über Anwendungen, Unternehmen und Gemeinden wiederverwendet werden.“
Überlegungen
In Fällen, in denen ein Dokument erfordert eine genauere Semantik als die in HTML allein ausgedrückt, Fragmente des Dokuments innerhalb Spanne oder div-Elemente mit aussagekräftigen Klassennamen wie <span class = „author“> und <div class = „Rechnung“ können eingeschlossen werden >. Wo diese Klassennamen innerhalb eines Schemas oder Ontologie auch ein Fragment Identifier sind, können sie zu einer definierten Bedeutung verknüpfen. Microformat, diesen Ansatz zu Semantik in HTML formalisieren.
Eine wichtige Einschränkung dieses Ansatzes ist, dass eine solche Auszeichnung basiert auf Element Inklusion müssen die Wohlgeformtheits- Bedingungen erfüllen. Da diese Dokumente im Großen und Ganzen mit Baumstruktur sind, bedeutet dies, dass nur ausgeglichene Fragmente aus einem Unterbaum auf diese Weise markiert werden können. Ein Mittel zur markierungs in jeden beliebigen Abschnitt von HTML würde einen Mechanismus unabhängig von der Markierungsstruktur selbst, wie XPointer erfordern.
Gute semantische HTML verbessert auch die Zugänglichkeit von Web-Dokumenten (siehe auch Web Content Accessibility Guidelines). [Bearbeiten] Wenn zum Beispiel eines Bildschirmleser oder Audio-Browser korrekt die Struktur eines Dokuments feststellen kann, wird es nicht verschwendet die sehbehinderte Benutzer Zeit durch mehrfache oder irrelevante Informationen zu lesen, wenn es richtig markiert wurde.
Semantische Elemente in HTML5
Im Folgenden finden Sie eine alphabetische Liste der neuen semantischen Elemente in HTML5.
Die Links gehen , um unsere komplette HTML5 Referenz .
| Etikett | Beschreibung |
|---|---|
| <article> | Definiert einen Artikel |
| <aside> | definiert den Inhalt abgesehen vom Seiteninhalt |
| <details> | Definiert zusätzliche Details, die der Benutzer anzeigen kann oder ausblenden |
| <figcaption> | Definiert eine Beschriftung für ein <figure> Elemente |
| <figure> | Gibt umluftunabhängigem Inhalt, wie Bilder, Grafiken, Fotos, Codelisten, usw. |
| <footer> | Definiert eine Fußzeile für ein Dokument oder Abschnitt |
| <header> | Gibt einen Header für ein Dokument oder Abschnitt |
| <main> | Gibt den Hauptinhalt eines Dokuments |
| <mark> | Definiert markiert / markierten Text |
| <nav> | Definiert Navigationslinks |
| <section> | Definiert einen Abschnitt in einem Dokument |
| <summary> | Definiert eine sichtbare Überschrift für ein <details> Element |
| <time> | Definiert ein Datum / Uhrzeit |