Section ohne Überschrift?

hopsli · 27. Januar 2015

Hallo an Euch,
meine Seite habe ich validiert, und sie ist html5-konform, es gab nur zwei Warnungen:

Ich habe eine section gemacht, die inhaltlich keiner Überschrift bedarf.
Ohne Überschrift wirft mir der w3c-Validator aber diese Warnung aus:

"Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections."

Mit Tricks lässt sich da zwar auch eine Überschrift hineinschmuggeln (einen h3 mit id, den ich auf unsichtbar setze), aber wozu? Was ist besser, oder gibt es da kein besser oder schlechter: tricksen, oder mit dieser Warnung leben?

Eine weitere Warnung bekomme ich auch, aber die kriegt wohl jeder (oder?):
"Using experimental feature: HTML5 Conformance Checker."

Was meint Ihr: Kann ich zufrieden sein, so wie die Seite jetzt ist?

Basi · 27. Januar 2015

Wenn deine Section keiner Überschrift bedarf ist Section wohl das falsche Element an dieser Stelle. Demnach solltest du keine Überschrift hinein schmuggeln sondern ein passendes Element finden. Um was für einen Bereich handelt es sich denn? Uns fällt sicher etwas ein, Code wäre ganz hilfreich.

Using experimental feature: HTML5 Conformance Checker erhält jeder der seinen Code als HTML5 validiert, dies liegt einfach daran das der Algorithmus für die Validierung von HTML5 noch nicht komplett ausgereift ist, kannst du also bedenkenlos ignorieren.

hopsli · 28. Januar 2015

Hallo Basii,

ich habe einfach mal die Ansicht der kompletten Datei drangehängt. Die Div-Suppe ist gesichtet, aber ich wusste mit einigen Elementen nichts anzufangen, wie z.B.;
- mit dem Logo überm Menue (=nav) - sollte ich es dem Menue zuschlagen? Immerhin führt ein Klick zurück zur Home.
- mit der bildershow (es wechseln die Bilder)
- nav=klein bezieht sich auf die drei Links unterhalb des Willkommens-Artikels.
- div=Angebote ist im Prinzip die Überschrift zu den vier Teasern. Die vier Teaser habe ich als einzelne article deklariert und in einer section zusammengefasst.
- In meiner Frage ging es darum, dass nun diese Section mit den vier Teasern keine eigene Überschrift hat. Das blöde ist: sie gibt es, aber sie liegt außerhalb des als section definierten Bereiches, nämlich darüberhtml-seminar.de/woltlab/attachment/766/.

Mich würde sehr interessieren, wie Du es gliedern würdest, oder findest Du meine Aufteilung jetzt schon sinnvoll?

Gespannte Grüße
hopsli
Hallo Basiii, und alle anderen,
ich möchte mich nicht aufdrängen aber trotzdem nochmal nachfragen, ob das Bild zu unklar war. Ich könnte mir vorstellen, dass es auch andere interessieren könnte, wie Ihr Spezis meine Aufteilung findet.
Oder findet Ihr allein den Ansatz schon verkehrt?
Mir ist bewusst, dass die Aufteilung derzeit nicht nach einem responsive Design aussieht. das ist natürlich mein nächstes Ziel, vielleicht muss ich gehörig umbauen. Aber einen Schritt nach dem anderen...

Basi · 3. Februar 2015

Code bitte.

hopsli · 3. Februar 2015

Danke

HTML

<!doctype html>
<html lang="de">
<head>
 <meta charset="UTF-8">
 <meta name="description" CONTENT="xxx">
 <meta name="ROBOTS" content="index, follow">
 <meta name="revisit-after" content="20 days">
 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
 <link rel="STYLESHEET" type="text/css" href="stil/style_home.css" />
 <link rel="STYLESHEET" type="text/css" href="stil/menuestyle.css" />
 <script type="text/javascript" src="js/scripts.js"></script>
 <script type="text/javascript" src="js/slideshow.js"></script>
<title>Titel</title>
</head>
<body onload="erstelleFader();">
<div id="logo"><a href="index.php"><img src="images/logo.gif" width="184" height="95" alt="xxx" /></a></div>
<nav id="menue">
	<ul>
  	<li class="haupt_hi"><a href="index.php">Home</a></li>
  	<li class="haupt_subm"><a href="pfad.php">Link</a></li>
  	<li class="haupt_subm"><a href="pfad.php">Link</a></li>
  	<li class="haupt_subm"><a href="pfad.php">Link</a></li>
  	<li class="haupt_subm"><a href="pfad.php">Link</a></li>
  	<li class="haupt_subm"><a href="pfad.php">Link</a></li>
  	<li class="haupt_subm"><a href="pfad.php">Link</a></li>
  	<li class="haupt_subm"><a href="pfad.php">Link</a></li>
  	<li class="haupt"><a href="pfad.php">Link</a></li>
  	<li class="haupt_subm"><a href="pfad.php">Link</a></li>
  	<li class="haupt_subm"><a href="pfad.php">Link</a></li>
  	<li class="haupt"><a href="pfad.php">Link</a></li>
	</ul>
</nav>
<aside id="update">  
   <p>Letztes Update: 13.01.2015</p>
   <p><h1>Download</h1>
   <p class="fl"><a href="pdf/katalog.pdf" target="_blank">Hauptkatalog<br />(pdf)<br /><img src="images/katalog-2015.jpg" width="71" height="100" alt="Katalog 2015" title="Katalog 2015"  /></a></p>
   <p class="clear"></p><p class="ergaenz"><a href="klimaschutz/danke-an-die-kunden.php"><img src="images/medaille_home.jpg" width="130" height="100" alt="award" title="xxx"></a></p> 
   <p class="clear"></p>  <p><br /><br /><a href="http://www.facebook.com" target="_blank" class="facebook">Facebook</a><br /><br /><a href="sitemap.php">Sitemap</a><br /><br /></p>
</aside> 
<article id="introtext">
   <h1>Willkommen</h1>
   <p>Lorem ipsum dolor sit amet</p>
   <p>Consetetur sadipscing elitr:   , no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolor.</p>
   <ul><li> ed diam nonumy eirmod tempor invidunt ut labore </li>
   <li> set dolore magna aliquyam erat, sed diam voluptua.</li>
   <li> At vero eos et accusam et justo duo dolores et ea rebum.</li></ul>
   <p>Stet clita kasd gubergren!</p>
</article>
<div id="bildershow">
   <p id="slideshow"> </p>
</div>
<nav id="dreilinks_li">
 <a href="pfad.php">Link &gt;</a>&nbsp;&nbsp;&nbsp;
 <a href="pfad.php">Link &gt;</a>&nbsp;&nbsp;&nbsp;
 <a href="pfad.php">Link &gt;</a>
</nav>
<div id="unsereangebote"><h3>Unsere aktuellen Angebote:</h3></div>
<section id="teaserbereich">
	<article>
  	<div id="kasten1">
   	<header>
     	<a href="pfad.php"><img src="images/home_bild1.jpg" width="137" height="89" alt="Bild1" title="Bild1"  /></a>
     	<h2>&Uuml;berschrift Kasten1</h2>
   	</header>
   	<p><a href="pfad.php">At vero eos et accusam et justo duo dolores et ea rebum >></a></p>
  	</div>
	</article>
	<article>
   	<div id="kasten2">
   	<header>
     	<h2>&Uuml;berschrift Kasten2</h2>
   	</header>
   	<p><a href="pfad.php">At vero eos et accusam et justo duo dolores et ea rebum >></a></p>
     	<a href="pfad.php"><img src="images/home_bild2.jpg" width="137" height="89" alt="Bild2" title="Bild2"  /></a>
  	</div>
	</article>
	<article>
   	<div id="kasten3">
   	<header>
     	<h2>&Uuml;berschrift Kasten3</h2>
   	</header>
   	<p><a href="pfad.php">At vero eos et accusam et justo duo dolores et ea rebum >></a></p>
     	<a href="pfad.php"><img src="images/home_bild3.jpg" width="137" height="89" alt="Bild3" title="Bild3"  /></a>
   	</div>
	</article>
	<article>
  	<div id="kasten4">
   	<header>
     	<a href="pfad.php"><img src="images/home_bild4.jpg" width="137" height="89" alt="Bild4" title="Bild4"  /></a>
     	<h2>&Uuml;berschrift Kasten4</h2>
   	</header>
   	<p><a href="pfad.php">At vero eos et accusam et justo duo dolores et ea rebum >></a></p>
  	</div>
	</article>
 <div id="clear"></div>
</section><br>
<footer id="fussbereich"><p>Stet clita kasd gubergren, no sea takimata sanctus est <a href="mailto:#">Mail</a>
	&nbsp;&nbsp;&middot;&nbsp;&nbsp;<a href="sitemap.php">Sitemap</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;<a href="impressum.php">Impressum</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;
	<a href="datenschutz.php">Datenschutz</a></p><br>
</footer>




</body>
</html>

Alles anzeigen

wolf · 3. Februar 2015

HTML5 Overhead
Sematisch korrekt wäre es so:

HTML

<section>
  <h2></h2>
  <article>
      <header>
        <a><img></a>
        <h3></h3>
      </header>
      <p>
        <a></a>
      </p>
    </div>
  </article>
</section>

Alles anzeigen

Allerdings ist das <header> element Overhead.. dh. du brauchst es absout NICHT (ausnahme, du braucht es zum Stylen, aber da tut's ein div auch!)!
Das hier tut's auch:

HTML

<section>
  <h2>Headline 2</h2>
  <article class="hier kannst du auch deine kasten nummer mitgeben..!">
    <a href="#hier"><img src="blub.png" alt="Blubberblase"></a>
    <h3>Headline 3</h3>
    <a href="#hier">Dort >></a>
  </article>
</section>

Genauso kannst du dir den Overhead bei link/script-Tags sparen..:

HTML

<link rel="stylesheet" href="stil/style_home.css">
<link rel="stylesheet" href="stil/menuestyle.css">




<script src="js/scripts.js"></script>
<script src="js/slideshow.js"></script>

KEIN Design via HTML!!
Sorry aber dass hier ist bullshit

HTML

<footer id="fussbereich">
  <p>Stet clita kasd gubergren, no sea takimata sanctus est 
    <a href="mailto:#">Mail</a>
    &nbsp;&nbsp;&middot;&nbsp;&nbsp;
    <a href="sitemap.php">Sitemap</a>
    &nbsp;&nbsp;&middot;&nbsp;&nbsp;
    <a href="impressum.php">Impressum</a>
    &nbsp;&nbsp;&middot;&nbsp;&nbsp;
    <a href="datenschutz.php">Datenschutz</a>
  </p>
  <br>
</footer>

Alles anzeigen

Gib den Links einen margin und dem footer n padding und dann ist alles gut..!

HTML

<footer class="fussbereich">
  Stet clita kasd gubergren, no sea takimata sanctus est 
  <a href="mailto:#">Mail</a>&middot;
  <a href="sitemap.php">Sitemap</a>&middot;
  <a href="impressum.php">Impressum</a>&middot;
  <a href="datenschutz.php">Datenschutz</a>
</footer>

Hier das gleiche bloß sematisch INKORREKT
ACHTUNG.. hierfür landest du im Suchmascheinen Ranking weit unten und die Sematik deiner Seite ist sogut wie fürn Arsc*

HTML

<p>Letztes Update: 13.01.2015</p>
<p><h1>Download</h1>

Ist das wort 'Download' wirklich deine Websiten-HAUPT-überschrift?! - NEIN also weg mit dem h1-Tag! - EIN h1-Tag pro Seite ist erlaubt und der hat die MEGAHAUPTüberschrift zu beinhalten.

Clearfix div - weg damit!
Den hier kannst du dir sparen!

HTML

<section id="teaserbereich">
  <article>
  </article>
  <div id="clear"></div>
</section><br><!-- ersetze jegliche solcher breaks durch Margins!! -->

Eine meistens schöndere lösung als das 'clearfix div' ist so:

HTML

<section class="cfx">
  <article>
  </article>
</section>

CSS

.cfx:after{
  display: block;
  content: '';
  clear: both;
}

Wissenswert für die Zukunft
Du musst NICHT jeden Textfetzen in einne p-Tag packen! Den kannst du dir sehr oft sparen..! heb ihn dir lieber für echte Textabsätze auf - tu der Suchmaschiene und dir was gutes!
br,img,link..-Tags darfst du OHNE / (backslash) am ende schreiben in HTML5!

HTML

<br /> wird zu <br>

Es ist ein bisschen geschmackssache aber ich bennene (wenn es überhaupt nötig ist) meine bereiche über Klassen statt über ID's (die sind nämlich nicht mehrfachverwendbar.. ).

So das war jetzt das meiste was ich zu sagen hatte.. Nimms nicht zu hart die Kritik, versuche es umzusetzen soweit es geht und wenn du es nicht verstehst, frag nach

Wie ich das coden würde..
Mein Persönlicher Quelltext würde wohl etwa so aussehen

HTML

<!doctype html>
<html lang="de">
  <head>
   <meta charset="utf-8">
   <meta name="description" CONTENT="xxx">
   <meta name="ROBOTS" content="index, follow">
   <meta name="revisit-after" content="20 days">




   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">




    <link rel="stylesheet" href="stil/style_home.css">
    <link rel="stylesheet" href="stil/menuestyle.css">




    <script src="js/scripts.js"></script>
    <script src="js/slideshow.js"></script>




    <title>Titel</title>
  </head>
  <body onload="erstelleFader();">
    <div class="links-wrap">
      <header>
        <div class="logo">
          <a href="index.php">
            <img src="images/logo.gif" width="184" height="95" alt="xxx">
          </a>
        </div>
        <nav class="menue">
          <ul>
            <li class="haupt_hi"><a href="index.php">Home</a></li>
            <li class="haupt_subm"><a href="pfad.php">Link</a></li>
          </ul>
        </nav>
      </header>
      <aside class="update">  
      </aside>
    </div>
    <main>
      <h1>Willkommen bei ABCDX</h1>
      <article class="introtext">
        <p>
          Lorem ipsum dolor sit amet<br>
          Consetetur sadipscing elitr:   , no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
        <ul>
          <li> ed diam nonumy eirmod tempor invidunt ut labore </li>
          <li> set dolore magna aliquyam erat, sed diam voluptua.</li>
          <li> At vero eos et accusam et justo duo dolores et ea rebum.</li>
        </ul>
        Stet clita kasd gubergren!
      </article>
      <div id="bildershow">
         <p id="slideshow"> </p>
      </div>
      <nav id="dreilinks_li">
        <ul>
          <li><a href="pfad.php">Link &gt;</a></li>
          <li><a href="pfad.php">Link &gt;</a></li>
          <li><a href="pfad.php">Link &gt;</a></li>
        </ul>
      </nav>
      <section>
        <h2>Unsere aktuellen Angebote:</h2>
        <article class="kasten-1">
          <a href="#hier"><img src="blub.png" alt="Blubberblase"></a>
          <h3>Kasten 1</h3>
          <a href="#hier">Dort >></a>
        </article>
        <article class="kasten-2">
          <a href="#hier"><img src="blub.png" alt="Blubberblase"></a>
          <h3>Kasten 2</h3>
          <a href="#hier">Dort >></a>
        </article>
      </section>
    </main>
    <footer>
      Stet clita kasd gubergren, no sea takimata sanctus est
      &middot; <a href="mailto:#">Mail</a>
      &middot; <a href="sitemap.php">Sitemap</a>
      &middot;<a href="impressum.php">Impressum</a>
      &middot;<a href="datenschutz.php">Datenschutz</a>
    </footer>
  </body>
</html>

Alles anzeigen

hopsli · 4. Februar 2015

Hallo Wolf,
danke für Deine Hinweise, das ist super!!! Nee, ich nehme die Kritik sehr produktiv auf, weiß ja, dass ich Nachholbedarf habe. Und danke, wenn ich Fragen habe, melde ich mich!
"Es ist ein bisschen geschmackssache aber ich bennene (wenn es überhaupt
nötig ist) meine bereiche über Klassen statt über ID's (die sind nämlich
nicht mehrfachverwendbar.. )."

Hi Wolf,
das ist für mich der Grund, warum ich IDs dort nehme, wo ich eine Positionierung über die ID vornehmen muss, siehe mein Layout. Mit class könnte ich das so nicht vornehmen. In der Tat nutze ich die IDs gerade weil sie nur einmalig vorkommen.
Oder liege ich da falsch?

wolf · 4. Februar 2015

Ja, ID's sind nur einmalig!

Aber ich frage mich WO du absolute positionierung brauchst..

btw geht es auch anders ein Element zu selektieren.. später mehr
Hier mal eine Liste von CSS Selektoren.. http://codepen.io/wolf-w/pen/ogGrGm

Section ohne Überschrift?

Jetzt mitmachen!

Teilen