nicht angemeldet
Verwirrung über Vielfalt der Vorschläge
Matthias ApselMoin,
ich möchte mich ein wenig in HTML/CSS einarbeiten.
Auf der Suche nach einem Grundgerüst bin ich auf die unterschiedlichsten Vorschläge gestoßen gestoßen.
Dabei waren die head und footer-Angaben meistens ähnlich.
In den Vorschlägen für body allerdings stark unterschiedlich.
Beispiele:
1.
<body><h1>....</h1></body>
(https://wiki.selfhtml.org/wiki/HTML/Tutorials/Einstieg/Kapitel3)
<body><p>....</h1></p></body>
(https://www.heise.de/tipps-tricks/HTML-Grundlagen-Was-Einsteiger-wissen-muessen-3887124.html)
3.
<body>
<div id="container">
<h1 id="kopfbereich"></h1>
<div id="hauptnavi">
</div><!-- /#hauptnavi →
<div id="mittelbereich">
<div id="inhalt">
</div><!-- /#inhalt →
<div id="sidebar">
</div><!-- /#sidebar →
<div class="clearer"><!-- hebt später die floats auf --></div>
</div><!-- /#mittelbereich →
<div id="footer">
</div><!-- /#footer →
</div><!-- /#container →
</body>
(https://www.akademie.de/de/wissen/wordpress-theme-erstellen/html-grundgeruest-0)
<body>
<7header>
</header>
<nav>
</nav>
<section>
</section>
<body>
(https://www.typo-script.de/html-und-css/html5-grundgeruest/)
<body>
<header>
........
</header>
<nav>
........
</nav>
<main>
<article>
........
</article>
<aside>
........
</aside>
</main>
</body>
(https://developer.mozilla.org/de/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure)
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<div style="padding-left:16px">
<h2>Top Navigation Example</h2>
<p>Some content..</p>
</div>
</body>
(https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_topnav)
<body>
<header>
<nav>..navigation menu links here…</nav>
</header>
<article>
<section>…</section>
<section>…</section>
<section>…</section>
</article>
<aside>…</aside>
<footer>…</footer>
</body>
(http://www.cellbiol.com/bioinformatics_web_development/chapter-3-your-first-web-page-learning-html-and-css/introducing-html5-footer-header-nav-article-section-and-aside-elements/)
und viele mehr!
Gibt es eine Stelle, die festlegt, was in main an Strukturelementen erlaubt ist und in welcher Reihenfolge?
-
Hallo Autorin: Hanni P.,
Moin,
ich möchte mich ein wenig in HTML/CSS einarbeiten.Herzlich willkommen.
<body><h1>....</h1></body>Das kannst du nehmen.
<body><p>....</h1></p></body>Das ist kaputt.
3. <body> <div id="container"> <h1 id="kopfbereich"></h1> <div id="hauptnavi"> </div><!-- /#hauptnavi → <div id="mittelbereich"> <div id="inhalt"> </div><!-- /#inhalt → <div id="sidebar"> </div><!-- /#sidebar → <div class="clearer"><!-- hebt später die floats auf --></div> </div><!-- /#mittelbereich → <div id="footer"> </div><!-- /#footer → </div><!-- /#container → </body>Das ist veraltet. Das solltest du unter keinen Umständen verwenden.
<body> <7header> </header> <nav> </nav> <section> </section> <body>Das könnte gut sein. Hängt natürlich von deinen Inhalten ab.
<body> <header> ........ </header> <nav> ........ </nav> <main> <article> ........ </article> <aside> ........ </aside> </main> </body>s. o.
<body> <div class="topnav"> <a class="active" href="#home">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> </div> <div style="padding-left:16px"> <h2>Top Navigation Example</h2> <p>Some content..</p> </div> </body>(https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_topnav)
Das nimm mal lieber nicht. Für die div-Elemente gibt es besser geeignete.
<body> <header> <nav>..navigation menu links here…</nav> </header> <article> <section>…</section> <section>…</section> <section>…</section> </article> <aside>…</aside> <footer>…</footer> </body>Das geht wieder.
Gibt es eine Stelle, die festlegt, was in main an Strukturelementen erlaubt ist und in welcher Reihenfolge?
Ich schlage vor, du schaust in unser Tutorial, was du ja schon gefunden hast. Deine Frage nach den erlaubten Inhalten in main wird in https://wiki.selfhtml.org/wiki/HTML/Elemente/main beantwortet.
Bis demnächst
Matthias--
Du kannst das Projekt SELFHTML unterstützen,
indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.