Korrekte Verwendung von semantischen HTML5-Tags

Question

Ich kämpfe mit der Anwendung von semantischen Tags auf eine Website mit einem Katalog von Altertümern.

Die erste Frage bezieht sich auf die Hauptstruktur:

body 
    header 
    h1 
    h2 
    nav 
     a 
     ... 
     a 
    main 
    div  // Search field and a button to open a spacious filter pane 
    article 
    article 
    article 
    ... 
    article 
    div  // Pagination 
    footer 
    p 

Ist es richtig, die beiden divs mit Such- und Filteroptionen und die Paginierung in die Haupt Tag zu setzen? Oder sollten sie unabhängig sein in der Körper Tag vor und nach Haupt?

Die zweite Frage bezieht sich auf den Artikel in der obigen Struktur:

article 
     figure 
     img  // depicts the antiquity 
     figcaption 
     header 
      h3 // title of the antiquity 
      p  // detailed description of the antiquity 
     section 
      p  // first owner of the antiquity 
      p  // second owner of the antiquity 
      ... 
      p  // last and therfore current owner of the antiquity 
     section 
      p  // first literature record on this antiquity 
      p  // second literature record on this antiquity 
      ... 
      p  // last literature record on this antiquity 

Ich bin mir ziemlich sicher, dass aus der Betrachtung anderen Fragen und Antworten, dass es richtig ist, dass Abschnitt auf diese Weise unter Artikel verwendet werden kann. Was ich völlig unsicher bin, ist, den vollständigen Text des Altertumseintrags in figcaption zu setzen.

Answer 1

Es ist völlig in Ordnung, ein Div für die Suche zu verwenden.

Sie können ein Navigationselement für die Paginierung verwenden: https://developer.mozilla.org/en/docs/Web/HTML/Element/nav

Was die Struktur des Artikel Elements. A Abb Beschriftung sollte die erste oder letzte Kind Figur sein, um weitere Informationen sehen hier: https://developer.mozilla.org/en/docs/Web/HTML/Element/figure
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption

So würde ich vorschlagen, dass Sie Artikel aussehen wie machen:

article 
    figure 
    img  // depicts the antiquity 
    figcaption //text about the image 
    header 
    h1 // title of the antiquity 
    p  // detailed description of the antiquity 
    section 
    p  // first owner of the antiquity 
    p  // second owner of the antiquity 
    ... 
    p  // last and therefore current owner of the antiquity 
    section 
    p  // first literature record on this antiquity 
    p  // second literature record on this antiquity 
    ... 
    p  // last literature record on this antiquity 

Während die mit Korrektes Markup wird bevorzugt, ich glaube nicht, dass Sie bestraft werden, wenn Sie es falsch machen.