<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Your Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>Your menu</li>
</ul>
</nav>
</header>
<section>
<article>
<header>
<h2>Article title</h2>
<p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>
</header>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</article>
<article>
<header>
<h2>Article title</h2>
<p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>
</header>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</article>
</section>
<aside>
<h2>About section</h2>
<p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</aside>
<footer>
<p>Copyright 2009 Your name</p>
</footer>
</body>
</html>HTML5-Seitenstruktur
Chris Coyier am
Und wo ist der Zeichensatz?
Er ist da, aber als Meta-Tag... Vereinfacht.
Das ist die falsche Verwendung des section-Tags
Was ist falsch am section-Tag?
Das section-Attribut ist nicht dazu gedacht, Artikel einzuschließen, eher umgekehrt. Siehe dieses Beispiel
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article
Nun, die Verwendung von
<article>innerhalb von section ist die richtige Verwendung... sogar in dem von Dave bereitgestellten Link zeigt das Beispiel es so an... und dann, was gemeint ist und nicht ist...Wenn Sie möchten, können Sie
<section>mit<article>haben, die eigene Unter-<section>s enthalten, und die Website wird trotzdem ordnungsgemäß funktionieren... es bedeutet nur, dass Sie Ihren Code anders strukturieren...Etwas stimmt nicht mit dem section-Tag
Als Ergänzung zu ullis Kommentar: Ein "Abschnitt" von Inhalten, der Artikel enthält, und ein "Abschnitt" von Inhalten innerhalb eines Artikels, der entweder den Haupttext des Artikels oder alles andere, was ihm hinzugefügt wird, enthält. Im Falle des Mozilla-Beispiels enthält der Abschnitt innerhalb des Artikels Rezensionen des Artikels oder Rezensionen des betreffenden Themas.
Das dort in Ihrer Antwort ist falsch: Mozilla als Ihre Informationsquelle. Im Allgemeinen ist das section-Element wie in diesem Eintrag gepostet in Ordnung.
@CHarlie: Und was ist falsch an Mozilla als Quelle?
Nur eine Frage zu den doppelten innerhalb der und wo ist die ?
Vielen Dank für Ihre sehr klare & nützliche Website und ich habe meine Webdesign-Studenten auf Ihre Videos hingewiesen und sie finden sie auch sehr hilfreich.
Hmm, es sieht so aus, als ob der von mir geschriebene Code nicht im Text erschienen ist, also versuche ich es erneut und hoffe, dass er richtig dargestellt wird
Ich habe mich gefragt, ob die doppelten <p> <p> innerhalb des <article> sind?
... und wo ist die <h1>?
Danke
Wie können wir eine HTML5-Seite für Android erstellen? Gibt es spezielle Tags.
Manche Seiten sehen nicht aus wie der Blog eines kleinen Mädchens. Sie haben einen Artikel, aber mehrere Navigations und Beifügen. Verwenden Sie weiterhin xhtml-strict und verwenden Sie Rollen und Titel!
Gibt es nicht eine neue Definition für den Charset-Meta-Tag in der HTML5-Spezifikation? D.h.
* Habe gerade danach gegoogelt und eine Antwort gefunden. (Ja, war die kurze Antwort).
Ich denke gerade über das Nav-Tag nach, ist es wirklich notwendig? Ich habe nie die div#nav>ul-Struktur verwendet, stattdessen ul#nav.
Für Charset bieten die Spezifikationen tatsächlich 3 Methoden..
1. Transport-Level-Content-Type-Header.
2. Neuer Charset-Meta-Tag
3. Unicode-Byte-Order-Mark
Ohne Stil wird es wie normaler Text aussehen oder...?
Das ist eine schöne Syntax für Dokumente. Für Webseiten sollten Sie die Navigation aus Zugänglichkeitsgründen nach dem Inhalt platzieren.
betrachten Sie stattdessen
<header>
...
</header>
<section>
...
</section>
<nav>
...
</nav>
<footer>
...
</footer>
Sie können die Navigation immer noch im Header der Seite (oder wo auch immer Sie möchten) mit CSS erscheinen lassen, aber wenn ein blinder Benutzer die Seite mit einem Screenreader liest, wird er nicht mit der langen Liste von Links konfrontiert, bis er fertig ist, den Inhalt der Seite zu lesen.
Zusätzlich werden bei Dropdown-Menüs diese aufgrund ihrer geringeren Position im DOM über eingebetteten Inhalten (anstatt darunter versteckt) angezeigt.
Vielen Dank für die Erklärung; Das hätte ich nie in Betracht gezogen. Sehr hilfreich.
Nicht ganz! Sie können es am Anfang der Seite platzieren. Schauen Sie sich die MDN-Spezifikationen an.
Danke für den Beitrag, Sie haben großartige Arbeit geleistet :D
Was ich frage ist, gibt es eine Möglichkeit, Internet Explorer (6, 7 und andere
Versionen) HTML5 verstehen zu lassen, einen JS-Hack zum Beispiel.
Ich arbeite für ein Webunternehmen und die von uns erstellten Websites sollten gut angezeigt und zugänglich sein, auch in IE.
Wenn jemand Vorschläge hat, zeigen Sie mir bitte Ihre Ideen.
mein GM: [email protected]
Gehen Sie einfach zur URL: https://github.com/aFarkas/html5shiv#html5shivjs
Laden Sie html5shiv.js herunter und fügen Sie den unten genannten Code in den Head-Bereich ein
Es rendert HTML5-Elemente dynamisch im DOM und beseitigt die Probleme mit der browserübergreifenden Kompatibilität in IE6-8.
Nachdem Sie html5shiv.js in den nativen JS-Ordner innerhalb von HTML heruntergeladen haben, verwenden Sie dies in Ihrem Head-Bereich;
Danke für den Beitrag, Sie haben großartige Arbeit geleistet :D
Danke!
Ich möchte eines Tages HTML5 ausprobieren.
Dies ist definitiv ein guter Ausgangspunkt!
Ist es wirklich so?
.........
oder
.......
weil ich Websites gesehen habe, die article über section verwenden.
Hey,
Ich benutze diesen Beitrag als Grundlage für viele HTML5-Projekte und er ist großartig.
Aber ich habe neulich ein Video gesehen, in dem der Sprecher sagte, dass das Tag *innerhalb* des Tag verwendet wird, um verschiedene Abschnitte in einem Artikel zu trennen, und das hat mich nachdenken lassen, was richtig ist. Irgendwelche Gedanken?
Danke für das Teilen des Codes. :D
Würde es nicht Sinn machen, die section im article zu haben? Wenn man einen Zeitschriftenartikel liest, gibt es viele Abschnitte des Artikels und nicht viele Artikel in einem Abschnitt?
Header im section-Tag?
Yup.
Sie können ihn zur Definition von Header-Elementen eines Artikels wie Titel, Beschreibung usw. verwenden!
z.B.
IE8 erkennt diese Stile bei Verwendung dieses Markup nicht.
Zum Beispiel:
Tag im Stylesheet
header {width:940px; margin:auto; padding:0;}
doc
Hello World
Wenn Sie die Seite in IE8 rendern, wird der Inhalt nicht zentriert. Wenn in FF oder Safari gerendert, funktioniert alles einwandfrei.
C~
Hmmm..., ..., ist es nicht so klar? Betrachten Sie: http://www.turtleblog.co.uk/2011/04/whats-new-to-html5/
Ihre Struktur ist falsch! Sections sollten innerhalb eines Articles liegen > Ein Artikel macht für sich allein Sinn, während ein Section auf andere Sections angewiesen ist, um Sinn zu machen. http://html5doctor.com hat ein paar gute Artikel dazu
Warren: Artikel sollten innerhalb von Sections liegen, nicht umgekehrt
FALSCHES TUTORIAL!!!!
Besuchen Sie
http://dev.w3.org/html5/spec/Overview.html#the-section-element
Clint, Sie können Norminizer oder Eric Meyers CSS Reset verwenden. Alles großartige Werkzeuge. Ich gehe davon aus, dass HTML 5 aufgrund der Semantik eine dominante Kraft hinter SEO/SEM sein wird... Toller Artikel.
Ich versuche gerade, meine Website auf HTML5 aufzurüsten, und lassen Sie es mich wissen, es war eine Qual, weil die meisten Selektoren sich nicht so positionieren, wie ich es möchte. Irgendwelche
Vorschläge für Tutorials zum
Alle Hauptabschnitte werden in semantische Tags eingeschlossen und andere bleiben als Divs oder was auch immer Sie verwendet haben. Für Screenreader können Sie "alt" innerhalb des Tags verwenden, um dieses Div zu beschreiben!
Ich habe gerade mein Theme neu gestaltet. Vielen Dank für Ihren hilfreichen Beitrag. HTML5 rockt :p
Jeder gibt nur die HTML5-Tags, aber niemand gibt, wie man für jeden wie footer, aside, nav, section, article usw. CSS schreibt.
Ich möchte wissen, wie man richtig CSS für HTML5 schreibt
Können Sie mir bitte ein Layout mit Beispiel senden?
oder eine Referenzseite
Mohinder, Sie können eine Klasse oder eine ID innerhalb Ihres Header-, Footer- oder Aside-Tags erstellen... und einfach CSS zu dieser Klasse oder ID hinzufügen.
Wie zum Beispiel...
section class="left_top_section">
header class="left_top_header"> h1>……..header kommt hier hin ……./h1>/header>
/section>
Und schließlich können Sie Ihre CSS-Regeln auf diese Klassen anwenden. :)
Mohinder, das CSS ist nicht anders als das, was Sie zuvor mit divs verwendet hätten.
Ist es nicht verrückt, dass einige von euch sagen, die oben geschriebene Struktur sei falsch, wenn HTML5 genau aus diesem Grund geschaffen wurde! Wenn eine Sache an HTML5 richtig ist, dann: ALLES GEHT!
Sehr klare Informationen, danke für diese Informationen, aber ich habe eine Verwirrung, ob wir section unter article verwenden können?
Ja, aber article unter section ist gut, um zu identifizieren, welche Section welche Artikel enthält, und das ist auch ein Standard für die Verwendung auf Websites.
Ja, wir können das article-Tag verwenden.
Ist so etwas korrekt??
<section>
<header>//h2</header>
<article>
<header>//h3</header>
</article>
<article>
<header>//h3</header>
</article>
</section>
Ja, kein Problem damit... absolut richtig.
Endlich bringt HTML5 eine bessere Form des semantischen Markup! Das Element macht mehr Sinn für die Navigation als die alten
<
ul> (unsortierte Liste) oder
<
ol> (geordnete Liste) Elemente, da diese Listen alles darstellen könnten. Mit dem Tag können Suchmaschinen besser definieren, dass dieser Tag nur für Navigationszwecke bestimmt ist, z. B. mit einer absoluten URL (http://www.your-site.com/example-page.html) oder mit einer relativen URL (your-directory/example-file.html). Die alten Listen-Tags hätten eine Liste von Bildern oder Arten von etwas darstellen können, unabhängig davon, ob es sich um einen Link handelt oder nicht.
Das neue section-Tag wäre großartig für Homepages, auf denen Sie möglicherweise Links zu verschiedenen Abschnitten Ihrer Website haben und bestimmte Inhaltstypen in jedem Abschnitt darstellen möchten. Das article-Tag ist ebenfalls ein "Kinderspiel". Hätte das schon vor Jahren haben sollen. Ich mag auch das Tag! Eine bessere Möglichkeit, Inhalte darzustellen, die irgendwie mit einem Artikel oder den Inhalten einer Seite zusammenhängen, aber nicht direkt Teil davon sind.
Vielen Dank dafür! Das ist genau das, was ich brauchte!
Hallo,
Ich habe gerade einen Artikel gesehen, der erklärt, dass wir statt article verwenden sollten
http://www.iandevlin.com/blog/2013/01/html5/the-main-element
Was denkst du?
Ich weiß nicht, wie ich meine section-, article-, main- und aside-Tags kombinieren soll. Wegen meines Grids befinden sich mein Artikel und meine sekundäre Navigation in derselben Zeile.
Kann ich also so etwas tun?
<main>
<article>
<h1></h1>
<p></p>
</article>
<aside>
</aside>
</main>
?
Sie haben h2 innerhalb von main, sections, article verwendet
Großartig! Mit Ihrer Hilfe habe ich gerade ein Redesign für unsere Website auf HTML5 und Jquery vorgenommen. Danke!
Sie haben h2 innerhalb von sections verwendet, aber ich glaube, es sollte ein h1-Tag sein
Dies scheint inkonsistent mit dem zu sein, was html5doctor sagt. Das article-Tag sollte dort verwendet werden, wo das section-Tag verwendet wird, und umgekehrt.
... Oder vielleicht spielt es überhaupt keine Rolle. Das Problem hier ist, dass ALLE VERWIRRT SIND (einschließlich derer, die Bücher über HTML5 geschrieben haben), und das aus gutem Grund.
Ich schlage vor, Sie lesen dieses kostenlose Kapitel aus "The truth about HTML5" (http://www.netmagazine.com/features/truth-about-structuring-html5-page).
Sobald Sie die Absicht hinter den Tags verstehen, können Sie entscheiden, ob und wann Sie sie verwenden sollten.
Hey Chris, kurze Frage, ist es in Ordnung, section im article-Tag zu platzieren? Oder ist das nicht gültig?
Lesbarkeit und W3C gehen beide Wege. Die HTML5-Layout-Hierarchie gibt dem section-Tag aus Layoutgründen größeres Gewicht. article-Tag-Positionen sind Designer-Semantik, Inhaltslieferung. CSS-Gewichtung, schwer zu leicht scheint section-article-div zu laufen. Machen Sie section zu einem fantastischen Inhaltsanker, article zu einem zuverlässigen Platzhalter und div zu einem unaufdringlichen Manipulator.
header/header article... section... article/article .../section .../article footer/footerWir sind im Jahr 2013... wir können jetzt das <main>-Tag verwenden.
Ich weiß, das ist ein älterer Beitrag, aber ich habe gerade meine Vorlagen aktualisiert und festgestellt, dass W3Schools das Tag immer noch als 'nicht unterstützt' anzeigt. Das erscheint etwas seltsam. Hat jemand Probleme damit in IE 10+?
Ich habe gerade den Code durchgesehen und bemerkt, dass kein
-Tag vorhanden ist. Vielleicht überarbeitet Coyer den Code, da es viele Kommentare gibt und die Leute vielleicht nicht nach unten scrollen.Ich frage mich, ob der Kommentarbereich innerhalb des main <section></section>-Tags sein sollte oder ob wir ein weiteres <section></section> benötigen, um die Kommentarvorlage zu platzieren? Danke im Voraus.
Danke! HTML5 verändert die Web-Welt...
Bitte beachten Sie diese Fehler
http://html5doctor.com/avoiding-common-html5-mistakes/
Toller einfacher Beitrag!
Die Leute denken immer noch, er enthalte Fehler, aber nicht jeder kann Spezifikationen lesen!
Hier in der Spezifikation zeigt er deutlich einen Artikel, der einen Abschnitt enthält, und einen Abschnitt, der einen Artikel enthält - darüber hinwegsehen!
http://www.w3.org/html/wg/drafts/html/master/sections.html#the-article-element
Das stimmt, Dan. Aber in Chrome und IE (ich benutze letzteres nur vorerst) behandelt die CSS-Kaskade section und article unterschiedlich, je nach Eltern-Kind-Beziehung.
article und section sind Neulinge – p a und h1 gibt es schon länger
Das Bildschirm-Layout spiegelt die Stabilität älterer (Grundlagen?) Elemente wider
Manchmal müssen Designer wie Bug-Tester coden – beide Fälle nutzen und Sie haben mehr Kontrolle
Ich bin mir nicht sicher, ob das auf article und section zutrifft – sie sind derzeit auf Steroiden
https://css-tricks.de/perfect-full-page-background-image/ ...mein Favorit in dieser Hinsicht...
Wo ist die H1? Können wir mehrere H1-Tags innerhalb jedes section oder articles oder headers platzieren? Ist das nicht gut für SEO?
Hallo Chathura,
Vielleicht hat das schon jemand für dich beantwortet, aber laut Matt Cutts, einem wichtigen Mann bei Google und sehr gesellig mit Leuten, die Fragen zu Best Practices für SEO stellen, besagt er, dass mehrere H1s auf einer einzelnen Seite in Ordnung sind, aber mit Vorsicht und Mäßigung verwendet werden sollten. Das bedeutet, H1s dort zu verwenden, wo sie Sinn ergeben! Typischerweise verwende ich beim Entwickeln einer Website ein H1 für das Logo (nur auf der Startseite) und der Haupttitel der Startseite kann ebenfalls ein H1 haben, da sie beide recht gut in verschiedenen Abschnitten der Website getrennt sind. Wenn es um die Gestaltung einer internen Seite geht, entferne ich das H1 vom Logo und verwende stattdessen nur einen einfachen Anker, sodass nur ein H1 auf der Seite verbleibt und dieser dem Seitentitel gewidmet ist.
Ich hoffe, das ergibt Sinn.
Matt Cutts Video über Best Practices für H1-Elemente in SEO: https://www.youtube.com/watch?v=GIn5qJKU8VM
Vielleicht wurde das schon angesprochen, aber ich sehe das heutzutage auf vielen Websites, wo die Entwickler den H1-Tag komplett übersprungen und direkt mit H2s für Dinge wie den Seitentitel/Artikeltitel der Seite fortfahren... Ich bin verwirrt, da H1 für den Haupttitel der Seite verwendet werden soll... Gibt es eine Erklärung, warum dies zu einem gängigen Thema unter Webentwicklern wird? Ziemlich verwirrend für mich und ich gehe auch davon aus, dass die Entwickler, welche Website auch immer H2 als Hauptseitentitel verwendet, einfach faul sind und nicht auf die Art des verwendeten HTML-Elements achten.
Es wird immer üblicher, ein Banner oder Logo-Bild anstelle der H1-Überschrift zu haben. Unterüberschriften fühlen sich immer noch so an, als sollten sie H2s und so weiter sein. Es gibt wirklich keinen guten Grund, H-Tags überhaupt zu verwenden, da wir sowieso alle Standardstile zurücksetzen und Webseitendesigns sich vom Print-Modell entfernen.
Die unbeantwortete Frage ist, sollte das Logo in einem H1-Tag stehen... vielleicht mit einem Rel-Attribut dazu? Würde es jemanden interessieren?
Hmm… Ziehen Sie in Betracht, eine Zeitung mit verschiedenen Abschnitten zu lesen, wie zum Beispiel den Sportteil, den Unterhaltungsbereich und den Wirtschaftsteil. Hat nicht jeder Abschnitt ein paar Artikel darin? Und manchmal kann ein Artikel ein paar Abschnitte enthalten. Klingt wie eine Henne-oder-Ei-geht-zuerst-Sache :P
Sollte es nicht so sein: http://codepen.io/anon/pen/myzZMb.html
Laut einem Artikel spielt es tatsächlich keine Rolle, ob man Abschnitte mit Artikeln oder Artikel mit Abschnitten verwendet. Ich weiß nicht, ob das in Ordnung wäre, aber ich würde denken, dass Sektion-Tags für generische Inhalte verwendet werden sollten, während Artikel für Blog-ähnliche Beiträge oder ähnliches sind.
Nun, bekommen wir oben eine Antwort auf „section“ und „article“?
Ich denke, der Zweck des Artikel-Tags ist hauptsächlich für Blog-ähnliche Inhalte. Wenn Sie eine Seite ohne Nachrichten/Informationen erstellen, ist die Verwendung des Artikel-Tags etwas irreführend, obwohl es vielleicht ein schöner Absatz-Wrapper sein könnte. Letztendlich ist alles Semantik. Man kann eine ganze Seite nur mit Divs erstellen.
Alle konzentrieren sich so sehr auf das „section“-Tag und seine Positionierung, dass niemand nach einem weiteren neuen Tag in HTML5 gefragt hat: dem „main“-Tag. Obwohl der Inhalt ein „article“ oder ein „section“ sein mag, ist er auch der „main“-Inhalt der Seite. Sollte dieses Tag also nicht verwendet werden?
Wie unterscheidet sich das von Standard-HTML?
Welche sind HTML5-spezifische Elemente!?
Sehr geehrte Damen und Herren,
In HTML 5 ist der spezifische Fluss oder das strukturelle Skelett oben gut beschrieben.
Es hat im Grunde 7 Kernelemente, im Gegensatz zu html4 und früheren Versionen, wo wir uns auf div-Tags für diese Rollen verließen und CSS verwendeten, um das gewünschte / notwendige Format anzuzeigen.
In HTML 5
wird der grundlegende Zweck von Div und die Steuerung mit CSS hinzugefügt (Hinweis: Nur ein Standard-Add-on, nicht entfernt), und es wurden grundlegende neue Ergänzungen mit diesen Kerntags vorgenommen, die den Zweck viel effizienter erfüllen. Sie sind wie folgt.
1) Header
2) Nav
3) Main
4) Section
5) Article
6) Aside
7) Footer
Professionell können Sie all diese oder einige davon verwenden, wie von Chris vorgeschlagen, oder einen liberalen Ansatz wählen, bei dem Sie eine Kombination aus beiden obigen Tags und Divs verwenden können, oder einfach den traditionellen Gebrauch von Div und CSS beibehalten.
Der Unterschied und die Details dazu werden im folgenden Kommentar mit einem einfachen Beispiel erklärt.
Wie ich oben bereits erwähnt habe,
im traditionellen Ansatz
<
div id=”footer”>
wobei alle ID-Werte präzise in CSS definiert sind und nur entsprechend handeln. Hier hängt der Zweck und die Rolle von der Definition ab, die wir in CSS machen.
In Standard HTML 5
</header
<
section>
(optional * kein obligatorischer Tag zur Verwendung, aber definitiv eine gute Ergänzung)
Hier spielt CSS immer noch eine wichtige Rolle, aber eher für das visuelle Styling als für die primäre Rollenzuweisung zu den Tags.
Nun das
<
header> Tag wird verwendet, um den oberen Bereich der Seite anzuzeigen, auf dem das Logo, die Suchleiste, der Login, die Abonnementfunktion usw. sowie andere wichtige Elemente platziert werden.
Hinweis: Es kann auch innerhalb des Inhalts für Titel oder nur als Hervorhebung usw. platziert werden.
<
nav> Tag, wie üblich für unsere Website-Menüs gedacht.
Hinweis: Es kann auch überall platziert werden, muss nicht direkt nach dem Header sein (abhängig von der Art des Menüs – vertikal/horizontal/groß/mehrzweck usw.) oder kann sogar für interne Menüs in der Seitenleiste verwendet werden (entweder horizontal oder vertikal).
<
section> Tag ist ein Tag, das einige Inhalte enthält, sei es ein Menü in der Seitenleiste, ein Bereich für die Anzeige neuer Beiträge, eine Bildergalerie usw.
Hinweis: Es kann überall auf der Website platziert werden, der Kernzweck ist die Aufnahme einiger Inhalte.
<
article> Tag ist ein Tag, das ebenfalls Daten enthält, aber nur in einem spezifischen Kontext, anstatt in mehreren Kontexten.
z.B. nehmen wir an, Sie sprechen über einen „Premierminister“, dann können Sie nur Details zu diesem spezifischen Thema halten, Sie können nicht plötzlich über den „Präsidenten“ im selben Kontext sprechen.
Aber wenn Sie über Politik sprechen, können Sie sowohl den Premierminister als auch den Präsidenten einbeziehen, sie werden beide Teil des Kontexts.
Lassen Sie mich Ihnen mit einem schnellen Beispiel detailieren
POLITIK
Premierminister
Name: John
Alter: 45
Partei: XYZ Partei
Die XYZ Partei ist eine nationale Partei, die 1990 gegründet wurde.
Biografie
Präsident
Name: John
Alter: 45
Partei: ABC Partei
Die ABC Partei ist eine regionale Partei, die 2001 gegründet wurde.
Biografie
</section
Nun wird Politik hier als Sektion behandelt, und die enthaltenen Artikel sind Premierminister und Präsident.
Wir können diese Sektion wieder verwenden, aber dann nur die Details des Premierministers
zum Beispiel:-
Name:,
Alter
Wahlkreis
Partei, der er/sie angehört
Wie oft er/sie gewonnen hat
Details / Biografie
etc. würden als Sektionen innerhalb des Artikels behandelt werden.
Ähnlich auch für die anderen.
In der Zwischenzeit gibt es ein interessantes Element/Tag
zu besprechen. Dieses dient ebenfalls bestimmten Zwecken, sollte aber immer mit dem Kontext zusammenhängen, auch wenn es nicht tatsächlich Teil davon ist, wie Sie im obigen Beispiel sehen. Es spricht über einen bestimmten Teil, der mit dem Kontext zusammenhängt, aber nicht Teil davon ist.
tag ist der Inhaltsbehälter, in dem der Hauptteil der Website residiert, der alles von Slider bis Menü, Formulare, Details der Website usw. enthalten kann.
Zuletzt kommt das
<
footer> Tag
da sein Zweck und seine Rolle nicht erklärt werden müssen, da wir davon ausgehen, dass Sie alle wissen, wofür es gedacht ist.
Ich glaube, die Erklärung ist etwas lang, aber definitiv auf den Punkt gebracht und verständlich.
Bei Fragen können Sie zurückkommentieren oder mich per E-Mail erreichen [email protected]
Ich schätze „Chris“ sehr für dieses großartige und schöne Portal mit einem solch riesigen Wissensschatz.
Von Mozilla:
<section>kann<article>enthalten und<article>kann<section>enthalten.Was ist der Unterschied zwischen Artikel und Sektion?
• beide können
o ineinander verschachtelt werden
o je nach Kontext oder Verschachtelungsebene eine andere Bedeutung annehmen
• Sektionen sind wie Buchkapitel
o sie haben normalerweise Geschwister (vielleicht in einem anderen Dokument?)
o zusammen haben sie etwas gemeinsam, wie Kapitel in einem Buch
• ein Autor, ein Artikel, zumindest auf der untersten Ebene
o Standardbeispiel: ein einzelner Blogkommentar
o ein Blogbeitrag selbst ist ebenfalls ein gutes Beispiel
o ein Blogbeitragsartikel und seine Kommentarartikel könnten auch mit einem Artikel umschlossen werden
o es ist etwas „vollständiges“, kein Teil einer Reihe von ähnlichen Dingen
• Sektionen in einem Artikel sind wie Kapitel in einem Buch
• Artikel in einer Sektion sind wie Gedichte in einem Band (innerhalb einer Reihe)
Im Zweifelsfall beachten Sie die Spezifikation
https://www.w3.org/TR/2011/WD-html5-20110525/sections.html#the-section-element
https://www.w3.org/TR/2011/WD-html5-20110525/sections.html#the-article-element
Beachten Sie, dass die Beispiele in der Spezifikation zeigen, dass section und article beide ineinander verschachtelt sind; es gibt keine einfache Regel, die besagt, dass das eine nur/immer im anderen verschachtelt sein sollte.
Vielleicht sollte die Rolle des Hauptinhalts oder das Haupt-Tag hinzugefügt werden.
Artikel sollten Sektionen enthalten. Nicht umgekehrt.
Es ist absolut akzeptabel, Artikel in eine Sektion aufzunehmen. Die Spezifikation besagt derzeit
Und, was Artikel betrifft, sie können eigenständige Elemente auf einer Seite sein
Zusammengenommen kann die Sektion eine Gruppe von thematisch verwandten Artikeln sein, die eigenständige Elemente sind. Das Einzige, was hier möglicherweise aktualisiert wird, ist die Einbeziehung eines Titels innerhalb der Sektion.